search

tomusborne / generatepress

452 stars 89 forks source link

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

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

eastriverstudio commented 1 year ago

Sorry realised I opened this in the wrong place, it relates to GB so opening there instead.