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

Style Book: Move iframe to root of content area to support styles that overflow block previews #48664

Merged

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Mar 2, 2023

What?

Fixes: #48392

Alternative to #48470, this PR looks at moving the iframe for the Style Book up to the root of the content area, and uses editor context / block list at the example level, so that the styles affect and are displayed across the whole content area of the Style Book rather than just within each particular block example.

Why?

Styles need to affect an area beyond just their preview — the idea in this PR is that (hopefully) we can get the styles to affect the entire content area so that it more closely resembles the layout of the editor.

How?

  • Add an iframe at the root of the content area of the style book
  • Add some hard-coded styles to pass to that iframe along with editor styles
  • At the individual example level, use a block editor context provider and block list for rendering the block previews
  • Reset button styles and then include hard-coded rules for the button element, copying/pasting rules from the Button component as needed (e.g. focus styles)

Note / caveat: because of lifting the iframe up to the root of the content area, I had to set the iframe to tabIndex=0 so that the buttons within it could be tabbed to. This seems to work pretty well, but means that the iframe itself now sits within the tab sequence of the style book. Happy for any suggestions on how to improve this.

Testing Instructions

  1. Open the Style Book and select Button under Design.
  2. Adjust the Shadow settings for the Button block, and note that with this PR applied, the bigger shadows should still be visible outside of the area of the block example.
  3. Double-check that other styles are appearing correctly, too, e.g. set the Image block to have a Duotone value set. The Duotone styling should be visible in the Style Book, too.
  4. Try with a variety of themes with custom fonts, etc — check that the styling looks correct in the Style Book / matches trunk, and that the block headings still match the styling in Gutenberg

For code review: double-check whether or not I've included all the bits required from the block previews over to the examples here.

Testing Instructions for Keyboard

  1. Open the Style Book within global styles.
  2. From this point tab to the examples within the Style Book content area. You should be able to tab between / press Enter to select any of the previews as on trunk. The main difference is that the iframe container area is now in the tab sequence. Again, happy for any ideas on how to improve this / skip the iframe in the tab sequence!

Screenshots or screencast

Button block with a large shadow applied in a site with a gradient set as the site's background color:

image

@andrewserong andrewserong self-assigned this Mar 2, 2023
@andrewserong andrewserong added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Mar 2, 2023
@github-actions
Copy link

github-actions bot commented Mar 2, 2023

Size Change: +3.16 kB (0%)

Total Size: 1.34 MB

Filename Size Change
build/block-editor/index.min.js 197 kB +1.07 kB (+1%)
build/block-editor/style-rtl.css 14.4 kB +10 B (0%)
build/block-editor/style.css 14.4 kB +8 B (0%)
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB -1 B (0%)
build/block-library/blocks/navigation/editor.css 2.14 kB -1 B (0%)
build/block-library/blocks/page-list/editor-rtl.css 401 B +25 B (+7%) 🔍
build/block-library/blocks/page-list/editor.css 401 B +25 B (+7%) 🔍
build/block-library/editor-rtl.css 11.6 kB +1 B (0%)
build/block-library/editor.css 11.6 kB +1 B (0%)
build/block-library/index.min.js 201 kB +236 B (0%)
build/blocks/index.min.js 51 kB +12 B (0%)
build/components/index.min.js 208 kB +553 B (0%)
build/components/style-rtl.css 11.6 kB -12 B (0%)
build/components/style.css 11.7 kB -12 B (0%)
build/compose/index.min.js 12.4 kB +21 B (0%)
build/customize-widgets/index.min.js 12.2 kB +6 B (0%)
build/edit-post/index.min.js 34.8 kB +8 B (0%)
build/edit-site/index.min.js 65 kB +1.06 kB (+2%)
build/edit-site/style-rtl.css 9.97 kB -31 B (0%)
build/edit-site/style.css 9.96 kB -30 B (0%)
build/edit-widgets/index.min.js 17.3 kB +4 B (0%)
build/format-library/index.min.js 7.26 kB -9 B (0%)
build/rich-text/index.min.js 11 kB +174 B (+2%)
build/url/index.min.js 3.74 kB +44 B (+1%)
build/widgets/index.min.js 7.3 kB -10 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.11 kB
build/block-editor/content.css 4.1 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 91 B
build/block-library/blocks/avatar/style.css 91 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 265 B
build/block-library/blocks/file/style.css 265 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 830 B
build/block-library/blocks/image/editor.css 829 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 501 B
build/block-library/blocks/post-comments-form/style.css 501 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 134 B
build/block-library/blocks/post-excerpt/style.css 134 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 318 B
build/block-library/blocks/post-featured-image/style.css 318 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 463 B
build/block-library/blocks/query/editor.css 463 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 489 B
build/block-library/blocks/site-logo/editor.css 489 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 404 B
build/block-library/blocks/template-part/editor.css 404 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.7 kB
build/block-library/style.css 12.7 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/core-data/index.min.js 16.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.58 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.72 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/style-rtl.css 7.53 kB
build/edit-post/style.css 7.52 kB
build/edit-widgets/style-rtl.css 4.55 kB
build/edit-widgets/style.css 4.55 kB
build/editor/index.min.js 45.7 kB
build/editor/style-rtl.css 3.54 kB
build/editor/style.css 3.53 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 937 B
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.53 kB
build/token-list/index.min.js 650 B
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Mar 2, 2023

Flaky tests detected in f1a2c35.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4359383899
📝 Reported issues:

@andrewserong
Copy link
Contributor Author

@joedolson just adding you as a reviewer for this one, too, as we've been looking at accessibility aspects of the Style Book lately. This PR seeks to swap the button for a div due to dealing with styling of the block preview that appears within the button (so that we can avoid button styles bleeding into / affecting the style previews). I think I've mostly got the button behaviour working now, but keen for any feedback if there are improvements to be made here 🙂

@andrewserong andrewserong changed the title Style Book: Try moving iframe to root of content area Style Book: Move iframe to root of content area to support styles that overflow block previews Mar 3, 2023
@tellthemachines
Copy link
Contributor

A quick test shows this working well to solve the box-shadow problem! It's also loading the stylebook noticeably faster than on trunk 🎉

Swap the button element used for a div to avoid button styling from affecting the preview

Is it just the default UA styles we're trying to avoid? I wonder if it would be easier to do something like all: unset on the button element instead.

If we do go the div route, we'll also need a handler for the Space key.

I'll do a proper review next week, but this is definitely looking like the way to go!

@jasmussen
Copy link
Contributor

Thanks for tackling this one, it feels like a much better solution. 🙏

From the visuals it looks right.

Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working really well in my testing. Button shadows now looking exactly as expected. I also confirmed that the duotone filter is working as expected on images:

2023-03-03 09 28 13

I tested two themes with more interesting fonts, Sassify and Tortoise. Both showed their fonts in the style book as expected and I saw no difference between trunk and this branch.

Sassify
sassify

Tortoise
Screenshot 2023-03-03 at 9 32 26 AM

I didn't check the code, but looks like @kevin940726 is giving that a look over.

@joedolson
Copy link
Contributor

The div replacement for a button mostly works, though the spacebar isn't handled as mentioned above. I'll also note that space and enter shouldn't be handled the same way - space should be handled on keyup, and enter on keydown to match native behavior.

I'm not totally clear on why this was necessary, however; why were button styles bleeding between those blocks and the button? The button block creates an a href="" pattern, not a button, so I don't understand why that would bleed.

I'm reluctant to embrace using a faux button unless we really have to, and right now I don't see the reasoning. It'll need to be thoroughly tested on all standard screen reader/browser/os combinations, since there can be a lot of variation in how they handle custom events.

@andrewserong
Copy link
Contributor Author

Update: the suggestion from @tellthemachines of using all: unset worked nicely! I've updated the CSS so it sets that, and then there's another couple of rules for applying the styling that we do want to include for the buttons. I copied over the CSS from the Button components to provide focus styles. It's testing well for me locally now across Safari, FF, Chrome, and Edge, but let me know if anyone runs into any issues with it. Overall, this feels much nicer than trying to turn a div into a button 👍

I've also updated the e2e tests based on the suggestions from @kevin940726, so this PR should be ready for another review now 🙂

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code's looking pretty good to me, aside from one minor comment below!

Testing on Chrome, Firefox and Safari on macOS didn't reveal any issues ✅

It's also pretty exciting that theme gradient and pattern backgrounds now work seamlessly! E.g. this is the Pilgrimage TT3 variation on trunk:
Screenshot 2023-03-06 at 4 37 48 pm

vs this branch:

Screenshot 2023-03-06 at 4 37 28 pm

Note how on trunk the dots only appear in a little window around each block. It's looking much better with this change!

background: none;
border-radius: 2px;
border: none;
color: inherit;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't need to set background and border to none, or color to inherit here because we've already unset everything above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, good catch, I'll tighten these up 👍

@andrewserong
Copy link
Contributor Author

Thanks again @tellthemachines and @kevin940726, I've removed the unneeded button styles resets already covered by all: unset and updated the e2e test I missed 😄

Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't look into the code, but the testing changes look good to me 👍 .

@andrewserong andrewserong added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 6, 2023
@andrewserong
Copy link
Contributor Author

andrewserong commented Mar 6, 2023

I'm wrapping up for the day now, but just added the backport to WP Beta/RC label in case folks are hoping to get this in for the next beta/RC.

Copy link
Member

@madhusudhand madhusudhand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tests very well!
Verified with various themes and shadow definitions. It doesn't show any issues. 🚢

@andrewserong
Copy link
Contributor Author

Update: based on the suggestion from @ntsekouras (#48664 (comment)) I've swapped out the button element again, this time using Composite and CompositeItem which are internally using Composite from reakit. I've followed the performance suggestion in the docs there to add an id attribute on the CompositeItem, too.

This appears to give us the best of both worlds in that we avoid the invalid HTML of rendering buttons within buttons (since 3rd party blocks are likely to contain them), while also getting the keyboard behaviour from Composite which allows using up/down keys to move through the list of previews. From manually testing, it also appears to come with the right enter/space key behaviour as well. There's also some consistency here in that the block patterns list uses Composite here.

I'm not too sure if I've gotten the role values right on Composite / CompositeItem — for the latter I've left it as button, but I see that other usage of Composite in Gutenberg uses listbox, which doesn't quite feel right for this use case, as users aren't really selecting an option from a list? Happy for feedback / ideas on what makes most sense here! CC: @joedolson as you mentioned concerns with the accessibility of using div elements that have the behaviour of buttons.

On balance, I think Composite sounds preferable to either a simple button element (since it doesn't support the nested content we need for previews) or a div element (since we'd have to write our own handling to make sure it behaves correctly).

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's still working well for me!

A quick test with VoiceOver yielded the same results as trunk, but it might be good to test on Windows too if anyone has the setup for it. What I'm unsure about is to what extent having a div with a button role is any better than having an actual button, especially as regards its possible interactive content. I strongly suspect none of these changes will make things any worse than they already are on trunk though 😅

className={ classnames( 'edit-site-style-book__example', {
'is-selected': isSelected,
} ) }
id={ id }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the id being used for anything?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep! It's a little weird, but I followed the suggestions from the reakit docs here that recommend it as a performance enhancement when using CompositeItem components when you're concerned about performance. I figured since we're dealing with previews and we want to avoid re-renders where we can, it'd be a good one to include. It's the first time I've used it, though, so very happy for feedback if I've missed anything 😄

@andrewserong
Copy link
Contributor Author

I've done a couple of tiny updates, thanks to suggestions from @Mamaduka. Also, I've included an aria-hidden on the preview div, as that was one piece of the block preview component I'd forgotten to add in.

I think this is in a good shape to land now, and it's an improvement over what we have in trunk as @tellthemachines mentions. If there aren't any objections, I'll aim to merge this PR in tomorrow my time, but feel free to merge @Mamaduka or @ntsekouras if this looks okay and if it makes the backporting process easier to have it in sooner.

Thanks again for all the reviews and feedback, everybody! 🙇

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @andrewserong, this looks good! It would be good to see if we can find a better solution for the extra iframe tab stop, but for now this is an improvement against trunk.

@ntsekouras ntsekouras merged commit 8a81086 into trunk Mar 8, 2023
@ntsekouras ntsekouras deleted the update/style-book-to-use-iframe-at-root-of-style-book-content branch March 8, 2023 07:53
@github-actions github-actions bot added this to the Gutenberg 15.4 milestone Mar 8, 2023
Mamaduka pushed a commit that referenced this pull request Mar 9, 2023
…t overflow block previews (#48664)

* Style Book: Try moving iframe to root of content area

* Try to match styles inside the iframe to the existing text styles from Gutenberg

* Restore margin rules to prevent vertical margins on previews from affecting the height of the preview

* Fix svg filters, attempt to fix tabbing behaviour

* Add Enter key handling, button role, update e2e tests

* Tidy hard-coded styling rules

* Switch back to button element, add additional focus styles, update e2e tests

* Remove unneeded CSS rules

* Update e2e test

* Improve caching of blocks

* Try swapping out button element for Composite and CompositeItem

* Update id key, remove unnecessary memo call
@Mamaduka
Copy link
Member

Mamaduka commented Mar 9, 2023

I just cherry-picked this PR to the wp/6.2 branch to get it included in the next release: 3082500

@Mamaduka Mamaduka removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Style Book: Box shadow is cut off
9 participants