From 449463f7acc43321cd8ce34996643fd196ea8f74 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 18 Aug 2022 16:15:32 +1000 Subject: [PATCH 1/6] Checking for contrastChecker on block.json --- docs/reference-guides/core-blocks.md | 2 +- packages/block-editor/src/hooks/color.js | 12 ++++++++++-- packages/block-library/src/separator/block.json | 1 + schemas/json/block.json | 5 +++++ 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 4d69b16d5713e1..be2e1699ed51d9 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -707,7 +707,7 @@ Create a break between ideas or sections with a horizontal separator. ([Source]( - **Name:** core/separator - **Category:** design -- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~text~~), spacing (margin) +- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~contrastChecker~~, ~~text~~), spacing (margin) - **Attributes:** opacity ## Shortcode diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index d6534627c93c35..be4e51b52c2b77 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -292,7 +292,7 @@ const getLinkColorFromAttributeValue = ( colors, value ) => { export function ColorEdit( props ) { const { name: blockName, attributes } = props; // Some color settings have a special handling for deprecated flags in `useSetting`, - // so we can't unwrap them by doing const { ... } = useSetting('color') + // so we can't unwrap them by doing conwst { ... } = useSetting('color') // until https://github.com/WordPress/gutenberg/issues/37094 is fixed. const userPalette = useSetting( 'color.palette.custom' ); const themePalette = useSetting( 'color.palette.theme' ); @@ -450,7 +450,7 @@ export function ColorEdit( props ) { }; }; - const enableContrastChecking = + const isWebAndColorNotGradient = Platform.OS === 'web' && ! gradient && ! style?.color?.gradient; const defaultColorControls = getBlockSupport( props.name, [ @@ -458,6 +458,14 @@ export function ColorEdit( props ) { '__experimentalDefaultControls', ] ); + const enableContrastChecking = + isWebAndColorNotGradient && + true === + getBlockSupport( props.name, [ + COLOR_SUPPORT_KEY, + 'contrastChecker', + ] ); + return ( Date: Thu, 18 Aug 2022 16:29:23 +1000 Subject: [PATCH 2/6] Change flag to __experimentalCheckContrast --- docs/reference-guides/core-blocks.md | 2 +- packages/block-editor/src/hooks/color.js | 2 +- packages/block-library/src/separator/block.json | 2 +- schemas/json/block.json | 5 ----- 4 files changed, 3 insertions(+), 8 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index be2e1699ed51d9..4d69b16d5713e1 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -707,7 +707,7 @@ Create a break between ideas or sections with a horizontal separator. ([Source]( - **Name:** core/separator - **Category:** design -- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~contrastChecker~~, ~~text~~), spacing (margin) +- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~text~~), spacing (margin) - **Attributes:** opacity ## Shortcode diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index be4e51b52c2b77..6abc03df1a8d13 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -463,7 +463,7 @@ export function ColorEdit( props ) { true === getBlockSupport( props.name, [ COLOR_SUPPORT_KEY, - 'contrastChecker', + '__experimentalCheckContrast', ] ); return ( diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index c0dc96293312a3..b509af1e2f58d1 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -17,7 +17,7 @@ "anchor": true, "align": [ "center", "wide", "full" ], "color": { - "contrastChecker": false, + "__experimentalCheckContrast": false, "__experimentalSkipSerialization": true, "gradients": true, "background": true, diff --git a/schemas/json/block.json b/schemas/json/block.json index adcdbed6490254..fd7bd5a06f708e 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -278,11 +278,6 @@ "type": "boolean", "description": "This property adds block controls which allow the user to set text color in a block.\n\nWhen color support is declared, this property is enabled by default (along with background), so simply setting color will enable text color.\n\nText color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.text, the attributes definition is extended to include two new attributes: textColor and style", "default": true - }, - "contrastChecker": { - "type": "boolean", - "description": "Used to control the contrast checker widget in the block editor UI. The contrast checker appears only if the block declares support for color. It tests the readability of color combinations and warns if there is a potential issue. The property is enabled by default.", - "default": true } } }, From b910975fcb91a6779d04edf8cef916f771ab7844 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 22 Aug 2022 14:11:17 +1000 Subject: [PATCH 3/6] There is no `conwst` --- packages/block-editor/src/hooks/color.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 6abc03df1a8d13..170024c8e9c892 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -292,7 +292,7 @@ const getLinkColorFromAttributeValue = ( colors, value ) => { export function ColorEdit( props ) { const { name: blockName, attributes } = props; // Some color settings have a special handling for deprecated flags in `useSetting`, - // so we can't unwrap them by doing conwst { ... } = useSetting('color') + // so we can't unwrap them by doing const { ... } = useSetting('color') // until https://github.com/WordPress/gutenberg/issues/37094 is fixed. const userPalette = useSetting( 'color.palette.custom' ); const themePalette = useSetting( 'color.palette.theme' ); From 6f0285cccd99642555483ae1b3454675bc16a34a Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 22 Aug 2022 14:22:36 +1000 Subject: [PATCH 4/6] Fixing condition so that the contrast checker is enabled unless __experimentalCheckContrast === false --- packages/block-editor/src/hooks/color.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 170024c8e9c892..9f47b80dc12938 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -460,7 +460,10 @@ export function ColorEdit( props ) { const enableContrastChecking = isWebAndColorNotGradient && - true === + // Contrast checking is enabled by default. + // Deactivating it requires `__experimentalCheckContrast` to have + // an explicit value of `false`. + false !== getBlockSupport( props.name, [ COLOR_SUPPORT_KEY, '__experimentalCheckContrast', From d2562b3066788f048a17906942822059b292a5a4 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 22 Aug 2022 14:25:16 +1000 Subject: [PATCH 5/6] Removed var declaration --- packages/block-editor/src/hooks/color.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 9f47b80dc12938..09c49069a872cb 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -450,16 +450,15 @@ export function ColorEdit( props ) { }; }; - const isWebAndColorNotGradient = - Platform.OS === 'web' && ! gradient && ! style?.color?.gradient; - const defaultColorControls = getBlockSupport( props.name, [ COLOR_SUPPORT_KEY, '__experimentalDefaultControls', ] ); const enableContrastChecking = - isWebAndColorNotGradient && + Platform.OS === 'web' && + ! gradient && + ! style?.color?.gradient && // Contrast checking is enabled by default. // Deactivating it requires `__experimentalCheckContrast` to have // an explicit value of `false`. From 899f3b016af822c09473e1936a6c0085479866c0 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 23 Aug 2022 08:55:58 +1000 Subject: [PATCH 6/6] Renamed __experimentalCheckContrast to enableContrastChecker Added block.json schema docs --- docs/reference-guides/core-blocks.md | 2 +- packages/block-editor/src/hooks/color.js | 4 ++-- packages/block-library/src/separator/block.json | 2 +- schemas/json/block.json | 5 +++++ 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 4d69b16d5713e1..eb20480f9c1a52 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -707,7 +707,7 @@ Create a break between ideas or sections with a horizontal separator. ([Source]( - **Name:** core/separator - **Category:** design -- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~text~~), spacing (margin) +- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), spacing (margin) - **Attributes:** opacity ## Shortcode diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 09c49069a872cb..ad6a14028d3f28 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -460,12 +460,12 @@ export function ColorEdit( props ) { ! gradient && ! style?.color?.gradient && // Contrast checking is enabled by default. - // Deactivating it requires `__experimentalCheckContrast` to have + // Deactivating it requires `enableContrastChecker` to have // an explicit value of `false`. false !== getBlockSupport( props.name, [ COLOR_SUPPORT_KEY, - '__experimentalCheckContrast', + 'enableContrastChecker', ] ); return ( diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index b509af1e2f58d1..bee358d208516d 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -17,7 +17,7 @@ "anchor": true, "align": [ "center", "wide", "full" ], "color": { - "__experimentalCheckContrast": false, + "enableContrastChecker": false, "__experimentalSkipSerialization": true, "gradients": true, "background": true, diff --git a/schemas/json/block.json b/schemas/json/block.json index fd7bd5a06f708e..4a343c51f4fb44 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -278,6 +278,11 @@ "type": "boolean", "description": "This property adds block controls which allow the user to set text color in a block.\n\nWhen color support is declared, this property is enabled by default (along with background), so simply setting color will enable text color.\n\nText color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.text, the attributes definition is extended to include two new attributes: textColor and style", "default": true + }, + "enableContrastChecker": { + "type": "boolean", + "description": "Determines whether the contrast checker widget displays in the block editor UI.\n\nThe contrast checker appears only if the block declares support for color. It tests the readability of color combinations and warns if there is a potential issue. The property is enabled by default.\n\nSet to `false` to explicitly disable.", + "default": true } } },