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. That’s thanks to padding-aware alignments which is a new opt-in feature in theme.json. 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. Here, the container places the controls in the top-bottom fashion. 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. Say for example Top to Bottom radio button option arranges the control to fill the height the container and moves to the next column.
0 kommentar(er)
