Global Styles: Border checkmark missing #52733
Assignees
Labels
Global Styles
Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
[Status] In Progress
Tracking issues with work in progress
[Type] Bug
An existing feature does not function as intended
Comments
|
Looks like the name is also not correctly displayed. |
|
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. |
t-hamano
added
[Status] Needs More Info
|
it's a custom theme, here is the current theme.json: Details
{
"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"
}
|
@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. |
|
I was able to reproduce it. This problem is not limited to button block, but seems to be reproducible under the following conditions:
7bdb4dc359ee5f53df18c23f36ef0687.mp4 |
t-hamano
removed
the
[Status] Needs More Info
t-hamano
changed the title
|
Update: This problem still occurs in the latest Gutenberg trunk. |
github-actions
bot
added
the
[Status] In Progress
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
The text was updated successfully, but these errors were encountered: