Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Navigation: Implement new design for sub-menus #19681
This PR improves the sub-menus for the Navigation block. Significant changes:
About technical implementation
We need to keep in mind that this PR propagates the color values from the Navigation block to each Navigation Item. It simplifies applying the styles via CSS, and get ready the code to apply custom colors to sub-menus/sub-items.
Tasks on this PR:
How has this been tested?
Types of changes
…> level so links are now full width and everywhere in the menus is hoverable/clickable. Focus rings look nicer now too.
… width. This means that long submenu items will wrap. I also set a lower line height on items so that it was more obvious that a wrapped submenu item was one item,
* navigation-link: add has-child css class * colors: move navigation scss var to base-styles * squash * navigation: organize * navigation: propagate style css Class * navigation: implement dark styles * Minor wip style update to be closer to design * navigation: remove duplicated has-child code * navigation-link: remove unused prop * add wip version of children arrow indicators Need to define what design keep: CSS arrow vs SVG icon * navigation: remove styles - propagate custom colors. * navigation: fix has bgc css class name * navigation: apply light/dark styles when no colors * navigation-link: propagate Navigation block attrs * navigation-link: add border-color inline style * navigation-link: apply custom border-color * navigation-link: set colors CSS classes * use-colors: add attr for color value * navigation: store and populate inline colors It stores the color values for both text and background color in the Navigation block, and propagete these values to the Navigation Link block, in order to be able to apply colors using inline style. * navigation: improve handling colors/styles. * remove old submenu frontend styles * navigation: fix env linting error * navigation: fix rebasing issues * navigation-link: remove CSS arrow in favor of SVG * navigation: refact -> icons as components * navigation: detect and propagate color to the SVG * navigation-item: use detected color as default * navigation-link: add chevron to all menu levels * Show submenu indicators by default * Fix linting and formatting errors * Update Display Settings copy to reflect that it now affects multiple levels * Update submenu indicators to new design * Remove obsolete indicator styles * Start cleanup of style.scss by ordering by function of styles * Reduce specificity by not overwriting inline styles * Continue organizing style.scss by ordering by function of styles * Share basic top level styles between editor and frontend * readd rotation of submenu indicators * navigation-link: apply svg text color with CSS * make child class usage consistent between editor and frontend * add class to frontend to apply styles that match .block-editor-inner-blocks usage * start sharing editor styles with frontend * update navigation container positioning * Add submenu indicators to submenus on the frontend * unify submenu icon styles * move icon rotation to correct position * apply classes to all navigation links * add colors to frontend submenus * navigation-link: put the icon on the full right * navigation: remove unneeded padding * navigation: remove deprecated styles * navigation: hid all sub-menus * navigation: remove detected-color code * navigation: unify default styles. * navigation: dealing with min heigh and vert align * navigation: main menu height / vertical alignment * navigation: adjust box model and position * navigation: set width fixing the alignment * navigation: set CSS classes depending on value att * navigation: fix and simlify block styles * Slightly simplify css class assembly * navigation: set border color using currentColor * navigation-edit: simplify color attrs * navigation: improve paddings, positions, etc. * navigation: pick up rgb colors outside of hook * navigation: move sub-menus (L1) up a grid size * navigation: fix php linting errors * Update the inserter positioning and spacing. Remove the submenu borders so they belnd with the top level menu. * Restore the border on sub menus, but use alpha so that it blends better with whatever the selected background color is. * Align flyout submenu tops. * Use $border-width instead of a magic number for submenu alignment * Removed ul and li padding on submenus and moved them into the link <a> level so links are now full width and everywhere in the menus is hoverable/clickable. Focus rings look nicer now too. * Set a fixed width on submenu widths instead of relying on the content width. This means that long submenu items will wrap. I also set a lower line height on items so that it was more obvious that a wrapped submenu item was one item, * Move padding from li to a on top-level items. * Moved caret on submenu icon left a bit more. * Better align grandchild links with bottom child links * navigation: remove is level zero arg * navigation: remove flex-wrap in to fix nav width * navigation: handling default true value for arrow * Set top: 100% on navigation submenu instead of magic number * Left align submenus * navigation: fix showing submenu icon * navigation: fixing linting errors * navigation: fix setting link width Co-authored-by: Michael P. Pfeiffer <email@example.com> Co-authored-by: Konstantin Obenland <firstname.lastname@example.org> Co-authored-by: Andy Peatling <email@example.com> Co-authored-by: Jerry Jones <firstname.lastname@example.org>