search

tomusborne / generateblocks

GenerateBlocks is a small collection of lightweight WordPress blocks that can accomplish nearly anything.
https://generateblocks.com
194 stars 19 forks source link

Padding/borders not represented correctly in editor due to css box-sizing inconsistencies #1064

Closed eastriverstudio closed 1 year ago

eastriverstudio commented 1 year ago

I've noticed that padding or border spacing is not always represented in the editor correctly versus the frontend. This is because on the frontend GB/GP sets box-sizing: border-box; on blocks. However in the editor this is not the case and certain blocks like the headline have the default box-sizing, so setting padding or border does not match what you see on the frontend.

So we can get the most accurate preview I think all GB blocks need to match the frontend output and have box-sizing: border-box;explicitly set like the gb-container does, unless there's a specific editor reason for not doing that on those blocks?

Also, maybe there's an opportunity here with the borders control panel coming in 1.8.0 that we could have the option to set the box-sizing attribute on elements to our liking. So maybe the default is border-box to match the expected output, but we have the option to change it if needed?

Thanks

tomusborne commented 1 year ago

Duplicate of https://github.com/tomusborne/generateblocks/issues/760

I think since GP adds border-box to the frontend it should likely be the one to add it to the editor as well. Will do some testing.

Thanks!