Andrew-Starr
commented
1 year ago 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
}
jordesign
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: https://github.com/WordPress/gutenberg/issues/53199 https://github.com/WordPress/gutenberg/issues/52200 https://github.com/WordPress/gutenberg/issues/51390 https://github.com/WordPress/create-block-theme/issues/388
Step-by-step reproduction instructions
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