Fix padding/margin visualizer accuracy #44485
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
talldan
added
[Type] Bug
talldan
added
the
Backport to WP 6.7 Beta/RC
|
While testing this, I noticed that other elements reflowing around the selected block can also cause the visualizer to display incorrectly. I mostly noticed this because I'd hacked the visualizer to display permanently so that I could get screenshots. It's probably not something that's going to be noticeable in actual usage because the visualizer only shows very briefly, but it could still be worth looking at whether a simple fix is feasible (maybe using a resize observer). |
|
Size Change: +3 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
michalczaplinski
pushed a commit
that referenced
this pull request
Oct 3, 2022
michalczaplinski
removed
the
Backport to WP 6.7 Beta/RC
|
Cherry-picked for the 6.1 release in #44656 |
ockham
pushed a commit
that referenced
this pull request
Oct 4, 2022
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #44335
As noted in #44335, sometimes the padding/margin visualizers aren't displaying correctly.
Why?
From what I can tell, this is due to a discrepancy between the
BlockPopoveranchor and its inner<div>'s width and height values.The anchor uses
popoverDimensionsRecomputeCounterto update its dimension. The inner<div>does not, and that can lead to the div having outdated width/height values at times.How?
Uses
popoverDimensionsRecomputeCounterfor the inner<div>as well.Testing Instructions
Note that this can be a little tricky to test without the fix in #44484. It might be worth cherry picking that commit onto a separate branch when testing.
Screenshots or screencast
Before
After