Use CSS for spacing #601
Use CSS for spacing #601
Conversation
|
I'm not sure I like this approach. The current Custom Block Margin extension in combination with the default spacing system in WordPress works really well. Have you tried it? This seems like more code and unnecessary wrapper classes to solve the exact same issue. That being said; I'm open for moving to CSS if the new setup actually solves the same issues and supports the same containers. A couple of things:
|
stian-overasen
requested review from
a team,
luistinygod,
olethomas and
peroks
| <!-- wp:template-part {"slug":"header","area":"header","tagName":"header","className":"header-wrapper"} /--> | ||
| <!-- wp:post-content {"tagName":"main","align":"full","layout":{"type":"constrained"}} /--> | ||
| <!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"className":"content-wrapper"} --> | ||
| <main class="wp-block-group content-wrapper"> |
There was a problem hiding this comment.
Very unnecessary to wrap Post Content. You should target .is-layout-flow instead of .wp-block-group/.wp-block-post-content. There are a few additional container, like Media & Text, Columns, Factbox, Accordion Content etc, that also needs this that already have is-layout-flow in place.
| "radius": "unset" | ||
| } | ||
| }, | ||
| "core/buttons": { |
There was a problem hiding this comment.
Please note that this is horizontal gap between buttons, not vertical block margin.
| }, | ||
| "core/columns": { | ||
| "spacing": { | ||
| "blockGap": "var(--wp--preset--spacing--50)" |
There was a problem hiding this comment.
This is horizontal gap between columns. Not related to the vertical block margins.
This pull request introduces a major refactor to the block theme’s layout and spacing system. The changes focus on standardizing layout wrappers, centralizing layout-related CSS, and overhauling the spacing configuration for better consistency and maintainability. Additionally, some legacy or redundant features have been removed to streamline the theme.
Layout and Structure Improvements:
layout.cssfile with comprehensive layout rules and imported it into the main config and view styles, centralizing layout logic for easier maintenance. (packages/themes/block-theme/src/config/layout.css,packages/themes/block-theme/src/config/_index.css,packages/themes/block-theme/src/view.css) [1] [2] [3]404.html,index.html,search.html,singular.html) to use a standardizedcontent-wrapperclass, improving layout consistency across pages. (packages/themes/block-theme/templates/404.html,packages/themes/block-theme/templates/index.html,packages/themes/block-theme/templates/search.html,packages/themes/block-theme/templates/singular.html) [1] [2] [3] [4]Spacing System Overhaul:
clamp()for responsive design, providing fine-grained control over spacing throughout the theme. (packages/themes/block-theme/theme.json)packages/themes/block-theme/theme.json) [1] [2]packages/themes/block-theme/theme.json)Feature Cleanup:
custom-block-marginfeature from the theme’s feature registry and configuration, as its functionality is now handled by the new layout and spacing system. (packages/themes/block-theme/t2.json) [1] [2]Why?
Frontend should be solved with frontend, having a tool created with backend components seems very redundant when CSS is the superior choice when it comes to tweaking on something as fundamental as the layout spacing. The suggested CSS file is clean, easy to understand and makes sure you are 100% in control, no unfortunate margins here and there. The designers have put effort and thought into the UX and how it should visually be presented, if we miss this then the whole flow of readability and the total end result of the site will appear poorly.