Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use the EditorSkeleton component to layout the widgets screen #20431

Merged
merged 3 commits into from Feb 25, 2020

Conversation

@youknowriad
Copy link
Contributor

youknowriad commented Feb 25, 2020

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.

@youknowriad youknowriad requested a review from ellatrix as a code owner Feb 25, 2020
@youknowriad youknowriad self-assigned this Feb 25, 2020
youknowriad referenced this pull request Feb 25, 2020
…g out of the content (#19726)
@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Feb 25, 2020

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 youknowriad force-pushed the update/use-editor-skeleton-widgets-screen branch from f57e821 to 06bbecf Feb 25, 2020
@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 25, 2020

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

@youknowriad youknowriad force-pushed the update/use-editor-skeleton-widgets-screen branch from df8e9a5 to 235dc43 Feb 25, 2020
@ockham
ockham approved these changes Feb 25, 2020
Copy link
Contributor

ockham left a comment

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

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 25, 2020

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

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 25, 2020

Looks like there's some valid e2e tests breakage.

</SlotFillProvider>
<>
<BlockEditorKeyboardShortcuts.Register />
<SlotFillProvider>

This comment has been minimized.

Copy link
@gziolo

gziolo Feb 25, 2020

Member

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

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 25, 2020

Author Contributor

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.

This comment has been minimized.

Copy link
@gziolo

gziolo Feb 25, 2020

Member

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

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

This comment has been minimized.

Copy link
@gziolo

gziolo Feb 25, 2020

Member

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

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 25, 2020

Author Contributor

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

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

.block-editor-editor-skeleton__sidebar {

This comment has been minimized.

Copy link
@gziolo

gziolo Feb 25, 2020

Member

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

@gziolo

This comment has been minimized.

Copy link
Member

gziolo commented Feb 25, 2020

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 youknowriad merged commit dd462d3 into master Feb 25, 2020
3 checks passed
3 checks passed
build
Details
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@youknowriad youknowriad deleted the update/use-editor-skeleton-widgets-screen branch Feb 25, 2020
@github-actions github-actions bot added this to the Gutenberg 7.7 milestone Feb 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.