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

Code Block: Add box-sizing to fix inconsistent layout #44580

Merged
merged 1 commit into from
Sep 29, 2022
Merged

Code Block: Add box-sizing to fix inconsistent layout #44580

merged 1 commit into from
Sep 29, 2022

Conversation

ndiego
Copy link
Member

@ndiego ndiego commented Sep 29, 2022

Related to: #43465

What?

This PR adds box-sizing: border-box; to the Code block style.css file.

Why?

When padding is applied to the Code block, the block extends beyond the defined content width due to no box-sizing: border-box;. This PR fixes that to ensure consistency across core blocks. See screenshots for details.

Since standardizing design tools was a big part of 6.1, I think it makes sense to backport this minor bug fix.

How?

Add box-sizing: border-box; to the Code block style.css file.

Testing Instructions

  1. Using the TT2 theme, add a code block (note there is another COde block issue in TT3, so use TT2 for this)
  2. Add some ample padding.
  3. Notice that the Code block remains contained within the content width, unlike before.

Screenshots or screencast

Before:

image

After:

image

@ndiego ndiego added [Type] Bug An existing feature does not function as intended [Block] Code Affects the Code Block Backport to WP 6.6 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Sep 29, 2022
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 have also tested it on TT3 and it appears to be working as expected.

TT2 on trunk

before

TT2 on this branch

after

TT3 on trunk

tt3_before_1

TT3 on this branch

tt3_after

@ndiego
Copy link
Member Author

ndiego commented Sep 29, 2022

Thannks for testing @t-hamano 🚢ing

@ndiego ndiego merged commit 1af59ce into WordPress:trunk Sep 29, 2022
@ndiego ndiego deleted the fix/code-block-box-sizing branch September 29, 2022 15:39
@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 @michalczaplinski
Add box-sizing. (#44580)
2159bbb
@michalczaplinski michalczaplinski mentioned this pull request Oct 3, 2022
Merged
@michalczaplinski michalczaplinski removed the Backport to WP 6.6 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 @ockham
Add box-sizing. (#44580)
03b241a
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
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

@andrewserong andrewserong Awaiting requested review from andrewserong

@aaronrobertshaw aaronrobertshaw Awaiting requested review from aaronrobertshaw

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@carolinan carolinan Awaiting requested review from carolinan

Assignees
No one assigned
Labels
[Block] Code Affects the Code Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [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.

None yet
3 participants
@ndiego @michalczaplinski @t-hamano