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.

Sign up for GitHub

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

Jump to bottom

Remove border from Global Styles previews #44556

Merged
merged 3 commits into from
Sep 29, 2022
Merged

Remove border from Global Styles previews #44556

merged 3 commits into from
Sep 29, 2022

Conversation

ndiego
Copy link
Member

@ndiego ndiego commented Sep 29, 2022

Fixes #44515

What?

This PR removes any potential site border from Global Styles preview by resetting it to none.

Why?

The Whisper style variation in the Twenty Twenty-Three (TT3) theme includes site border. In testing TT3, it was discovered that this border was also showing up in the Global Styles previews resulting in a scrollbar (#44515). Site border is a common style choice, but the presence of the border breaks the layout of the Global Styles previews. As noted here, simply removing the border from the previews is the most direct solution.

How?

Following a similar approach used in #43601, the border is set to none in the Global Style preview panels.

Testing Instructions

  1. Use the TT3 theme
  2. Navigate to the Site Editor
  3. Open the Global Styles panel
  4. Click on Browse Styles and notice that the Whisper variation no longer has a border

Screenshots or screencast

Before
image

After
image

@ndiego ndiego added [Type] Bug An existing feature does not function as intended Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Sep 29, 2022
@ndiego ndiego mentioned this pull request Sep 29, 2022
Closed
t-hamano
t-hamano approved these changes Sep 29, 2022
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM 👍
I agree with the change, but would like to hear from the design and theme teams.

packages/edit-site/src/components/global-styles/preview.js Outdated Show resolved Hide resolved
carolinan
carolinan approved these changes Sep 29, 2022
View reviewed changes
Copy link
Contributor

@carolinan carolinan left a comment

Choose a reason for hiding this comment

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

Since this is the second update / removal, are there any other styles we need to test and remove at the same time?

@ndiego @t-hamano
Add missing semicolon
d108824 
Co-authored-by: Aki Hamano <[email protected]>
@ndiego
Copy link
Member Author

ndiego commented Sep 29, 2022

Since this is the second update / removal, are there any other styles we need to test and remove at the same time?

Off the top of my head, I don't think any other styles would be commonly added that impact the previews. Padding is an obvious one, but that's already accounted for. I'm going to go ahead and ship this so at the very least #44515 is resolved for the next Beta.

@ndiego ndiego merged commit 3ae203c into WordPress:trunk Sep 29, 2022
@ndiego ndiego deleted the fix/remove-border-in-global-styles-preview branch September 29, 2022 13:18
@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 29, 2022
michalczaplinski pushed a commit that referenced this pull request Oct 3, 2022
@ndiego @t-hamano @michalczaplinski
Remove border from Global Styles previews (#44556)
14d6500 
* Remove border from global styles preview.

* Fix spacing.

* Add missing semicolon

Co-authored-by: Aki Hamano <[email protected]>

Co-authored-by: Aki Hamano <[email protected]>
@michalczaplinski michalczaplinski mentioned this pull request Oct 3, 2022
Merged
@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

ockham pushed a commit that referenced this pull request Oct 4, 2022
@ndiego @t-hamano @ockham
Remove border from Global Styles previews (#44556)
a5cdf33 
* Remove border from global styles preview.

* Fix spacing.

* Add missing semicolon

Co-authored-by: Aki Hamano <[email protected]>

Co-authored-by: Aki Hamano <[email protected]>
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Oct 4, 2022
@dream-encode
Editor: Update packages for 6.1 Beta 3.
306d934 
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
@dream-encode
Editor: Update packages for 6.1 Beta 3.
4de88db 
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
@dream-encode
Editor: Update packages for 6.1 Beta 3.
4737a6e 
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
This was referenced Oct 19, 2022
Closed
Closed
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
@dream-encode
Editor: Update packages for 6.1 Beta 3.
a25b067 
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
Reviewers

@t-hamano t-hamano t-hamano approved these changes

@carolinan carolinan carolinan approved these changes

@talldan talldan Awaiting requested review from talldan

@annezazu annezazu Awaiting requested review from annezazu

Assignees
No one assigned
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
WordPress 6.1 Editor Tasks
Status: Done
Milestone
Gutenberg 14.3
Development

Successfully merging this pull request may close these issues.

TT3 Style Variations show a scrollbar for one variation
4 participants
@ndiego @michalczaplinski @carolinan @t-hamano