Use the EditorSkeleton component to layout the widgets screen #20431

youknowriad · 2020-02-25T09:04:07Z

The only way to ensure this component is generic enough is to actually use it in multiple screens.
This PR does it for the edit-widgets, we need to follow-up on the edit-site as well.

…g out of the content (#19726)

github-actions · 2020-02-25T09:08:46Z

Size Change: -442 B (0%)

Total Size: 864 kB

Filename	Size	Change
`build/block-editor/index.js`	104 kB	+137 B (0%)
`build/block-editor/style-rtl.css`	10.3 kB	-30 B (0%)
`build/block-editor/style.css`	10.3 kB	-31 B (0%)
`build/edit-post/index.js`	90.9 kB	+8 B (0%)
`build/edit-post/style-rtl.css`	8.59 kB	-93 B (1%)
`build/edit-post/style.css`	8.58 kB	-89 B (1%)
`build/edit-widgets/index.js`	4.43 kB	+70 B (1%)
`build/edit-widgets/style-rtl.css`	2.59 kB	-207 B (7%)	✅
`build/edit-widgets/style.css`	2.58 kB	-207 B (8%)	✅

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1 kB	0 B
`build/annotations/index.js`	3.43 kB	0 B
`build/api-fetch/index.js`	3.39 kB	0 B
`build/autop/index.js`	2.58 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/index.js`	6.02 kB	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	760 B	0 B
`build/block-library/editor-rtl.css`	7.67 kB	0 B
`build/block-library/editor.css`	7.67 kB	0 B
`build/block-library/index.js`	116 kB	0 B
`build/block-library/style-rtl.css`	7.49 kB	0 B
`build/block-library/style.css`	7.49 kB	0 B
`build/block-library/theme-rtl.css`	669 B	0 B
`build/block-library/theme.css`	671 B	0 B
`build/block-serialization-default-parser/index.js`	1.65 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	57.6 kB	0 B
`build/components/index.js`	190 kB	0 B
`build/components/style-rtl.css`	15.5 kB	0 B
`build/components/style.css`	15.5 kB	0 B
`build/compose/index.js`	5.76 kB	0 B
`build/core-data/index.js`	10.5 kB	0 B
`build/data-controls/index.js`	1.03 kB	0 B
`build/data/index.js`	8.22 kB	0 B
`build/date/index.js`	5.37 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.06 kB	0 B
`build/edit-site/index.js`	4.59 kB	0 B
`build/edit-site/style-rtl.css`	2.77 kB	0 B
`build/edit-site/style.css`	2.76 kB	0 B
`build/editor/editor-styles-rtl.css`	325 B	0 B
`build/editor/editor-styles.css`	327 B	0 B
`build/editor/index.js`	44.6 kB	0 B
`build/editor/style-rtl.css`	4.01 kB	0 B
`build/editor/style.css`	4 kB	0 B
`build/element/index.js`	4.45 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.6 kB	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	1.92 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	3.45 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.3 kB	0 B
`build/keycodes/index.js`	1.68 kB	0 B
`build/list-reusable-blocks/index.js`	2.99 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	4.85 kB	0 B
`build/notices/index.js`	1.57 kB	0 B
`build/nux/index.js`	3.02 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.54 kB	0 B
`build/primitives/index.js`	1.49 kB	0 B
`build/priority-queue/index.js`	879 B	0 B
`build/redux-routine/index.js`	2.84 kB	0 B
`build/rich-text/index.js`	14.3 kB	0 B
`build/server-side-render/index.js`	2.54 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	4 kB	0 B
`build/viewport/index.js`	1.61 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

youknowriad · 2020-02-25T09:44:18Z

@gziolo I think I fixed the behavior introduced in #19726 and I also fixed the publish sidebar toggle which was broken in master too.

ockham

Working fine in my testing! Thanks for this @youknowriad (and sorry for not doing it myself -- I had a local branch lying around, but styling was pretty broken 😅 )

youknowriad · 2020-02-25T10:15:34Z

Yes, the styling was not easy to get right because of those updates that were made to the sidebar of the Skeleton styles.

youknowriad · 2020-02-25T10:16:34Z

Looks like there's some valid e2e tests breakage.

gziolo · 2020-02-25T11:11:06Z

packages/edit-widgets/src/components/layout/index.js

-		</SlotFillProvider>
+		<>
+			<BlockEditorKeyboardShortcuts.Register />
+			<SlotFillProvider>


Is there any valid reason why all the wrapping components aren't included in EditorSkeleton?

No particular reason. Initially the component was more about the layout of the page, that said, this is an interesting idea. Makes me wonder if it's EditorSkeleton or just another component.

Good call, it might be a better fit as a wrapper component. It all depends really :)

gziolo · 2020-02-25T11:12:00Z

packages/edit-widgets/src/components/layout/index.js

+							sidebar={ <Sidebar /> }
+							content={
+								<>
+									<Notices />


Shouldn't EditorSkeleton be also more opinionated about the placement of the Notices component?

I believe the answer is the same #20431 (comment)

gziolo · 2020-02-25T11:14:51Z

packages/block-editor/src/components/editor-skeleton/style.scss

@@ -75,26 +74,6 @@ html.block-editor-editor-skeleton__html-container {
 }

 .block-editor-editor-skeleton__sidebar {


I support the idea of removing the CSS responsible for the different behavior on smaller screens that make it look like an overlay 👍

gziolo · 2020-02-25T11:17:36Z

It looks like one of the failing tests has something to do with the removed CSS code for smaller screens:

https://travis-ci.com/WordPress/gutenberg/jobs/290859611#L876

Using Plugins API › Sidebar › Medium screen › Should open plugins sidebar using More Menu item and render content
877
878    TypeError: Cannot read property 'click' of undefined
879
880      at _callee$ (../e2e-test-utils/build/@wordpress/e2e-test-utils/src/click-on-more-menu-item.js:16:8)
881      at tryCatch (../../node_modules/regenerator-runtime/runtime.js:45:40)
882      at Generator.invoke [as _invoke] (../../node_modules/regenerator-runtime/runtime.js:271:22)
883      at Generator.prototype.<computed> [as next] (../../node_modules/regenerator-runtime/runtime.js:97:21)
884      at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
885      at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
886          at runMicrotasks (<anonymous>)

youknowriad requested a review from ellatrix as a code owner February 25, 2020 09:04

youknowriad self-assigned this Feb 25, 2020

youknowriad requested review from jorgefilipecosta, gziolo and ockham February 25, 2020 09:04

youknowriad referenced this pull request Feb 25, 2020

Accessibility: Show open button when the sidebar is closed and tabbin…

2193ce9

…g out of the content (#19726)

Use the EditorSkeleton component to layout the widgets screen

06bbecf

youknowriad force-pushed the update/use-editor-skeleton-widgets-screen branch from f57e821 to 06bbecf Compare February 25, 2020 09:09

Fix open sidebar and open publish toggle

235dc43

youknowriad force-pushed the update/use-editor-skeleton-widgets-screen branch from df8e9a5 to 235dc43 Compare February 25, 2020 09:50

ockham approved these changes Feb 25, 2020

View reviewed changes

gziolo reviewed Feb 25, 2020

View reviewed changes

Hide sidebar and footer on mobile to avoid region navigation trap

2a343e5

youknowriad merged commit dd462d3 into master Feb 25, 2020

youknowriad deleted the update/use-editor-skeleton-widgets-screen branch February 25, 2020 15:00

github-actions bot added this to the Gutenberg 7.7 milestone Feb 25, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use the EditorSkeleton component to layout the widgets screen #20431

Use the EditorSkeleton component to layout the widgets screen #20431

youknowriad commented Feb 25, 2020

github-actions bot commented Feb 25, 2020 •

edited

Loading

youknowriad commented Feb 25, 2020

ockham left a comment

youknowriad commented Feb 25, 2020

youknowriad commented Feb 25, 2020

gziolo Feb 25, 2020

youknowriad Feb 25, 2020

gziolo Feb 25, 2020

gziolo Feb 25, 2020

youknowriad Feb 25, 2020

gziolo Feb 25, 2020

gziolo commented Feb 25, 2020

		@@ -75,26 +74,6 @@ html.block-editor-editor-skeleton__html-container {
		}

		.block-editor-editor-skeleton__sidebar {

Use the EditorSkeleton component to layout the widgets screen #20431

Use the EditorSkeleton component to layout the widgets screen #20431

Conversation

youknowriad commented Feb 25, 2020

github-actions bot commented Feb 25, 2020 • edited Loading

youknowriad commented Feb 25, 2020

ockham left a comment

Choose a reason for hiding this comment

youknowriad commented Feb 25, 2020

youknowriad commented Feb 25, 2020

gziolo Feb 25, 2020

Choose a reason for hiding this comment

youknowriad Feb 25, 2020

Choose a reason for hiding this comment

gziolo Feb 25, 2020

Choose a reason for hiding this comment

gziolo Feb 25, 2020

Choose a reason for hiding this comment

youknowriad Feb 25, 2020

Choose a reason for hiding this comment

gziolo Feb 25, 2020

Choose a reason for hiding this comment

gziolo commented Feb 25, 2020

github-actions bot commented Feb 25, 2020 •

edited

Loading