When editing Styles > Layout or Block > * > Dimensions, every possible (and unnecessary) global setting is copied to custom styles

[Andrew-Starr]

Description

In the site editor, when making changes in Styles > Layout, it looks like every possible core block style and setting is copied and saved in the custom styles (wp_global_styles).

This results in a ton of unnecessary global styles and settings, such as default colors and default font sizes, even in a theme that has defined settings.color.defaultPalette as false for example.

As far as I can tell the only styles option that triggers this are the options in Styles > Layout.
I've tried other options such as Typography, Colors, and individual block settings, and they all seem to work as expected in that the only thing saved in the custom styles is the option being edited.

Possible related issues:
#53199
#52200
#51390
WordPress/create-block-theme#388

Step-by-step reproduction instructions

1. Go to site editor with any block theme active
2. Reset styles to default so we have empty global styles and save
3. Make changes to any of the Layout > Dimensions settings: content, wide, padding, or block spacing and save
4. Check the 'wp_global_styles' post_type in the posts table for the active theme, and notice how much is in there, including loads of unnecessary stuff
5. Reset styles back to default and save
6. Make changes to any other styles options (not layout) and check 'wp_global_styles', and notice how the data is correct, and only contains those edits that you have made.

Screenshots, screen recording, code snippet

No response

Environment info

Twenty Twenty-Three theme
WP 6.3
Latest Gutenberg - issue present with both Gutenberg active and not active
No other plugins

Rolling back to WP 6.2.2 fixes the issue

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Andrew-Starr]

Some further information that I hope will explain the issue.

After some more testing it seems this is not restricted to global Styles > Layout. The issue also appears when making changes in the Dimensions panel of any block that supports dimensions (padding, margin, block spacing).

Empty/default/reset global styles:

{
    "version": 2,
    "isGlobalStylesUserThemeJSON": true
}

Edit Typography > Text > Font Size and Colors > Background:

{
    "styles": {
        "typography": {
            "fontSize": "var:preset|font-size|large"
        },
        "color": {
            "background": "var:preset|color|tertiary"
        }
    },
    "isGlobalStylesUserThemeJSON": true,
    "version": 2
}

As above but with edited Layout > Dimensions > Block Spacing.
Should be saved like this:

{
    "styles": {
        "typography": {
            "fontSize": "var:preset|font-size|large"
        },
        "color": {
            "background": "var:preset|color|tertiary"
        },
        "spacing": {
            "blockGap": "2rem"
        }
    },
    "isGlobalStylesUserThemeJSON": true,
    "version": 2
}

But instead it is saved like this:

{
    "styles": {
        "typography": {
            "fontSize": "var(--wp--preset--font-size--large)"
        },
        "color": {
            "background": "var(--wp--preset--color--tertiary)"
        },
        "spacing": {
            "blockGap": "2rem"
        }
    },
    "settings": {
        "useRootPaddingAwareAlignments": true,
        "border": {
            "color": true,
            "radius": true,
            "style": true,
            "width": true
        },
        "shadow": {
            "presets": {
                "default": [
                    {
                        "name": "Natural",
                        "slug": "natural",
                        "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)"
                    },
                    {
                        "name": "Deep",
                        "slug": "deep",
                        "shadow": "12px 12px 50px rgba(0, 0, 0, 0.4)"
                    },
                    {
                        "name": "Sharp",
                        "slug": "sharp",
                        "shadow": "6px 6px 0px rgba(0, 0, 0, 0.2)"
                    },
                    {
                        "name": "Outlined",
                        "slug": "outlined",
                        "shadow": "6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)"
                    },
                    {
                        "name": "Crisp",
                        "slug": "crisp",
                        "shadow": "6px 6px 0px rgba(0, 0, 0, 1)"
                    }
                ]
            },
            "defaultPresets": true
        },
        "color": {
            "background": true,
            "button": true,
            "caption": true,
            "custom": true,
            "customDuotone": true,
            "customGradient": true,
            "defaultDuotone": true,
            "defaultGradients": true,
            "defaultPalette": true,
            "duotone": {
                "default": [
                    {
                        "name": "Dark grayscale",
                        "colors": [
                            "#000000",
                            "#7f7f7f"
                        ],
                        "slug": "dark-grayscale"
                    },
                    {
                        "name": "Grayscale",
                        "colors": [
                            "#000000",
                            "#ffffff"
                        ],
                        "slug": "grayscale"
                    },
                    {
                        "name": "Purple and yellow",
                        "colors": [
                            "#8c00b7",
                            "#fcff41"
                        ],
                        "slug": "purple-yellow"
                    },
                    {
                        "name": "Blue and red",
                        "colors": [
                            "#000097",
                            "#ff4747"
                        ],
                        "slug": "blue-red"
                    },
                    {
                        "name": "Midnight",
                        "colors": [
                            "#000000",
                            "#00a5ff"
                        ],
                        "slug": "midnight"
                    },
                    {
                        "name": "Magenta and yellow",
                        "colors": [
                            "#c7005a",
                            "#fff278"
                        ],
                        "slug": "magenta-yellow"
                    },
                    {
                        "name": "Purple and green",
                        "colors": [
                            "#a60072",
                            "#67ff66"
                        ],
                        "slug": "purple-green"
                    },
                    {
                        "name": "Blue and orange",
                        "colors": [
                            "#1900d8",
                            "#ffa96b"
                        ],
                        "slug": "blue-orange"
                    }
                ]
            },
            "gradients": {
                "default": [
                    {
                        "name": "Vivid cyan blue to vivid purple",
                        "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
                        "slug": "vivid-cyan-blue-to-vivid-purple"
                    },
                    {
                        "name": "Light green cyan to vivid green cyan",
                        "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
                        "slug": "light-green-cyan-to-vivid-green-cyan"
                    },
                    {
                        "name": "Luminous vivid amber to luminous vivid orange",
                        "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
                        "slug": "luminous-vivid-amber-to-luminous-vivid-orange"
                    },
                    {
                        "name": "Luminous vivid orange to vivid red",
                        "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
                        "slug": "luminous-vivid-orange-to-vivid-red"
                    },
                    {
                        "name": "Very light gray to cyan bluish gray",
                        "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
                        "slug": "very-light-gray-to-cyan-bluish-gray"
                    },
                    {
                        "name": "Cool to warm spectrum",
                        "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
                        "slug": "cool-to-warm-spectrum"
                    },
                    {
                        "name": "Blush light purple",
                        "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
                        "slug": "blush-light-purple"
                    },
                    {
                        "name": "Blush bordeaux",
                        "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
                        "slug": "blush-bordeaux"
                    },
                    {
                        "name": "Luminous dusk",
                        "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
                        "slug": "luminous-dusk"
                    },
                    {
                        "name": "Pale ocean",
                        "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
                        "slug": "pale-ocean"
                    },
                    {
                        "name": "Electric grass",
                        "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
                        "slug": "electric-grass"
                    },
                    {
                        "name": "Midnight",
                        "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
                        "slug": "midnight"
                    }
                ]
            },
            "heading": true,
            "link": true,
            "palette": {
                "default": [
                    {
                        "name": "Black",
                        "slug": "black",
                        "color": "#000000"
                    },
                    {
                        "name": "Cyan bluish gray",
                        "slug": "cyan-bluish-gray",
                        "color": "#abb8c3"
                    },
                    {
                        "name": "White",
                        "slug": "white",
                        "color": "#ffffff"
                    },
                    {
                        "name": "Pale pink",
                        "slug": "pale-pink",
                        "color": "#f78da7"
                    },
                    {
                        "name": "Vivid red",
                        "slug": "vivid-red",
                        "color": "#cf2e2e"
                    },
                    {
                        "name": "Luminous vivid orange",
                        "slug": "luminous-vivid-orange",
                        "color": "#ff6900"
                    },
                    {
                        "name": "Luminous vivid amber",
                        "slug": "luminous-vivid-amber",
                        "color": "#fcb900"
                    },
                    {
                        "name": "Light green cyan",
                        "slug": "light-green-cyan",
                        "color": "#7bdcb5"
                    },
                    {
                        "name": "Vivid green cyan",
                        "slug": "vivid-green-cyan",
                        "color": "#00d084"
                    },
                    {
                        "name": "Pale cyan blue",
                        "slug": "pale-cyan-blue",
                        "color": "#8ed1fc"
                    },
                    {
                        "name": "Vivid cyan blue",
                        "slug": "vivid-cyan-blue",
                        "color": "#0693e3"
                    },
                    {
                        "name": "Vivid purple",
                        "slug": "vivid-purple",
                        "color": "#9b51e0"
                    }
                ],
                "theme": [
                    {
                        "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"
                    }
                ]
            },
            "text": true
        },
        "dimensions": {
            "minHeight": true
        },
        "layout": {
            "contentSize": "650px",
            "wideSize": "1200px"
        },
        "position": {
            "sticky": true
        },
        "spacing": {
            "customSpacingSize": true,
            "spacingSizes": {
                "theme": [
                    {
                        "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"
                    }
                ]
            },
            "spacingScale": {
                "operator": "*",
                "increment": 1.5,
                "steps": 0,
                "mediumStep": 1.5,
                "unit": "rem"
            },
            "blockGap": true,
            "margin": true,
            "padding": true,
            "units": [
                "%",
                "px",
                "em",
                "rem",
                "vh",
                "vw"
            ]
        },
        "typography": {
            "fluid": true,
            "customFontSize": true,
            "fontFamilies": {
                "theme": [
                    {
                        "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": {
                "default": [
                    {
                        "name": "Small",
                        "slug": "small",
                        "size": "13px"
                    },
                    {
                        "name": "Medium",
                        "slug": "medium",
                        "size": "20px"
                    },
                    {
                        "name": "Large",
                        "slug": "large",
                        "size": "36px"
                    },
                    {
                        "name": "Extra Large",
                        "slug": "x-large",
                        "size": "42px"
                    }
                ],
                "theme": [
                    {
                        "fluid": {
                            "min": "0.875rem",
                            "max": "1rem"
                        },
                        "size": "1rem",
                        "slug": "small",
                        "name": "Small"
                    },
                    {
                        "fluid": {
                            "min": "1rem",
                            "max": "1.125rem"
                        },
                        "size": "1.125rem",
                        "slug": "medium",
                        "name": "Medium"
                    },
                    {
                        "fluid": {
                            "min": "1.75rem",
                            "max": "1.875rem"
                        },
                        "size": "1.75rem",
                        "slug": "large",
                        "name": "Large"
                    },
                    {
                        "fluid": false,
                        "size": "2.25rem",
                        "slug": "x-large",
                        "name": "Extra Large"
                    },
                    {
                        "fluid": {
                            "min": "4rem",
                            "max": "10rem"
                        },
                        "size": "10rem",
                        "slug": "xx-large"
                    }
                ]
            },
            "fontStyle": true,
            "fontWeight": true,
            "letterSpacing": true,
            "lineHeight": true,
            "textDecoration": true,
            "textTransform": true
        }
    },
    "isGlobalStylesUserThemeJSON": true,
    "version": 2
}

[Andrew-Starr]

The issue is still present in WP 6.3.1 with or without Gutenberg active.

I have been attempting to track down where this bug was introduced.

Gutenberg 15.4.0 - is OK, no issue
Gutenberg 15.5.0 - unable to fully test due to error, see #49465
Gutenberg 15.5.1 - this bug is present

Without Gutenberg:
WP 6.2.2 - is OK, no issue
WP 6.3 - this bug is present

So it looks like something was changed in the Gutenberg 15.5.0 release (possible that 15.5.1 introduced the error when fixing the other error in 15.5.0?)

The bug in Gutenberg 15.5+ then made its way into WP core 6.3.

I have attempted to understand where in the code this bug was introduced, but without any luck so far.
If by any chance anyone who worked on the dimensions panel in 15.5 happens to read this, please, please, please could you check this and let us know how this error is happening?

When exporting child themes using either the plugin or the core exporter, this bug is causing all sorts of issues, with the potential for many more unanticipated issues.

At the moment the only options we have are to:

• rollback to WP 6.2.2 (or make sure to disable auto updates and don't ever update to 6.3)
• remember to never edit anything in Styles > Layout, or Block > * > Dimensions
• if accidently do any of the above, then fully reset the global styles back to default, and make sure never to repeat steps 1 or 2

[Andrew-Starr]

Hi @jordesign

When you added the labels, how/where is this done?
I cannot seem to find where to select/add labels when writing an issue.
Thanks.

[jordesign]

Hey @Andrew-Starr - the adding of labels is something that members of the Gutenberg Triage Team have access to do when they look over issues - so it's not something you'll need to worry about 👍