Improve the navigation block setup state / placeholder. #31371
Conversation
- Bring back Placeholder component for responsiveness. - Unstyle some things. - Tweak placeholder skeleton to inherit styles and match height of actual menu items.
<span className="wp-block-navigation-link"></span> | ||
<span className="wp-block-navigation-link"></span> | ||
<ul className="wp-block-navigation-placeholder__preview wp-block-navigation__container"> | ||
<li className="wp-block-navigation-link">​</li> |
jasmussen
Apr 30, 2021
Author
Contributor
The markup and class changes here allow inheritance, and the ​
character is a zero width space which ensures the menu item has the correct height: to inherit line height the element has to have content inside.
The markup and class changes here allow inheritance, and the ​
character is a zero width space which ensures the menu item has the correct height: to inherit line height the element has to have content inside.
@@ -46,8 +46,8 @@ function Placeholder( { | |||
let modifierClassNames; | |||
if ( typeof width === 'number' ) { | |||
modifierClassNames = { | |||
'is-large': width >= 320, | |||
'is-medium': width >= 160 && width < 320, | |||
'is-large': width >= 480, |
jasmussen
Apr 30, 2021
Author
Contributor
320 is not "large", and the container query system is less useful as a result.
This is nevertheless a change that makes it worth testing other containers that might be targetting the is-large
class.
320 is not "large", and the container query system is less useful as a result.
This is nevertheless a change that makes it worth testing other containers that might be targetting the is-large
class.
Size Change: +153 B (0%) Total Size: 1.31 MB
|
Filename | Size | Change |
---|---|---|
build/a11y/index.js |
1.12 kB | 0 B |
build/autop/index.js |
2.28 kB | 0 B |
build/block-directory/style-rtl.css |
993 B | 0 B |
build/block-directory/style.css |
995 B | 0 B |
build/block-editor/index.js |
116 kB | 0 B |
build/block-editor/style-rtl.css |
13 kB | 0 B |
build/block-editor/style.css |
13 kB | 0 B |
build/block-library/blocks/archives/editor-rtl.css |
61 B | 0 B |
build/block-library/blocks/archives/editor.css |
60 B | 0 B |
build/block-library/blocks/audio/editor-rtl.css |
58 B | 0 B |
build/block-library/blocks/audio/editor.css |
58 B | 0 B |
build/block-library/blocks/audio/style-rtl.css |
112 B | 0 B |
build/block-library/blocks/audio/style.css |
112 B | 0 B |
build/block-library/blocks/block/editor-rtl.css |
161 B | 0 B |
build/block-library/blocks/block/editor.css |
161 B | 0 B |
build/block-library/blocks/button/editor-rtl.css |
475 B | 0 B |
build/block-library/blocks/button/editor.css |
474 B | 0 B |
build/block-library/blocks/button/style-rtl.css |
515 B | 0 B |
build/block-library/blocks/button/style.css |
515 B | 0 B |
build/block-library/blocks/buttons/editor-rtl.css |
315 B | 0 B |
build/block-library/blocks/buttons/editor.css |
315 B | 0 B |
build/block-library/blocks/buttons/style-rtl.css |
368 B | 0 B |
build/block-library/blocks/buttons/style.css |
368 B | 0 B |
build/block-library/blocks/calendar/style-rtl.css |
208 B | 0 B |
build/block-library/blocks/calendar/style.css |
208 B | 0 B |
build/block-library/blocks/categories/editor-rtl.css |
84 B | 0 B |
build/block-library/blocks/categories/editor.css |
83 B | 0 B |
build/block-library/blocks/categories/style-rtl.css |
79 B | 0 B |
build/block-library/blocks/categories/style.css |
79 B | 0 B |
build/block-library/blocks/code/style-rtl.css |
90 B | 0 B |
build/block-library/blocks/code/style.css |
90 B | 0 B |
build/block-library/blocks/columns/editor-rtl.css |
190 B | 0 B |
build/block-library/blocks/columns/editor.css |
190 B | 0 B |
build/block-library/blocks/columns/style-rtl.css |
422 B | 0 B |
build/block-library/blocks/columns/style.css |
422 B | 0 B |
build/block-library/blocks/cover/editor-rtl.css |
603 B | 0 B |
build/block-library/blocks/cover/editor.css |
604 B | 0 B |
build/block-library/blocks/cover/style-rtl.css |
1.22 kB | 0 B |
build/block-library/blocks/cover/style.css |
1.22 kB | 0 B |
build/block-library/blocks/embed/editor-rtl.css |
486 B | 0 B |
build/block-library/blocks/embed/editor.css |
486 B | 0 B |
build/block-library/blocks/embed/style-rtl.css |
401 B | 0 B |
build/block-library/blocks/embed/style.css |
400 B | 0 B |
build/block-library/blocks/file/editor-rtl.css |
301 B | 0 B |
build/block-library/blocks/file/editor.css |
300 B | 0 B |
build/block-library/blocks/file/style-rtl.css |
255 B | 0 B |
build/block-library/blocks/file/style.css |
255 B | 0 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.45 kB | 0 B |
build/block-library/blocks/freeform/editor.css |
2.45 kB | 0 B |
build/block-library/blocks/gallery/editor-rtl.css |
704 B | 0 B |
build/block-library/blocks/gallery/editor.css |
705 B | 0 B |
build/block-library/blocks/gallery/style-rtl.css |
1.06 kB | 0 B |
build/block-library/blocks/gallery/style.css |
1.05 kB | 0 B |
build/block-library/blocks/group/editor-rtl.css |
160 B | 0 B |
build/block-library/blocks/group/editor.css |
160 B | 0 B |
build/block-library/blocks/group/style-rtl.css |
57 B | 0 B |
build/block-library/blocks/group/style.css |
57 B | 0 B |
build/block-library/blocks/heading/editor-rtl.css |
129 B | 0 B |
build/block-library/blocks/heading/editor.css |
129 B | 0 B |
build/block-library/blocks/heading/style-rtl.css |
76 B | 0 B |
build/block-library/blocks/heading/style.css |
76 B | 0 B |
build/block-library/blocks/html/editor-rtl.css |
281 B | 0 B |
build/block-library/blocks/html/editor.css |
281 B | 0 B |
build/block-library/blocks/image/editor-rtl.css |
717 B | 0 B |
build/block-library/blocks/image/editor.css |
716 B | 0 B |
build/block-library/blocks/image/style-rtl.css |
476 B | 0 B |
build/block-library/blocks/image/style.css |
478 B | 0 B |
build/block-library/blocks/latest-comments/style-rtl.css |
281 B | 0 B |
build/block-library/blocks/latest-comments/style.css |
282 B | 0 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
137 B | 0 B |
build/block-library/blocks/latest-posts/editor.css |
137 B | 0 B |
build/block-library/blocks/latest-posts/style-rtl.css |
523 B | 0 B |
build/block-library/blocks/latest-posts/style.css |
522 B | 0 B |
build/block-library/blocks/legacy-widget/editor-rtl.css |
557 B | 0 B |
build/block-library/blocks/legacy-widget/editor.css |
557 B | 0 B |
build/block-library/blocks/list/style-rtl.css |
63 B | 0 B |
build/block-library/blocks/list/style.css |
63 B | 0 B |
build/block-library/blocks/media-text/editor-rtl.css |
176 B | 0 B |
build/block-library/blocks/media-text/editor.css |
176 B | 0 B |
build/block-library/blocks/media-text/style-rtl.css |
492 B | 0 B |
build/block-library/blocks/media-text/style.css |
489 B | 0 B |
build/block-library/blocks/more/editor-rtl.css |
434 B | 0 B |
build/block-library/blocks/more/editor.css |
434 B | 0 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
617 B | 0 B |
build/block-library/blocks/navigation-link/editor.css |
619 B | 0 B |
build/block-library/blocks/navigation-link/style-rtl.css |
1.16 kB | 0 B |
build/block-library/blocks/navigation-link/style.css |
1.16 kB | 0 B |
build/block-library/blocks/navigation/style-rtl.css |
272 B | 0 B |
build/block-library/blocks/navigation/style.css |
271 B | 0 B |
build/block-library/blocks/nextpage/editor-rtl.css |
395 B | 0 B |
build/block-library/blocks/nextpage/editor.css |
395 B | 0 B |
build/block-library/blocks/page-list/editor-rtl.css |
239 B | 0 B |
build/block-library/blocks/page-list/editor.css |
240 B | 0 B |
build/block-library/blocks/page-list/style-rtl.css |
167 B | 0 B |
build/block-library/blocks/page-list/style.css |
167 B | 0 B |
build/block-library/blocks/paragraph/editor-rtl.css |
157 B | 0 B |
build/block-library/blocks/paragraph/editor.css |
157 B | 0 B |
build/block-library/blocks/paragraph/style-rtl.css |
247 B | 0 B |
build/block-library/blocks/paragraph/style.css |
248 B | 0 B |
build/block-library/blocks/post-author/editor-rtl.css |
209 B | 0 B |
build/block-library/blocks/post-author/editor.css |
209 B | 0 B |
build/block-library/blocks/post-author/style-rtl.css |
183 B | 0 B |
build/block-library/blocks/post-author/style.css |
184 B | 0 B |
build/block-library/blocks/post-comments-form/style-rtl.css |
250 B | 0 B |
build/block-library/blocks/post-comments-form/style.css |
250 B | 0 B |
build/block-library/blocks/post-content/editor-rtl.css |
139 B | 0 B |
build/block-library/blocks/post-content/editor.css |
139 B | 0 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
73 B | 0 B |
build/block-library/blocks/post-excerpt/editor.css |
73 B | 0 B |
build/block-library/blocks/post-excerpt/style-rtl.css |
69 B | 0 B |
build/block-library/blocks/post-excerpt/style.css |
69 B | 0 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
338 B | 0 B |
build/block-library/blocks/post-featured-image/editor.css |
338 B | 0 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
100 B | 0 B |
build/block-library/blocks/post-featured-image/style.css |
100 B | 0 B |
build/block-library/blocks/post-title/style-rtl.css |
60 B | 0 B |
build/block-library/blocks/post-title/style.css |
60 B | 0 B |
build/block-library/blocks/preformatted/style-rtl.css |
103 B | 0 B |
build/block-library/blocks/preformatted/style.css |
103 B | 0 B |
build/block-library/blocks/pullquote/editor-rtl.css |
183 B | 0 B |
build/block-library/blocks/pullquote/editor.css |
183 B | 0 B |
build/block-library/blocks/pullquote/style-rtl.css |
318 B | 0 B |
build/block-library/blocks/pullquote/style.css |
318 B | 0 B |
build/block-library/blocks/query-loop/editor-rtl.css |
83 B | 0 B |
build/block-library/blocks/query-loop/editor.css |
82 B | 0 B |
build/block-library/blocks/query-loop/style-rtl.css |
315 B | 0 B |
build/block-library/blocks/query-loop/style.css |
317 B | 0 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B | 0 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B | 0 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
270 B | 0 B |
build/block-library/blocks/query-pagination/editor.css |
262 B | 0 B |
build/block-library/blocks/query-pagination/style-rtl.css |
168 B | 0 B |
build/block-library/blocks/query-pagination/style.css |
168 B | 0 B |
build/block-library/blocks/query-title/editor-rtl.css |
86 B | 0 B |
build/block-library/blocks/query-title/editor.css |
86 B | 0 B |
build/block-library/blocks/query/editor-rtl.css |
131 B | 0 B |
build/block-library/blocks/query/editor.css |
132 B | 0 B |
build/block-library/blocks/quote/style-rtl.css |
169 B | 0 B |
build/block-library/blocks/quote/style.css |
169 B | 0 B |
build/block-library/blocks/rss/editor-rtl.css |
201 B | 0 B |
build/block-library/blocks/rss/editor.css |
202 B | 0 B |
build/block-library/blocks/rss/style-rtl.css |
290 B | 0 B |
build/block-library/blocks/rss/style.css |
290 B | 0 B |
build/block-library/blocks/search/editor-rtl.css |
189 B | 0 B |
build/block-library/blocks/search/editor.css |
189 B | 0 B |
build/block-library/blocks/search/style-rtl.css |
359 B | 0 B |
build/block-library/blocks/search/style.css |
362 B | 0 B |
build/block-library/blocks/separator/editor-rtl.css |
99 B | 0 B |
build/block-library/blocks/separator/editor.css |
99 B | 0 B |
build/block-library/blocks/separator/style-rtl.css |
251 B | 0 B |
build/block-library/blocks/separator/style.css |
251 B | 0 B |
build/block-library/blocks/shortcode/editor-rtl.css |
512 B | 0 B |
build/block-library/blocks/shortcode/editor.css |
512 B | 0 B |
build/block-library/blocks/site-logo/editor-rtl.css |
440 B | 0 B |
build/block-library/blocks/site-logo/editor.css |
441 B | 0 B |
build/block-library/blocks/site-logo/style-rtl.css |
154 B | 0 B |
build/block-library/blocks/site-logo/style.css |
154 B | 0 B |
build/block-library/blocks/social-link/editor-rtl.css |
164 B | 0 B |
build/block-library/blocks/social-link/editor.css |
165 B | 0 B |
build/block-library/blocks/social-links/editor-rtl.css |
796 B | 0 B |
build/block-library/blocks/social-links/editor.css |
795 B | 0 B |
build/block-library/blocks/social-links/style-rtl.css |
1.32 kB | 0 B |
build/block-library/blocks/social-links/style.css |
1.33 kB | 0 B |
build/block-library/blocks/spacer/editor-rtl.css |
308 B | 0 B |
build/block-library/blocks/spacer/editor.css |
308 B | 0 B |
build/block-library/blocks/spacer/style-rtl.css |
48 B | 0 B |
build/block-library/blocks/spacer/style.css |
48 B | 0 B |
build/block-library/blocks/table/editor-rtl.css |
478 B | 0 B |
build/block-library/blocks/table/editor.css |
478 B | 0 B |
build/block-library/blocks/table/style-rtl.css |
485 B | 0 B |
build/block-library/blocks/table/style.css |
485 B | 0 B |
build/block-library/blocks/tag-cloud/editor-rtl.css |
118 B | 0 B |
build/block-library/blocks/tag-cloud/editor.css |
118 B | 0 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
94 B | 0 B |
build/block-library/blocks/tag-cloud/style.css |
94 B | 0 B |
build/block-library/blocks/template-part/editor-rtl.css |
551 B | 0 B |
build/block-library/blocks/template-part/editor.css |
550 B | 0 B |
build/block-library/blocks/term-description/editor-rtl.css |
90 B | 0 B |
build/block-library/blocks/term-description/editor.css |
90 B | 0 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B | 0 B |
build/block-library/blocks/text-columns/editor.css |
95 B | 0 B |
build/block-library/blocks/text-columns/style-rtl.css |
166 B | 0 B |
build/block-library/blocks/text-columns/style.css |
166 B | 0 B |
build/block-library/blocks/verse/style-rtl.css |
87 B | 0 B |
build/block-library/blocks/verse/style.css |
87 B | 0 B |
build/block-library/blocks/video/editor-rtl.css |
569 B | 0 B |
build/block-library/blocks/video/editor.css |
570 B | 0 B |
build/block-library/blocks/video/style-rtl.css |
169 B | 0 B |
build/block-library/blocks/video/style.css |
169 B | 0 B |
build/block-library/common-rtl.css |
1.31 kB | 0 B |
build/block-library/common.css |
1.31 kB | 0 B |
build/block-library/reset-rtl.css |
506 B | 0 B |
build/block-library/reset.css |
507 B | 0 B |
build/block-library/style-rtl.css |
9.54 kB | 0 B |
build/block-library/style.css |
9.55 kB | 0 B |
build/block-library/theme-rtl.css |
692 B | 0 B |
build/block-library/theme.css |
693 B | 0 B |
build/block-serialization-default-parser/index.js |
1.3 kB | 0 B |
build/block-serialization-spec-parser/index.js |
3.06 kB | 0 B |
build/compose/index.js |
9.96 kB | 0 B |
build/customize-widgets/index.js |
5.78 kB | 0 B |
build/customize-widgets/style-rtl.css |
666 B | 0 B |
build/customize-widgets/style.css |
667 B | 0 B |
build/data-controls/index.js |
830 B | 0 B |
build/dom-ready/index.js |
576 B | 0 B |
build/dom/index.js |
4.61 kB | 0 B |
build/edit-post/classic-rtl.css |
454 B | 0 B |
build/edit-post/classic.css |
454 B | 0 B |
build/edit-post/style-rtl.css |
6.98 kB | 0 B |
build/edit-post/style.css |
6.97 kB | 0 B |
build/edit-site/style-rtl.css |
4.9 kB | 0 B |
build/edit-site/style.css |
4.89 kB | 0 B |
build/edit-widgets/index.js |
13.1 kB | 0 B |
build/edit-widgets/style-rtl.css |
2.98 kB | 0 B |
build/edit-widgets/style.css |
2.98 kB | 0 B |
build/editor/style-rtl.css |
3.9 kB | 0 B |
build/editor/style.css |
3.9 kB | 0 B |
build/escape-html/index.js |
739 B | 0 B |
build/format-library/style-rtl.css |
637 B | 0 B |
build/format-library/style.css |
639 B | 0 B |
build/hooks/index.js |
1.76 kB | 0 B |
build/html-entities/index.js |
628 B | 0 B |
build/i18n/index.js |
3.73 kB | 0 B |
build/is-shallow-equal/index.js |
710 B | 0 B |
build/keycodes/index.js |
1.43 kB | 0 B |
build/list-reusable-blocks/style-rtl.css |
629 B | 0 B |
build/list-reusable-blocks/style.css |
628 B | 0 B |
build/nux/index.js |
2.3 kB | 0 B |
build/nux/style-rtl.css |
718 B | 0 B |
build/nux/style.css |
716 B | 0 B |
build/priority-queue/index.js |
791 B | 0 B |
build/reusable-blocks/style-rtl.css |
225 B | 0 B |
build/reusable-blocks/style.css |
225 B | 0 B |
build/server-side-render/index.js |
1.64 kB | 0 B |
build/shortcode/index.js |
1.68 kB | 0 B |
build/url/index.js |
1.95 kB | 0 B |
build/wordcount/index.js |
1.24 kB | 0 B |
I'm testing inside the columns and the focus behavior feels a little weird. It felt weird at first that it shows the placeholders when it isn't focused. I think the reasoning behind it is that we want it to be visible when someone is working on other blocks, but mutable when they are working on the nav. What was weird to me was that when the column is focused, the placeholders go away. Here's a video where I first click on the nav to make the placeholders disappear, then select the column. I would expect the placeholders to appear when the column is selected, since I would be adding blocks adjacent to the nav instead of inside the nav. Screen.Recording.2021-04-30.at.10.24.36.AM.movIs that the intended behavior? |
Yeah that's a good thought. When I built this, it was intended, but the shift as you demonstrate, isn't that useful after all. Let me take another look, and thank you for the review |
jasmussen commentedApr 30, 2021
Description
Fixes #31352.
This PR does a number of things:
Placeholder
component so we can style according to container widths1 was the key bit missing. The
Placeholder
component comes with a "resizeobserver" and assignsis-small
,is-medium
andis-large
classes based on the width of the block. This allows us to stack the setup state in very small contexts.2 and 3 are side-effects of general refactor efforts to remove an "on-select jump", which is better described in #31198 which this PR also replaces. While this onselect thing didn't need to be fixed in this PR, it touched the same code anyway, and made sense to me to include since I was refactoring for various container widths.
4 was the key one. The setup state could be very broken in constrained contexts, for example inside a columns block. This PR fixes that:
5 rephases the "Existing menu" button to instead say "Add existing menu":
Existing menus are created in the separate Navigation screen (both the legacy and the new block-based one). The clarification can hopefully help suggest that the existing menu is meant as a starting point, because there isn't actually a two-way connection between the two. In other words, if you add an existing menu to your navigation block, and later add new menu items on the menu screen, those will not show up in the Navigation block.
How has this been tested?
Please test the navigation block in its setup state. Both the horizontal and vertical versions:
I'm still thinking about whether the skeleton indicators are a good idea at all, and that's something to ponder. But for now they work reasonably well, and most of all they share metrics of the theme now.
Checklist:
*.native.js
files for terms that need renaming or removal).