no way to set root padding to 0px
-
I am trying to set the top padding to 0px at root level but no way to do it . Here is the dimensions part in my theme.json:
"spacingSizes": [ { "size": "clamp(0rem, 0vw, 0rem)", "slug": "0", "name": "0" }, (.....more stuff...) } "styles": { (other stuff...) "spacing": { "blockGap": "1.5rem", "padding": { "top": "var(--wp--preset--spacing--0)", "right": "var(--wp--preset--spacing--30)", "bottom": "var(--wp--preset--spacing--40)", "left": "var(--wp--preset--spacing--30)" }, "margin": { "top": "var(--wp--preset--spacing--0)", "right": "var(--wp--preset--spacing--30)", "bottom": "var(--wp--preset--spacing--40)", "left": "var(--wp--preset--spacing--30)" }But i get this code no matter what:
body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--system-font); font-size: var(--wp--preset--font-size--medium); line-height: 1.6; margin-top: var(--wp--preset--spacing--0); margin-right: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--40); margin-left: var(--wp--preset--spacing--30); --wp--style--root--padding-top: var(--wp--preset--spacing--40); --wp--style--root--padding-right: 20px; --wp--style--root--padding-bottom: var(--wp--preset--spacing--40); --wp--style--root--padding-left: 20px; }And from full site editor there is no way to select the 0 preset.
So , what is going on, why only margin top is getting updated with ” margin-top: var(–wp–preset–spacing–0);” and paddng top is being overriden by “–wp–style–root–padding-top: var(–wp–preset–spacing–40);” ?
If this is a joke i dont think is funny!
Here is the full theme.json
{ "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "customTemplates": [ { "name": "blank", "postTypes": [ "page", "post" ], "title": "Blank" }, { "name": "blog-alternative", "postTypes": [ "page" ], "title": "Blog (Alternative)" }, { "name": "404", "postTypes": [ "page" ], "title": "404" } ], "settings": { "appearanceTools": true, "color": { "palette": [ { "color": "#ffffff", "name": "Base", "slug": "base" }, { "color": "#000000", "name": "Contrast", "slug": "contrast" }, { "color": "#9DFF20", "name": "Primary", "slug": "primary" }, { "color": "#345C00", "name": "Secondary", "slug": "secondary" }, { "color": "#F6F6F6", "name": "Tertiary", "slug": "tertiary" } ] }, "layout": { "contentSize": "650px", "wideSize": "1200px" }, "spacing": { "spacingScale": { "operator": "+", "increment": 1, "steps": 7, "mediumStep": 1.5, "unit": "px" }, "spacingSizes": [ { "size": "clamp(0rem, 0vw, 0rem)", "slug": "0", "name": "0" }, { "size": "clamp(1.5rem, 5vw, 2rem)", "slug": "30", "name": "1" }, { "size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)", "slug": "40", "name": "2" }, { "size": "clamp(2.5rem, 8vw, 4.5rem)", "slug": "50", "name": "3" }, { "size": "clamp(3.75rem, 10vw, 7rem)", "slug": "60", "name": "4" }, { "size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)", "slug": "70", "name": "5" }, { "size": "clamp(7rem, 14vw, 11rem)", "slug": "80", "name": "6" } ], "units": [ "%", "px", "em", "rem", "vh", "vw" ] }, "typography": { "dropCap": false, "fluid": true, "fontFamilies": [ { "fontFace": [ { "fontFamily": "DM Sans", "fontStretch": "normal", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/dm-sans/DMSans-Regular.woff2" ] }, { "fontFamily": "DM Sans", "fontStretch": "normal", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./assets/fonts/dm-sans/DMSans-Regular-Italic.woff2" ] }, { "fontFamily": "DM Sans", "fontStretch": "normal", "fontStyle": "normal", "fontWeight": "700", "src": [ "file:./assets/fonts/dm-sans/DMSans-Bold.woff2" ] }, { "fontFamily": "DM Sans", "fontStretch": "normal", "fontStyle": "italic", "fontWeight": "700", "src": [ "file:./assets/fonts/dm-sans/DMSans-Bold-Italic.woff2" ] } ], "fontFamily": "\"DM Sans\", sans-serif", "name": "DM Sans", "slug": "dm-sans" }, { "fontFace": [ { "fontDisplay": "block", "fontFamily": "IBM Plex Mono", "fontStretch": "normal", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Light.woff2" ] }, { "fontDisplay": "block", "fontFamily": "IBM Plex Mono", "fontStretch": "normal", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2" ] }, { "fontDisplay": "block", "fontFamily": "IBM Plex Mono", "fontStretch": "normal", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2" ] }, { "fontDisplay": "block", "fontFamily": "IBM Plex Mono", "fontStretch": "normal", "fontStyle": "normal", "fontWeight": "700", "src": [ "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2" ] } ], "fontFamily": "'IBM Plex Mono', monospace", "name": "IBM Plex Mono", "slug": "ibm-plex-mono" }, { "fontFace": [ { "fontFamily": "Inter", "fontStretch": "normal", "fontStyle": "normal", "fontWeight": "200 900", "src": [ "file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf" ] } ], "fontFamily": "\"Inter\", sans-serif", "name": "Inter", "slug": "inter" }, { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFace": [ { "fontFamily": "Source Serif Pro", "fontStretch": "normal", "fontStyle": "normal", "fontWeight": "200 900", "src": [ "file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2" ] }, { "fontFamily": "Source Serif Pro", "fontStretch": "normal", "fontStyle": "italic", "fontWeight": "200 900", "src": [ "file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2" ] } ], "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "fluid": { "min": "0.875rem", "max": "1rem" }, "size": "1rem", "slug": "small" }, { "fluid": { "min": "1rem", "max": "1.125rem" }, "size": "1.125rem", "slug": "medium" }, { "fluid": { "min": "1.75rem", "max": "1.875rem" }, "size": "1.75rem", "slug": "large" }, { "fluid": false, "size": "2.25rem", "slug": "x-large" }, { "fluid": { "min": "4rem", "max": "10rem" }, "size": "10rem", "slug": "xx-large" } ] }, "useRootPaddingAwareAlignments": true }, "styles": { "blocks": { "core/navigation": { "elements": { "link": { ":hover": { "typography": { "textDecoration": "underline" } }, ":focus": { "typography": { "textDecoration": "underline dashed" } }, ":active": { "typography": { "textDecoration": "none" } }, "typography": { "textDecoration": "none" } } }, "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "core/post-author": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "core/post-content": { "elements": { "link": { "color": { "text": "var(--wp--preset--color--secondary)" } } } }, "core/post-excerpt": { "typography": { "fontSize": "var(--wp--preset--font-size--medium)" } }, "core/post-date": { "typography": { "fontSize": "var(--wp--preset--font-size--small)", "fontWeight": "400" }, "elements": { "link": { "typography": { "textDecoration": "none" }, ":hover": { "typography": { "textDecoration": "underline" } } } } }, "core/post-terms": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "core/post-title": { "spacing": { "margin": { "bottom": "1.25rem", "top": "1.25rem" } }, "typography": { "fontWeight": "400" }, "elements": { "link": { ":hover": { "typography": { "textDecoration": "underline" } }, ":focus": { "typography": { "textDecoration": "underline dashed" } }, ":active": { "color": { "text": "var(--wp--preset--color--secondary)" }, "typography": { "textDecoration": "none" } }, "typography": { "textDecoration": "none" } } } }, "core/comments-title":{ "typography": { "fontSize": "var(--wp--preset--font-size--large)" }, "spacing": { "margin": { "bottom": "var(--wp--preset--spacing--40)" } } }, "core/comment-author-name": { "elements": { "link": { ":hover": { "typography": { "textDecoration": "underline" } }, ":focus": { "typography": { "textDecoration": "underline dashed" } }, ":active": { "color": { "text": "var(--wp--preset--color--secondary)" }, "typography": { "textDecoration": "none" } }, "typography": { "textDecoration": "none" } } } }, "core/comment-date": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" }, "elements": { "link": { ":hover": { "typography": { "textDecoration": "underline" } }, ":focus": { "typography": { "textDecoration": "underline dashed" } }, ":active": { "color": { "text": "var(--wp--preset--color--secondary)" }, "typography": { "textDecoration": "none" } }, "typography": { "textDecoration": "none" } } } }, "core/comment-edit-link": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "core/comment-reply-link": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "core/comments-pagination": { "spacing": { "margin": { "top": "var(--wp--preset--spacing--40)" } }, "elements": { "link": { "typography": { "textDecoration": "none" } } } }, "core/pullquote": { "border": { "style": "solid", "width": "1px 0" }, "elements": { "cite": { "typography": { "fontSize": "var(--wp--preset--font-size--small)", "fontStyle": "normal", "textTransform": "none" } } }, "typography": { "lineHeight": "1.3" }, "spacing": { "margin": { "bottom": "var(--wp--preset--spacing--40) !important", "top": "var(--wp--preset--spacing--40) !important" } } }, "core/query": { "elements": { "h2": { "typography": { "fontSize": "var(--wp--preset--font-size--x-large)" } } } }, "core/query-pagination": { "typography": { "fontSize": "var(--wp--preset--font-size--small)", "fontWeight": "400" }, "elements": { "link": { "typography": { "textDecoration": "none" }, ":hover": { "typography": { "textDecoration": "underline" } } } } }, "core/quote": { "border": { "width": "1px" }, "elements": { "cite": { "typography": { "fontSize": "var(--wp--preset--font-size--small)", "fontStyle": "normal" } } }, "spacing": { "padding": { "left": "var(--wp--preset--spacing--30)", "right": "var(--wp--preset--spacing--30)" } } }, "core/site-title": { "elements": { "link": { ":hover": { "typography": { "textDecoration": "underline" } }, ":focus": { "typography": { "textDecoration": "underline dashed" } }, ":active": { "color": { "text": "var(--wp--preset--color--secondary)" }, "typography": { "textDecoration": "none" } }, "typography": { "textDecoration": "none" } } }, "typography": { "fontSize": "var(--wp--preset--font-size--medium)", "fontWeight": "normal", "lineHeight": "1.4" } } }, "color": { "background": "var(--wp--preset--color--base)", "text": "var(--wp--preset--color--contrast)" }, "elements": { "button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--contrast)" }, ":hover": { "color": { "background": "var(--wp--preset--color--contrast)", "text": "var(--wp--preset--color--base)" } }, ":focus": { "color": { "background": "var(--wp--preset--color--contrast)", "text": "var(--wp--preset--color--base)" } }, ":active": { "color": { "background": "var(--wp--preset--color--secondary)", "text": "var(--wp--preset--color--base)" } }, ":visited": { "color": { "text": "var(--wp--preset--color--contrast)" } } }, "h1": { "typography": { "fontSize": "3.625rem", "lineHeight": "1.2" } }, "h2": { "typography": { "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)", "lineHeight": "1.2" } }, "h3": { "typography": { "fontSize": "var(--wp--preset--font-size--x-large)" } }, "h4": { "typography": { "fontSize": "var(--wp--preset--font-size--large)" } }, "h5": { "typography": { "fontSize": "var(--wp--preset--font-size--medium)", "fontWeight": "700", "textTransform": "uppercase" } }, "h6": { "typography": { "fontSize": "var(--wp--preset--font-size--medium)", "textTransform": "uppercase" } }, "heading": { "typography": { "fontWeight": "400", "lineHeight": "1.4" } }, "link": { "color": { "text": "var(--wp--preset--color--contrast)" }, ":hover": { "typography": { "textDecoration": "none" } }, ":focus": { "typography": { "textDecoration": "underline dashed" } }, ":active": { "color": { "text": "var(--wp--preset--color--secondary)" }, "typography": { "textDecoration": "none" } }, "typography": { "textDecoration": "underline" } } }, "spacing": { "blockGap": "1.5rem", "padding": { "top": "var(--wp--preset--spacing--0)", "right": "var(--wp--preset--spacing--30)", "bottom": "var(--wp--preset--spacing--40)", "left": "var(--wp--preset--spacing--30)" }, "margin": { "top": "var(--wp--preset--spacing--0)", "right": "var(--wp--preset--spacing--30)", "bottom": "var(--wp--preset--spacing--40)", "left": "var(--wp--preset--spacing--30)" } }, "typography": { "fontFamily": "var(--wp--preset--font-family--system-font)", "fontSize": "var(--wp--preset--font-size--medium)", "lineHeight": "1.6" } }, "templateParts": [ { "area": "header", "name": "header", "title": "Header" }, { "area": "footer", "name": "footer", "title": "Footer" }, { "area": "uncategorized", "name": "comments", "title": "Comments" }, { "area": "uncategorized", "name": "post-meta", "title": "Post Meta" } ] }The page I need help with: [log in to see the link]
Viewing 6 replies - 1 through 6 (of 6 total)
-
How to change the top padding of the content area (
.wp-site-blocks) of a block theme such as Twenty-Twenty-Three- Site Editor > Inspector > Styles > Padding
- If the Padding values are shown combined, then click Unlink Sides (chain icon).
- If the Top padding is shown as the slider which lets you choose from presets (technically the
--wp--preset--spacing--XXCSS variables) then click Set custom sizes (slider icon). - Set to your desired value and unit such as
0px. Then you get a clean outcome in the CSS:--wp--style--root--padding-top: 0px;
@rpuig on https://ramonpuig.me/ (as of now 2023-03-06) you chose a rather quirky/hacky way:
- You left
--wp--style--root--padding-toppointing to the preset variablevar(--wp--preset--spacing--40); - and overrode that padding-preset (by which means?) to:
--wp--preset--spacing--40: 0.5px; - which a) breaks its semantic meaning, and b) may give unintended formatting if that preset is used elsewhere. Am not sure whether its scope is limited to the content area (
.wp-site-blocks)
https://ramonpuig.me/ on 2023-03-06: <div class="wp-site-blocks"> [...] .wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); [...] --wp--style--root--padding-top: var(--wp--preset--spacing--40); [...] --wp--preset--spacing--40: 0.5px;
Viewing 6 replies - 1 through 6 (of 6 total)
- The topic ‘no way to set root padding to 0px’ is closed to new replies.
