hanneslsm
commented
1 year ago Looks like the name is also not correctly displayed.
Closed hanneslsm closed 8 months ago
hanneslsm
commented
1 year ago Looks like the name is also not correctly displayed.
t-hamano
commented
1 year ago Thanks for the report.
I have not been able to reproduce this problem with Twenty Twenty Three.
One thing I'm wondering is that the color palette shows the CSS variable, not the color code.
hanneslsm
commented
1 year ago it's a custom theme, here is the current theme.json:
{
"settings": {
"appearanceTools": true,
"blocks": {
"core/button": {
"appearanceTools": true,
"color": {
"background": true,
"custom": true,
"customDuotone": true,
"customGradient": true,
"duotone": [],
"gradients": [],
"palette": [
{
"color": "#FDFDFD",
"name": "Neutral 10 - BG",
"slug": "neutral-10"
},
{
"color": "#F5F5F5",
"name": "Neutral 20 - BG",
"slug": "neutral-20"
},
{
"color": "#F1F1F1",
"name": "Neutral 30 - UI BG",
"slug": "neutral-30"
},
{
"color": "#EBEBEB",
"name": "Neutral 40 - UI BG :hover / CTA BG :default",
"slug": "neutral-40"
},
{
"color": "#E2E2E2",
"name": "Neutral 50 - UI BG :active / CTA BG :hover",
"slug": "neutral-50"
},
{
"color": "#D6D6D6",
"name": "Neutral 60 - Border (static) / CTA BG :active",
"slug": "neutral-60"
},
{
"color": "#A6A6A6",
"name": "Neutral 70 - Border (interactive)",
"slug": "neutral-70"
},
{
"color": "#898989",
"name": "Neutral 80 - Border :hover",
"slug": "neutral-80"
},
{
"color": "#5D5E60",
"name": "Neutral 90 - UI BG",
"slug": "neutral-90"
},
{
"color": "#525252",
"name": "Neutral 100 - UI BG :hover",
"slug": "neutral-100"
},
{
"color": "#404040",
"name": "Neutral 110 - Text",
"slug": "neutral-110"
},
{
"color": "#222222",
"name": "Neutral 120 - Text",
"slug": "neutral-120"
},
{
"color": "#E5F6FE",
"name": "Primary 10 - BG",
"slug": "primary-10"
},
{
"color": "#D4EDFA",
"name": "Primary 20 - BG",
"slug": "primary-20"
},
{
"color": "#C4E5F5",
"name": "Primary 30 - UI BG",
"slug": "primary-30"
},
{
"color": "#B8E0F5",
"name": "Primary 40 - UI BG :hover / CTA BG :default",
"slug": "primary-40"
},
{
"color": "#A4D3EB",
"name": "Primary 50 - UI BG :active / CTA BG :hover",
"slug": "primary-50"
},
{
"color": "#95CBE6",
"name": "Primary 60 - Border (static) / CTA BG :active",
"slug": "primary-60"
},
{
"color": "#86C1DF",
"name": "Primary 70 - Border (interactive)",
"slug": "primary-70"
},
{
"color": "#5CA7CC",
"name": "Primary 80 - Border :hover",
"slug": "primary-80"
},
{
"color": "#1E6E96",
"name": "Primary 90 - UI BG",
"slug": "primary-90"
},
{
"color": "#195D7F",
"name": "Primary 100 - UI BG :hover",
"slug": "primary-100"
},
{
"color": "#144964",
"name": "Primary 110 - Text",
"slug": "primary-110"
},
{
"color": "#06151C",
"name": "Primary 120 - Text",
"slug": "primary-120"
},
{
"color": "#FCFEFA",
"name": "Secondary 10 - BG",
"slug": "secondary-10"
},
{
"color": "#F8FCF1",
"name": "Secondary 20 - BG",
"slug": "secondary-20"
},
{
"color": "#F1FADF",
"name": "Secondary 30 - UI BG",
"slug": "secondary-30"
},
{
"color": "#DDF1B5",
"name": "Secondary 40 - UI BG :hover / CTA BG :default",
"slug": "secondary-40"
},
{
"color": "#CEEBA4",
"name": "Secondary 50 - UI BG :active / CTA BG :hover",
"slug": "secondary-50"
},
{
"color": "#C4E695",
"name": "Secondary 60 - Border (static) / CTA BG :active",
"slug": "secondary-60"
},
{
"color": "#BADF86",
"name": "Secondary 70 - Border (interactive)",
"slug": "secondary-70"
},
{
"color": "#9CCC5C",
"name": "Secondary 80 - Border :hover",
"slug": "secondary-80"
},
{
"color": "#64961E",
"name": "Secondary 90 - UI BG",
"slug": "secondary-90"
},
{
"color": "#4C7F19",
"name": "Secondary 100 - UI BG :hover",
"slug": "secondary-100"
},
{
"color": "#3A6414",
"name": "Secondary 110 - Text",
"slug": "secondary-110"
},
{
"color": "#131C06",
"name": "Secondary 120 - Text",
"slug": "secondary-120"
},
{
"color": "#FFFFFF1A",
"name": "Opactiy 10%",
"slug": "opacity-10"
},
{
"color": "#FFFFFF40",
"name": "Opactiy 25%",
"slug": "opacity-25"
},
{
"color": "#FFFFFF80",
"name": "Opactiy 50%",
"slug": "opacity-50"
},
{
"color": "#FFFFFFBF",
"name": "Opactiy 75%",
"slug": "opacity-75"
},
{
"color": "#fff",
"name": "Light",
"slug": "light"
},
{
"color": "#000",
"name": "Dark",
"slug": "dark"
}
],
"text": true
},
"layout": {
"contentSize": false,
"wideSize": false
},
"shadow": {
"defaultPresets": true,
"presets": []
},
"spacing": {
"customSpacingSize": true,
"spacingScale": {
"increment": 1.5,
"mediumStep": 1.5,
"operator": "*",
"steps": 7,
"unit": "rem"
},
"spacingSizes": [
{
"name": "xs",
"size": "12px",
"slug": "xs"
},
{
"name": "sm",
"size": "16px",
"slug": "sm"
},
{
"name": "md",
"size": "24px",
"slug": "md"
},
{
"name": "Fluid lg",
"size": "clamp(28px, 3.5vw, 32px)",
"slug": "lg"
},
{
"name": "Fluid xl",
"size": "clamp(32px, 4vw, 48px)",
"slug": "xl"
},
{
"name": "Fluid xxl",
"size": "clamp(48px, 6vw, 64px)",
"slug": "xxl"
},
{
"name": "Fluid 3xl",
"size": "clamp(64px, 8vw, 96px)",
"slug": "3-xl"
}
],
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
},
"typography": {
"customFontSize": true,
"fluid": true,
"fontFamilies": [
{
"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFace": [
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./assets/fonts/inter_normal_400.ttf"
]
},
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "600",
"src": [
"file:./assets/fonts/inter_normal_600.ttf"
]
},
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "800",
"src": [
"file:./assets/fonts/inter_normal_800.ttf"
]
}
],
"fontFamily": "Inter",
"slug": "inter"
}
],
"fontSizes": [
{
"fluid": {
"max": "96px",
"min": "52px"
},
"name": "Display xl",
"size": "96px",
"slug": "display-xl"
},
{
"fluid": {
"max": "72px",
"min": "46px"
},
"name": "Display lg",
"size": "72px",
"slug": "display-lg"
},
{
"fluid": {
"max": "60px",
"min": "42px"
},
"name": "Display md",
"size": "60px",
"slug": "display-md"
},
{
"fluid": {
"max": "52px",
"min": "40px"
},
"name": "Display sm",
"size": "52px",
"slug": "display-sm"
},
{
"fluid": {
"max": "48px",
"min": "36px"
},
"name": "Heading 1",
"size": "48px",
"slug": "heading-1"
},
{
"fluid": {
"max": "36px",
"min": "30px"
},
"name": "Heading 2",
"size": "36px",
"slug": "heading-2"
},
{
"fluid": {
"max": "28px",
"min": "26px"
},
"name": "Heading 3",
"size": "28px",
"slug": "heading-3"
},
{
"fluid": {
"max": "24px",
"min": "22px"
},
"name": "Heading 4",
"size": "24px",
"slug": "heading-4"
},
{
"fluid": {
"max": "20px",
"min": "19px"
},
"name": "Heading 5",
"size": "20px",
"slug": "heading-5"
},
{
"fluid": {
"max": "18px",
"min": "17px"
},
"name": "Heading 6",
"size": "18px",
"slug": "heading-6"
},
{
"fluid": {
"max": "18px",
"min": "17px"
},
"name": "Paragraph lg",
"size": "18px",
"slug": "paragraph-lg"
},
{
"fluid": {
"max": "16px",
"min": "16px"
},
"name": "Paragraph md ⭐️",
"size": "17px",
"slug": "paragraph-md"
},
{
"fluid": {
"max": "14px",
"min": "14px"
},
"name": "Paragraph sm",
"size": "14px",
"slug": "paragraph-sm"
},
{
"fluid": {
"max": "12px",
"min": "12px"
},
"name": "Info md",
"size": "12px",
"slug": "info-md"
},
{
"fluid": {
"max": "10px",
"min": "10px"
},
"name": "Info sm",
"size": "10px",
"slug": "info-sm"
}
],
"fontStyle": true,
"fontWeight": true,
"letterSpacing": true,
"textDecoration": true,
"textTransform": true
},
"useRootPaddingAwareAlignments": true
}
},
"color": {
"background": true,
"custom": true,
"customDuotone": true,
"customGradient": true,
"defaultDuotone": false,
"defaultGradients": false,
"defaultPalette": false,
"duotone": [],
"gradients": [],
"palette": [
{
"color": "#FDFDFD",
"name": "Neutral 10 - BG",
"slug": "neutral-10"
},
{
"color": "#F5F5F5",
"name": "Neutral 20 - BG",
"slug": "neutral-20"
},
{
"color": "#F1F1F1",
"name": "Neutral 30 - UI BG",
"slug": "neutral-30"
},
{
"color": "#EBEBEB",
"name": "Neutral 40 - UI BG :hover / CTA BG :default",
"slug": "neutral-40"
},
{
"color": "#E2E2E2",
"name": "Neutral 50 - UI BG :active / CTA BG :hover",
"slug": "neutral-50"
},
{
"color": "#D6D6D6",
"name": "Neutral 60 - Border (static) / CTA BG :active",
"slug": "neutral-60"
},
{
"color": "#A6A6A6",
"name": "Neutral 70 - Border (interactive)",
"slug": "neutral-70"
},
{
"color": "#898989",
"name": "Neutral 80 - Border :hover",
"slug": "neutral-80"
},
{
"color": "#5D5E60",
"name": "Neutral 90 - UI BG",
"slug": "neutral-90"
},
{
"color": "#525252",
"name": "Neutral 100 - UI BG :hover",
"slug": "neutral-100"
},
{
"color": "#404040",
"name": "Neutral 110 - Text",
"slug": "neutral-110"
},
{
"color": "#222222",
"name": "Neutral 120 - Text",
"slug": "neutral-120"
},
{
"color": "#E5F6FE",
"name": "Primary 10 - BG",
"slug": "primary-10"
},
{
"color": "#D4EDFA",
"name": "Primary 20 - BG",
"slug": "primary-20"
},
{
"color": "#C4E5F5",
"name": "Primary 30 - UI BG",
"slug": "primary-30"
},
{
"color": "#B8E0F5",
"name": "Primary 40 - UI BG :hover / CTA BG :default",
"slug": "primary-40"
},
{
"color": "#A4D3EB",
"name": "Primary 50 - UI BG :active / CTA BG :hover",
"slug": "primary-50"
},
{
"color": "#95CBE6",
"name": "Primary 60 - Border (static) / CTA BG :active",
"slug": "primary-60"
},
{
"color": "#86C1DF",
"name": "Primary 70 - Border (interactive)",
"slug": "primary-70"
},
{
"color": "#5CA7CC",
"name": "Primary 80 - Border :hover",
"slug": "primary-80"
},
{
"color": "#1E6E96",
"name": "Primary 90 - UI BG",
"slug": "primary-90"
},
{
"color": "#195D7F",
"name": "Primary 100 - UI BG :hover",
"slug": "primary-100"
},
{
"color": "#144964",
"name": "Primary 110 - Text",
"slug": "primary-110"
},
{
"color": "#06151C",
"name": "Primary 120 - Text",
"slug": "primary-120"
},
{
"color": "#FCFEFA",
"name": "Secondary 10 - BG",
"slug": "secondary-10"
},
{
"color": "#F8FCF1",
"name": "Secondary 20 - BG",
"slug": "secondary-20"
},
{
"color": "#F1FADF",
"name": "Secondary 30 - UI BG",
"slug": "secondary-30"
},
{
"color": "#DDF1B5",
"name": "Secondary 40 - UI BG :hover / CTA BG :default",
"slug": "secondary-40"
},
{
"color": "#CEEBA4",
"name": "Secondary 50 - UI BG :active / CTA BG :hover",
"slug": "secondary-50"
},
{
"color": "#C4E695",
"name": "Secondary 60 - Border (static) / CTA BG :active",
"slug": "secondary-60"
},
{
"color": "#BADF86",
"name": "Secondary 70 - Border (interactive)",
"slug": "secondary-70"
},
{
"color": "#9CCC5C",
"name": "Secondary 80 - Border :hover",
"slug": "secondary-80"
},
{
"color": "#64961E",
"name": "Secondary 90 - UI BG",
"slug": "secondary-90"
},
{
"color": "#4C7F19",
"name": "Secondary 100 - UI BG :hover",
"slug": "secondary-100"
},
{
"color": "#3A6414",
"name": "Secondary 110 - Text",
"slug": "secondary-110"
},
{
"color": "#131C06",
"name": "Secondary 120 - Text",
"slug": "secondary-120"
},
{
"color": "#FFFFFF1A",
"name": "Opactiy 10%",
"slug": "opacity-10"
},
{
"color": "#FFFFFF40",
"name": "Opactiy 25%",
"slug": "opacity-25"
},
{
"color": "#FFFFFF80",
"name": "Opactiy 50%",
"slug": "opacity-50"
},
{
"color": "#FFFFFFBF",
"name": "Opactiy 75%",
"slug": "opacity-75"
},
{
"color": "#fff",
"name": "Light",
"slug": "light"
},
{
"color": "#000",
"name": "Dark",
"slug": "dark"
}
],
"text": true
},
"layout": {
"contentSize": "620px",
"wideSize": "1000px"
},
"spacing": {
"customSpacingSize": true,
"spacingScale": {
"increment": 1.5,
"mediumStep": 1.5,
"operator": "*",
"steps": 7,
"unit": "rem"
},
"spacingSizes": [
{
"name": "xxs",
"size": "8px",
"slug": "xxs"
},
{
"name": "xs",
"size": "12px",
"slug": "xs"
},
{
"name": "sm",
"size": "16px",
"slug": "sm"
},
{
"name": "md",
"size": "24px",
"slug": "md"
},
{
"name": "Fluid lg",
"size": "clamp(28px, 3.5vw, 32px)",
"slug": "lg"
},
{
"name": "Fluid xl",
"size": "clamp(32px, 4vw, 48px)",
"slug": "xl"
},
{
"name": "Fluid xxl",
"size": "clamp(48px, 6vw, 64px)",
"slug": "xxl"
},
{
"name": "Fluid 3xl",
"size": "clamp(64px, 8vw, 96px)",
"slug": "3-xl"
}
],
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
},
"typography": {
"customFontSize": true,
"dropCap": false,
"fluid": true,
"fontFamilies": [
{
"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFace": [
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./assets/fonts/inter_normal_400.ttf"
]
},
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "600",
"src": [
"file:./assets/fonts/inter_normal_600.ttf"
]
},
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "800",
"src": [
"file:./assets/fonts/inter_normal_800.ttf"
]
}
],
"fontFamily": "Inter",
"slug": "inter"
}
],
"fontSizes": [
{
"fluid": {
"max": "96px",
"min": "52px"
},
"name": "Display xl",
"size": "96px",
"slug": "display-xl"
},
{
"fluid": {
"max": "72px",
"min": "46px"
},
"name": "Display lg",
"size": "72px",
"slug": "display-lg"
},
{
"fluid": {
"max": "60px",
"min": "42px"
},
"name": "Display md",
"size": "60px",
"slug": "display-md"
},
{
"fluid": {
"max": "52px",
"min": "40px"
},
"name": "Display sm",
"size": "52px",
"slug": "display-sm"
},
{
"fluid": {
"max": "48px",
"min": "36px"
},
"name": "Heading 1",
"size": "48px",
"slug": "heading-1"
},
{
"fluid": {
"max": "36px",
"min": "30px"
},
"name": "Heading 2",
"size": "36px",
"slug": "heading-2"
},
{
"fluid": {
"max": "28px",
"min": "26px"
},
"name": "Heading 3",
"size": "28px",
"slug": "heading-3"
},
{
"fluid": {
"max": "24px",
"min": "22px"
},
"name": "Heading 4",
"size": "24px",
"slug": "heading-4"
},
{
"fluid": {
"max": "20px",
"min": "19px"
},
"name": "Heading 5",
"size": "20px",
"slug": "heading-5"
},
{
"fluid": {
"max": "18px",
"min": "17px"
},
"name": "Heading 6",
"size": "18px",
"slug": "heading-6"
},
{
"fluid": {
"max": "18px",
"min": "17px"
},
"name": "Paragraph lg",
"size": "18px",
"slug": "paragraph-lg"
},
{
"fluid": {
"max": "16px",
"min": "16px"
},
"name": "Paragraph md ⭐️",
"size": "17px",
"slug": "paragraph-md"
},
{
"fluid": {
"max": "14px",
"min": "14px"
},
"name": "Paragraph sm",
"size": "14px",
"slug": "paragraph-sm"
},
{
"fluid": {
"max": "12px",
"min": "12px"
},
"name": "Info md",
"size": "12px",
"slug": "info-md"
},
{
"fluid": {
"max": "10px",
"min": "10px"
},
"name": "Info sm",
"size": "10px",
"slug": "info-sm"
}
],
"fontStyle": true,
"fontWeight": true,
"letterSpacing": true,
"textDecoration": true,
"textTransform": true
},
"useRootPaddingAwareAlignments": true
},
"styles": {
"blocks": {
"core/button": {
"border": {
"bottom": {
"color": "var(--wp--preset--color--primary-100)",
"style": "solid",
"width": "2px"
},
"color": null,
"left": {
"radius": "6px",
"style": null,
"width": null
},
"radius": "6px",
"right": {
"radius": "6px",
"style": null,
"width": null
},
"style": null,
"top": {
"color": "var(--wp--preset--color--opacity-25)",
"style": "solid",
"width": "1px"
},
"width": null
},
"color": {
"text": "var(--wp--preset--color--light)"
}
}
},
"color": {
"background": "var(--wp--preset--color--light)",
"text": "var(--wp--preset--color--dark)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "var(--wp--preset--color--primary-100)"
}
},
"color": {
"background": "var(--wp--preset--color--primary-90)",
"text": "var(--wp--preset--color--light)"
}
},
"h1": {
"typography": {
"fontSize": "var(--wp--preset--font-size--heading-1)",
"lineHeight": "1.2"
}
},
"h2": {
"typography": {
"fontSize": "var(--wp--preset--font-size--heading-2)",
"lineHeight": "1.4"
}
},
"h3": {
"typography": {
"fontSize": "var(--wp--preset--font-size--heading-3)",
"lineHeight": 1.3999999999999999
}
},
"h4": {
"typography": {
"fontSize": "var(--wp--preset--font-size--heading-4)"
}
},
"h5": {
"typography": {
"fontSize": "var(--wp--preset--font-size--heading-5)"
}
},
"h6": {
"typography": {
"fontSize": "var(--wp--preset--font-size--heading-6)"
}
},
"heading": {
"typography": {
"fontStyle": "normal",
"fontWeight": "600"
}
},
"link": {
":hover": {
"color": {
"text": "var(--wp--preset--color--primary-110)"
}
},
"color": {
"text": "var(--wp--preset--color--primary-90)"
}
}
},
"spacing": {
"padding": {
"bottom": "0px",
"left": "16px",
"right": "16px",
"top": "0px"
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontSize": "var(--wp--preset--font-size--paragraph-md)",
"fontStyle": "normal",
"fontWeight": "400",
"lineHeight": "1.6"
}
},
"templateParts": [
{
"area": "header",
"name": "header"
},
{
"area": "footer",
"name": "footer"
}
],
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json"
}
hanneslsm
commented
1 year ago Thanks for the report. I have not been able to reproduce this problem with Twenty Twenty Three.
@t-hamano Can you try with saving in between? The checkmark is visible when I select the color, close the color panel and open it again. After saving the issue as described above appears.
t-hamano
commented
1 year ago I was able to reproduce it.
This problem is not limited to button block, but seems to be reproducible under the following conditions:
https://github.com/WordPress/gutenberg/assets/54422211/8186fa3b-203c-4ec5-a6b1-5863b4640cc9
t-hamano
commented
1 year ago Update: This problem still occurs in the latest Gutenberg trunk.
Description
When a theme color is used, usually a checkmark indicates that it is selected. This is not the case for button borders in the global styles
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
Environment info
Please confirm that you have searched existing issues in the repo.
No
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes