-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Navigation Screen: Design Iteration (#28675)
* Just trying a few things out. * Moving things around. * Cleaning up the unnecessary stuff from the editor component. * Move the inspector out of the header and into the main layout. * Moving the inspector to an always visible, fixed sidebar. * Force the Nav block to list items vertically, and add more spacing everything. Also, a nasty hack to fix the block focus outlines. * Removing the styling from the top bar. * Adjusting the space around the link blocks and the appender. * Forcing submenu links to display as normal block elements, indented below their parent link. * Adjusting some spacing, and removing some unused CSS. * Use floating toolbar instead of fixed toolbar in the navigation editor (#28769) * Force navigation screen nav block to vertical variation (#28689) * Moving styles to the right folder, and removing some empty selectors. * Replacing fixed values with variables; Cleaning up spacing; Added border to parents whose children are being edited. * Bringing back submenu arrows and hiding submenus unless the parent link is selected. * Bringing back the removeNavigationBlockEditUnsupportedFeatures, which hides the ability to toggle submenu indicators. * Linting * Update comments * Use SCSS variables * Fix getNavigationPostForMenu test, should expect the menu to be vertical * Update e2e snapshots and skip test for regressed feature Co-authored-by: Daniel Richards <[email protected]>
- Loading branch information
1 parent
24552b9
commit 201ccbc
Showing
19 changed files
with
189 additions
and
283 deletions.
There are no files selected for viewing
4 changes: 2 additions & 2 deletions
4
packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 0 additions & 38 deletions
38
packages/edit-navigation/src/components/editor/block-view.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,23 @@ | ||
| /** | ||
| * Internal dependencies | ||
| * WordPress dependencies | ||
| */ | ||
| import BlockView from './block-view'; | ||
| import ListView from './list-view'; | ||
| import { BlockList, ObserveTyping, WritingFlow } from '@wordpress/block-editor'; | ||
| import { Spinner } from '@wordpress/components'; | ||
|
|
||
| export default function Editor( { isPending, blocks } ) { | ||
| export default function Editor( { isPending } ) { | ||
| return ( | ||
| <div className="edit-navigation-editor"> | ||
| <BlockView isPending={ isPending } /> | ||
| <ListView isPending={ isPending } blocks={ blocks } /> | ||
| { isPending ? ( | ||
| <Spinner /> | ||
| ) : ( | ||
| <div className="editor-styles-wrapper"> | ||
| <WritingFlow> | ||
| <ObserveTyping> | ||
| <BlockList /> | ||
| </ObserveTyping> | ||
| </WritingFlow> | ||
| </div> | ||
| ) } | ||
| </div> | ||
| ); | ||
| } |
34 changes: 0 additions & 34 deletions
34
packages/edit-navigation/src/components/editor/list-view.js
This file was deleted.
Oops, something went wrong.
114 changes: 87 additions & 27 deletions
114
packages/edit-navigation/src/components/editor/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,103 @@ | ||
| .edit-navigation-editor { | ||
| flex-grow: 1; | ||
| background: $white; | ||
| border: $border-width solid $gray-900; | ||
| border-radius: $radius-block-ui; | ||
| margin-top: $grid-unit-50 * 2; | ||
|
|
||
| @include break-medium() { | ||
| align-items: flex-start; | ||
| display: flex; | ||
| .components-spinner { | ||
| display: block; | ||
| margin: $grid-unit-15 auto; | ||
| } | ||
| } | ||
|
|
||
| .edit-navigation-editor__block-view { | ||
| padding: $grid-unit-20; | ||
| @include break-medium() { | ||
| flex-grow: 1; | ||
| align-self: stretch; | ||
| // Adapt the layout of the Navigation and Link blocks | ||
| // to work better in the context of the Navigation Screen. | ||
| .wp-block-navigation { | ||
| margin: 0; | ||
| font-size: 15px; | ||
| padding: $grid-unit-15; | ||
| } | ||
|
|
||
| .components-spinner { | ||
| .wp-block-navigation-link { | ||
| display: block; | ||
| margin: 10px auto; | ||
|
|
||
| // Fix focus outlines | ||
| &.is-selected > .wp-block-navigation-link__content, | ||
| &.is-selected:hover > .wp-block-navigation-link__content { | ||
| box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | ||
| } | ||
|
|
||
| &.block-editor-block-list__block:not([contenteditable]):focus::after { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .edit-navigation-editor__list-view { | ||
| border-top: 1px solid $gray-300; | ||
| padding: $grid-unit-20; | ||
| .wp-block-navigation-link__content { | ||
| padding: 0; | ||
| margin-bottom: 6px; | ||
| border-radius: $radius-block-ui; | ||
|
|
||
| @include break-medium() { | ||
| border-left: 1px solid $gray-300; | ||
| border-top: none; | ||
| margin-top: 0; | ||
| width: 300px; | ||
| &:hover { | ||
| box-shadow: 0 0 0 $border-width $gray-300; | ||
| } | ||
| } | ||
|
|
||
| .edit-navigation-editor__list-view-title { | ||
| font-size: 1.2em; | ||
| margin: 0; | ||
| .wp-block-navigation-link__label { | ||
| padding: $grid-unit-15; | ||
| padding-left: $grid-unit-30; | ||
|
|
||
| // Without this Links with submenus display a pointer. | ||
| cursor: text; | ||
| } | ||
|
|
||
| .components-spinner { | ||
| display: block; | ||
| margin: 100px auto; | ||
| // Position the submenu icon so it appears to the left of | ||
| // the Link. All the extra specificity is help override the | ||
| // rotation on the SVG. | ||
| .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__submenu-icon { | ||
| position: absolute; | ||
| top: 6px; | ||
| left: 2px; | ||
| padding: 6px; | ||
| pointer-events: none; | ||
|
|
||
| svg { | ||
| padding: 0; | ||
| transform: rotate(90deg); | ||
| } | ||
| } | ||
|
|
||
| // Submenus | ||
| // There's a bunch of stuff to override just to get submenus to | ||
| // as a normal block element. | ||
| .wp-block-navigation-link.has-child { | ||
| cursor: default; | ||
| border-radius: $radius-block-ui; | ||
| } | ||
|
|
||
| // When editing a link with children, highlight the parent | ||
| // and adjust the spacing and submenu icon. | ||
| .wp-block-navigation-link.has-child.is-editing { | ||
| > .wp-block-navigation__container { | ||
| opacity: 1; | ||
| visibility: visible; | ||
| position: relative; | ||
| background: transparent; | ||
| top: auto; | ||
| left: auto; | ||
| padding-left: $grid-unit-15; | ||
| min-width: auto; | ||
| width: 100%; | ||
| border: none; | ||
| display: block; | ||
|
|
||
| &::before { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Add Buttons | ||
| .block-editor-button-block-appender.block-list-appender__toggle { | ||
| margin: 0 0 0 $grid-unit-20; | ||
| padding: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
Oops, something went wrong.