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

Post Featured Image: Fix borders after addition of overlay feature #44286

Merged

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Sep 20, 2022

Fixes: #44262

Related:

What?

Fixes:

  • Application of theme.json or global styles supplied borders to the new overlay element
  • Application of border classes and styles for the overlay when configured at individual block level
  • Disjoint between the markup rendered for the overlay in the editor vs the frontend

Why?

Allows border radius to be applied to Post Featured Image blocks using overlays.

How?

  • Adds the block's overlay classname to the border block supports feature-level selectors meaning the theme.json/global styles target that as well as the inner image.
  • Updates the generation of the overlay markup to apply border classes and styles
  • Applies same logic as server-side render callback to only render overlay in the editor when appropriate
  • Adds border classes to the overlay in the editor the same as it gets on the frontend
  • Added a couple of fallback styles via :where to provide solid border style as that isn't officially supported on Post Featured Image blocks.

Testing Instructions

  1. Before checking out this PR, open the editor, add a Post Featured image block, apply an overlay to it and save
  2. Update your theme.json to style Post Featured Image blocks with a border radius or set one via Global Styles > Blocks > Post Featured Image > Layout > Border radius.
  3. View your post on the front end. You should see that the overlay element does not have a border radius applied to it.
  4. Back in the editor attempt to provide custom borders on the individual block. Note these won't be applied correctly to the overlay on the frontend.
  5. Clear the block level border configuration and save.
  6. Check out this PR, reload the frontend and the overlay should now have the border styles in your theme.json or global styles.
  7. In the editor attempt to configuration custom borders again for the individual block and ensure they are applied correctly.

Example theme.json snippet:

			"core/post-featured-image": {
				"border": {
					"radius": {
						"topLeft": "5rem",
						"bottomRight": "5rem"
					},
					"color": "cyan",
					"width": "1.5em"
				}
			},

Screenshots or screencast

Screen.Recording.2022-09-21.at.2.28.41.pm.mp4

@aaronrobertshaw aaronrobertshaw 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 [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Block] Post Featured Image Affects the Post Featured Image Block labels Sep 20, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this Sep 20, 2022
Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

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

Thanks for this! Works well for me 🎉

Overlay was being rendered in editor regardless of if there should be one and it didn't have border classes applied to the overlay.
@aaronrobertshaw aaronrobertshaw changed the title Post Featured Image: Apply theme.json border styles to overlay as well as img Post Featured Image: Fix borders after addition of overlay feature Sep 21, 2022
@github-actions
Copy link

github-actions bot commented Sep 21, 2022

Size Change: +104 B (0%)

Total Size: 1.26 MB

Filename Size Change
build/block-directory/index.min.js 7.08 kB +26 B (0%)
build/block-editor/index.min.js 163 kB +419 B (0%)
build/block-editor/style-rtl.css 15.4 kB +1 B (0%)
build/block-editor/style.css 15.4 kB +4 B (0%)
build/block-library/blocks/post-featured-image/editor-rtl.css 534 B -13 B (-2%)
build/block-library/blocks/post-featured-image/editor.css 532 B -13 B (-2%)
build/block-library/editor-rtl.css 11 kB -14 B (0%)
build/block-library/editor.css 11 kB -15 B (0%)
build/block-library/index.min.js 190 kB +153 B (0%)
build/components/index.min.js 198 kB -25 B (0%)
build/customize-widgets/style-rtl.css 1.38 kB +5 B (0%)
build/customize-widgets/style.css 1.38 kB +5 B (0%)
build/edit-post/index.min.js 30.8 kB +26 B (0%)
build/edit-site/index.min.js 57.6 kB -379 B (-1%)
build/editor/index.min.js 41.6 kB -25 B (0%)
build/editor/style-rtl.css 3.62 kB -39 B (-1%)
build/editor/style.css 3.61 kB -41 B (-1%)
build/keycodes/index.min.js 1.83 kB +23 B (+1%)
build/style-engine/index.min.js 1.45 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 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 65 B
build/block-library/blocks/archives/style.css 65 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 126 B
build/block-library/blocks/audio/theme.css 126 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 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 482 B
build/block-library/blocks/button/editor.css 482 B
build/block-library/blocks/button/style-rtl.css 523 B
build/block-library/blocks/button/style.css 523 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 103 B
build/block-library/blocks/code/style.css 103 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 187 B
build/block-library/blocks/comment-template/style.css 185 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 834 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 630 B
build/block-library/blocks/cover/editor-rtl.css 605 B
build/block-library/blocks/cover/editor.css 607 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.55 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 126 B
build/block-library/blocks/embed/theme.css 126 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 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 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 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 337 B
build/block-library/blocks/group/editor.css 337 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 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 876 B
build/block-library/blocks/image/editor.css 873 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 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 463 B
build/block-library/blocks/latest-posts/style.css 462 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 705 B
build/block-library/blocks/navigation-link/editor.css 703 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 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation-submenu/view.min.js 423 B
build/block-library/blocks/navigation/editor-rtl.css 1.99 kB
build/block-library/blocks/navigation/editor.css 2 kB
build/block-library/blocks/navigation/style-rtl.css 2.17 kB
build/block-library/blocks/navigation/style.css 2.16 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 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/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 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 260 B
build/block-library/blocks/paragraph/style.css 260 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 493 B
build/block-library/blocks/post-comments-form/style.css 493 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 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/style-rtl.css 315 B
build/block-library/blocks/post-featured-image/style.css 315 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 73 B
build/block-library/blocks/post-terms/style.css 73 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 282 B
build/block-library/blocks/query-pagination/style.css 278 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 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 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 202 B
build/block-library/blocks/rss/editor.css 204 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 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 488 B
build/block-library/blocks/site-logo/editor.css 488 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 84 B
build/block-library/blocks/site-title/editor.css 84 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 322 B
build/block-library/blocks/spacer/editor.css 322 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 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 190 B
build/block-library/blocks/table/theme.css 190 B
build/block-library/blocks/tag-cloud/style-rtl.css 239 B
build/block-library/blocks/tag-cloud/style.css 239 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 561 B
build/block-library/blocks/video/editor.css 563 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/common-rtl.css 1.02 kB
build/block-library/common.css 1.02 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.2 kB
build/block-library/style.css 12.2 kB
build/block-library/theme-rtl.css 719 B
build/block-library/theme.css 722 B
build/block-serialization-default-parser/index.min.js 1.1 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 49.8 kB
build/components/style-rtl.css 11.4 kB
build/components/style.css 11.5 kB
build/compose/index.min.js 12.5 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.08 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.7 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 4 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/style-rtl.css 6.94 kB
build/edit-post/style.css 6.94 kB
build/edit-site/style-rtl.css 8.36 kB
build/edit-site/style.css 8.34 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.34 kB
build/edit-widgets/style.css 4.34 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 6.76 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/list-reusable-blocks/index.min.js 1.74 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 953 B
build/nux/index.min.js 2.05 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.3 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 1.58 kB
build/react-i18n/index.min.js 696 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.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.53 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.18 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@aaronrobertshaw
Copy link
Contributor Author

I've increased the scope of this PR from fixing only the theme.json/global styles handling of borders for the Post Featured Image block's overlay to also fixing the individual block classes and styles, ensuring the editor markup is as close as possible to the frontend, and adding some default border style fallbacks.

It could do with some extra testing if you have the time @mikachan 🙏

Copy link
Member

@mikachan mikachan 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 looking good! I like how you're conditionally showing the overlay based on dimRatio in overlay.js.

I just have one inline question.

packages/block-library/src/post-featured-image/style.scss Outdated Show resolved Hide resolved
@mikachan mikachan 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 Sep 21, 2022
This would need a border-width: 0 as well to avoid the border it adds. Doing so would mean multiple edits required at the Global Styles level worsening UX. Setting the style via theme.json comes with further edge cases as well.
@@ -6,87 +6,85 @@
backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
}

&.wp-block-post-featured-image {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

While doing some further testing around this block's styles I noticed that were duplicating the block's class selector here. Removing it didn't appear to impact the block visually in either editor and inspecting via devtools still showed all the same styles applied.

As a result, I've cleaned these styles up. Including reducing the specificity on the button that also didn't need it.

Copy link
Member

Choose a reason for hiding this comment

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

This tests well for me, I can also see no difference in the block's styles in either editor 👍

@ndiego ndiego added Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta and removed Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Sep 26, 2022
Copy link
Contributor

@andrewserong andrewserong 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 testing nicely for me, too, and the code change looks good 👍. I noticed one issue that's unrelated to this change (also appears to be present on trunk). In the editor view running TwentyTwentyTwo, when I set a border at the individual block level, it appears that the solid rule isn't sticking in the editor, but is on the site frontend. The effect is that with a dimRatio set, it looks like the border is transparent in the editor, but solid on the frontend (or to be more specific, on the site frontend the width of the image does not expand to overlap with the border):

image

Since that issue is also present on trunk, I don't think it's a blocker to landing this PR — we can always look into that separately.

Other than that, with this change applied, it looks like all the border settings are being applied correctly in global styles and at the individual block level as far as I can tell. LGTM!

@aaronrobertshaw
Copy link
Contributor Author

Thanks for the review and thorough testing as always @andrewserong, appreciate it 👍

Unfortunately, I haven't been able to replicate the issue you reported. Either on trunk or this PR branch. I've tried not only the main TwentyTwentyTwo theme but also its variants. I can't seem to achieve the transparent border at all in the editor.

As suggested, I'll merge this PR to get the fixes in. If you can provide further details on how I can replicate the problem, I'll happily fix it in a follow-up.

Screen.Recording.2022-09-27.at.6.15.39.pm.mp4

@aaronrobertshaw aaronrobertshaw merged commit 5e8a1be into trunk Sep 27, 2022
@aaronrobertshaw aaronrobertshaw deleted the fix/post-featured-image-theme-json-overlay-borders branch September 27, 2022 08:31
@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 27, 2022
@andrewserong
Copy link
Contributor

Good idea merging this one in first, and thanks for testing the issue 👍

The closest I can seem to get for reproduction instructions is that I'm running WordPress 6.0.2 in my local environment, and I can see the following two rules being applied to the img element from core's common.css file:

image

Because they're using the border: shorthand, I believe they wind up overriding the where() rule for border-style: solid? If I disable these rules in the editor, then the transparent border problem goes away:

image

The thing that has me stumped, though, is why this issue only appears to be happening in my environment, and not yours 🤔

@aaronrobertshaw
Copy link
Contributor Author

The thing that has me stumped, though, is why this issue only appears to be happening in my environment, and not yours

Thanks for retesting and confirming the issue @andrewserong 👍

I'd forgotten that Global Styles were saved per theme so when flicking between themes trying to test this, I didn't realise I already had styles for the Post Featured Image block. After resetting Global Styles for TwentyTwentyTwo and all its variants, I could replicate the issue.

A fix is up in #44520

@andrewserong
Copy link
Contributor

Excellent, thanks for the quick follow-up! 🙇

@michalczaplinski michalczaplinski 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 Oct 3, 2022
@michalczaplinski
Copy link
Contributor

Cherry-picked for the 6.1 release in #44656

pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Oct 4, 2022
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54383 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Oct 4, 2022
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54383


git-svn-id: http://core.svn.wordpress.org/trunk@53942 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to gilzow/wordpress-performance that referenced this pull request Oct 4, 2022
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54383


git-svn-id: https://core.svn.wordpress.org/trunk@53942 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54383 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Featured Image Affects the Post Featured Image Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi 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.

Border radius is not applied to overlay element
6 participants