We’ve had the ability to set padding on the element in theme.json since the experimental Gutenberg plugin introduced it in version 11.7. We can override that behavior on a block-by-block basis with alignments, but we’ll get to that.Īgain, this isn’t new. The idea here is that any blocks nested in the layout respect the layout’s content width - which is a global setting - and do not flow outside of it. That gets us to another thing we get: constrained layouts. ![]() So, even if you have root-level padding, you can still allow, say, an image (or some other block) to break out and go full-width. Class Box declares a container with BoxLayout as its default layout manager and provides static methods to create a Box with a horizontal or vertical BoxLayout. That’s thanks to padding-aware alignments which is a new opt-in feature in theme.json. A layout manager that allows GUI components to be arranged left-to-right or top-to-bottom in a container. ![]() That’s nice because it ensures consistent spacing on an element that is shared on all pages and posts.īut there’s more to it because now we have a way for blocks to bypass that padding and align themselves full-width. What kind of spacing are we talking about?įirst off, we already have root-level padding which is a fancy way of describing padding on the element. Now that we have JSON-ified styles for the margins and padding of layout containers, that opens us up to more flexible and robust ways to define spacing in our theme layouts. WordPress 6.1 fixed those issues and what I want to do is look specifically at the latter. You can see how those were temporarily fixed in the TT2 style.css file rather than making it into the theme.json file. It’s not all the way there yet! If we look at the Twenty Twenty-Two (TT2) default theme, there were two main unresolved issues: styling interactions (like :hover, :active, :focus), and the margins and padding of layout containers. JSON files are machine-readable, which makes it consumable by the JavaScript-based Site Editor for configuring a theme’s global styles directly in WordPress. ![]() One of the main goals of the WordPress Site Editor (and, yes, that is now the “official” name) is to move basic block styling from CSS to structured JSON.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |