search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.46k stars 4.18k forks source link

Block toolbar weird shift with beta 6.7 #65872

Open simom opened 2 weeks ago

simom commented 2 weeks ago

Description

While testing the new WordPress 6.7 beta with our plugin, I noticed a strange shift in the block toolbar that did not occur in version 6.6.x.

All the elements inside the block that are generated in the “edit area positions” are absolutely positioned, so there is no width/height change to the block.

I saw in the Gutenberg repo that the block-popover has been updated with some new calculation methods, so perhaps there is a new restriction for elements inside a block when the toolbar is visible. (possibly related to https://github.com/WordPress/gutenberg/commit/dec82e2dffda718feff8607d0205d2483d2de4be)

I understand this isn’t a bug related to a core block.

Step-by-step reproduction instructions

  1. Install the free Advanced Columns plugin from the WordPress.org repository
  2. Add the block to the page
  3. Switch the column mode to “Grid.”
  4. With the block selected, click on “Edit Area Positions” in the block toolbar

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/62904ca0-09ba-4a8d-be10-4c773ee4ea16

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

ndiego commented 1 week ago

@simom I tried installing the Advanced Columns Block and got the following critical error: 

Warning: Undefined array key "queries" in /var/www/html/wp-content/plugins/advanced-columns-block/includes/Settings/migrations/migrations.php on line 15
simom commented 1 week ago

@ndiego Thanks! We’ve just released an update with a fix. You should be able to test it now with version 1.3.1.

ndiego commented 1 week ago

You should be able to test it now with version 1.3.1.

That worked, thanks. I am able to replicate the issue, but it appears to be something that could be fixed in the block itself.

It looks like the shift is being triggered by inset: 0 on the .ac-draggables div.

https://github.com/user-attachments/assets/11586b09-eb9e-4787-bb8f-c606fe876c8b

So, while something might have changed in 6.7 related to how the popover position is calculated since it looks like this can be resolved directly in the plugin, I'm going to remove it from the 6.7 project board.

simom commented 1 week ago

@ndiego Yes, I noticed that while debugging. However, the inset cannot be removed, as the element would lose its dimensions. I’ve already tested using width: 100% and height: 100% with top: 0 and left: 0, but the same issue occurs.

Also, I’d like to point out that an absolutely positioned element, which doesn’t alter the box model, shouldn’t affect the toolbar calculation in any way. This issue wasn’t present in version 6.6 or earlier.

simom commented 3 days ago

@ndiego After further investigation, the issue appears to be related to the fact that the new popover function calculates the size and position of the inner elements without considering their actual CSS positioning. If an element is set to position: absolute, it should not affect the position of the toolbar.