From 698be2d02ed863c17f5da45bd3b406c0590b79b5 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 16 Mar 2023 11:16:06 +0100 Subject: [PATCH 1/7] Add heading color block support --- .../block-editor/src/components/global-styles/utils.js | 2 ++ packages/blocks/src/api/constants.js | 8 ++++++++ packages/blocks/src/store/private-selectors.js | 2 ++ .../src/components/global-styles/screen-colors.js | 4 +++- 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index e8ca27d4b97e4d..ff4544c6d693cc 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -17,6 +17,8 @@ export const ROOT_BLOCK_SUPPORTS = [ 'color', 'linkColor', 'buttonColor', + 'headingColor', + 'headingBackgroundColor', 'fontFamily', 'fontSize', 'fontStyle', diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 1ab0b26448c1a5..812f0e83288c6d 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -144,6 +144,14 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { value: [ 'elements', 'button', 'color', 'background' ], support: [ 'color', 'button' ], }, + headingColor: { + value: [ 'elements', 'heading', 'color', 'text' ], + support: [ 'color', 'heading' ], + }, + headingBackgroundColor: { + value: [ 'elements', 'heading', 'color', 'background' ], + support: [ 'color', 'heading' ], + }, fontFamily: { value: [ 'typography', 'fontFamily' ], support: [ 'typography', '__experimentalFontFamily' ], diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js index 9e38194cd11cb0..fc87973dd523be 100644 --- a/packages/blocks/src/store/private-selectors.js +++ b/packages/blocks/src/store/private-selectors.js @@ -16,6 +16,8 @@ const ROOT_BLOCK_SUPPORTS = [ 'color', 'linkColor', 'buttonColor', + 'headingColor', + 'headingBackgroundColor', 'fontFamily', 'fontSize', 'fontStyle', diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index dc40ca155b3387..62617c14ac8f7d 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -139,7 +139,9 @@ function HeadingColorItem( { name, parentMenu, variation = '' } ) { const prefix = variation ? `variations.${ variation }.` : ''; const urlPrefix = variation ? `/variations/${ variation }` : ''; const supports = useSupportedStyles( name ); - const hasSupport = supports.includes( 'color' ); + const hasSupport = + supports.includes( 'headingColor' ) || + supports.includes( 'headingBackgroundColor' ); const [ color ] = useGlobalStyle( prefix + 'elements.heading.color.text', name From d0dcbb90330ba5865cd1cbfaef449005b1d001a0 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 16 Mar 2023 12:38:38 +0100 Subject: [PATCH 2/7] Try to update the test file --- packages/blocks/src/store/test/private-selectors.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js index 55cc270976ca0b..f212197d75bb50 100644 --- a/packages/blocks/src/store/test/private-selectors.js +++ b/packages/blocks/src/store/test/private-selectors.js @@ -31,6 +31,8 @@ describe( 'private selectors', () => { 'color', 'linkColor', 'buttonColor', + 'headingColor', + 'headingBackgroundColor', 'fontFamily', 'fontSize', 'fontStyle', @@ -52,6 +54,8 @@ describe( 'private selectors', () => { 'color', 'linkColor', 'buttonColor', + 'headingColor', + 'headingBackgroundColor', 'fontFamily', 'fontSize', 'fontStyle', @@ -78,6 +82,8 @@ describe( 'private selectors', () => { 'color', 'linkColor', 'buttonColor', + 'headingColor', + 'headingBackgroundColor', 'fontFamily', 'fontStyle', 'fontWeight', From a9c8a3e9ee5a5da8f9454ee2dfb619bbb891abbd Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 20 Apr 2023 10:59:12 +0200 Subject: [PATCH 3/7] try to resolve conflicts --- packages/block-editor/src/components/global-styles/utils.js | 1 - packages/blocks/src/store/private-selectors.js | 1 - packages/blocks/src/store/test/private-selectors.js | 3 --- .../edit-site/src/components/global-styles/screen-colors.js | 4 +--- 4 files changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index ff4544c6d693cc..f3def7a15617a3 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -18,7 +18,6 @@ export const ROOT_BLOCK_SUPPORTS = [ 'linkColor', 'buttonColor', 'headingColor', - 'headingBackgroundColor', 'fontFamily', 'fontSize', 'fontStyle', diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js index fc87973dd523be..7d394bca5d144a 100644 --- a/packages/blocks/src/store/private-selectors.js +++ b/packages/blocks/src/store/private-selectors.js @@ -17,7 +17,6 @@ const ROOT_BLOCK_SUPPORTS = [ 'linkColor', 'buttonColor', 'headingColor', - 'headingBackgroundColor', 'fontFamily', 'fontSize', 'fontStyle', diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js index f212197d75bb50..e0f9c414bd1e15 100644 --- a/packages/blocks/src/store/test/private-selectors.js +++ b/packages/blocks/src/store/test/private-selectors.js @@ -32,7 +32,6 @@ describe( 'private selectors', () => { 'linkColor', 'buttonColor', 'headingColor', - 'headingBackgroundColor', 'fontFamily', 'fontSize', 'fontStyle', @@ -55,7 +54,6 @@ describe( 'private selectors', () => { 'linkColor', 'buttonColor', 'headingColor', - 'headingBackgroundColor', 'fontFamily', 'fontSize', 'fontStyle', @@ -83,7 +81,6 @@ describe( 'private selectors', () => { 'linkColor', 'buttonColor', 'headingColor', - 'headingBackgroundColor', 'fontFamily', 'fontStyle', 'fontWeight', diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index 62617c14ac8f7d..dc40ca155b3387 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -139,9 +139,7 @@ function HeadingColorItem( { name, parentMenu, variation = '' } ) { const prefix = variation ? `variations.${ variation }.` : ''; const urlPrefix = variation ? `/variations/${ variation }` : ''; const supports = useSupportedStyles( name ); - const hasSupport = - supports.includes( 'headingColor' ) || - supports.includes( 'headingBackgroundColor' ); + const hasSupport = supports.includes( 'color' ); const [ color ] = useGlobalStyle( prefix + 'elements.heading.color.text', name From 4348c46166d83593a9415cfdd3cad240ffe51e2c Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 21 Apr 2023 07:13:33 +0200 Subject: [PATCH 4/7] Add heading color block support --- docs/reference-guides/core-blocks.md | 14 +++++++------- packages/block-library/src/column/block.json | 1 + packages/block-library/src/comments/block.json | 1 + packages/block-library/src/cover/block.json | 1 + packages/block-library/src/group/block.json | 1 + packages/block-library/src/media-text/block.json | 1 + .../src/post-comments-form/block.json | 1 + packages/block-library/src/quote/block.json | 1 + 8 files changed, 14 insertions(+), 7 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 1dee5a7509d7b1..ec13eb72c03145 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -95,7 +95,7 @@ A single column within a columns block. ([Source](https://github.com/WordPress/g - **Name:** core/column - **Category:** text -- **Supports:** anchor, color (background, gradients, link, text), spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ +- **Supports:** anchor, color (background, gradients, heading, link, text), spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** allowedBlocks, templateLock, verticalAlignment, width ## Columns @@ -176,7 +176,7 @@ An advanced block that allows displaying post comments using different visual co - **Name:** core/comments - **Category:** theme -- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), anchor, color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** legacy, tagName ## Comments Pagination @@ -230,7 +230,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https - **Name:** core/cover - **Category:** media -- **Supports:** align, anchor, color (text, ~~background~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align, anchor, color (heading, text, ~~background~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage ## Embed @@ -275,7 +275,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute - **Name:** core/group - **Category:** design -- **Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, heading, link, text), dimensions (minHeight), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** tagName, templateLock ## Heading @@ -365,7 +365,7 @@ Set media and words side-by-side for a richer layout. ([Source](https://github.c - **Name:** core/media-text - **Category:** media -- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), anchor, color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** align, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, verticalAlignment ## Unsupported @@ -509,7 +509,7 @@ Display a post's comments form. ([Source](https://github.com/WordPress/gutenberg - **Name:** core/post-comments-form - **Category:** theme -- **Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** anchor, color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** textAlign ## Post Comments Link @@ -689,7 +689,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju - **Name:** core/quote - **Category:** text -- **Supports:** anchor, color (background, gradients, link, text), typography (fontSize, lineHeight) +- **Supports:** anchor, color (background, gradients, heading, link, text), typography (fontSize, lineHeight) - **Attributes:** align, citation, value ## Read More diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index f6f7bc8d1f5cc9..dd58c3e0a6f260 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -28,6 +28,7 @@ "html": false, "color": { "gradients": true, + "heading": true, "link": true, "__experimentalDefaultControls": { "background": true, diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json index 19490f6e99eb47..ac98bb031e5eb1 100644 --- a/packages/block-library/src/comments/block.json +++ b/packages/block-library/src/comments/block.json @@ -22,6 +22,7 @@ "html": false, "color": { "gradients": true, + "heading": true, "link": true, "__experimentalDefaultControls": { "background": true, diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 0d272ab4e4cfff..82a2a55473466a 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -96,6 +96,7 @@ }, "color": { "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background", + "heading": true, "text": true, "background": false, "__experimentalSkipSerialization": [ "gradients" ] diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 2b227a15847a27..5ced7b2a786873 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -26,6 +26,7 @@ "html": false, "color": { "gradients": true, + "heading": true, "link": true, "__experimentalDefaultControls": { "background": true, diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index ded230a2eb1006..f5e4b22969d5c2 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -97,6 +97,7 @@ "html": false, "color": { "gradients": true, + "heading": true, "link": true, "__experimentalDefaultControls": { "background": true, diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json index 793d14d74ba7ba..c0dde875719494 100644 --- a/packages/block-library/src/post-comments-form/block.json +++ b/packages/block-library/src/post-comments-form/block.json @@ -17,6 +17,7 @@ "html": false, "color": { "gradients": true, + "heading": true, "link": true, "__experimentalDefaultControls": { "background": true, diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json index adb9fddca78731..97393c699feaa5 100644 --- a/packages/block-library/src/quote/block.json +++ b/packages/block-library/src/quote/block.json @@ -46,6 +46,7 @@ }, "color": { "gradients": true, + "heading": true, "link": true, "__experimentalDefaultControls": { "background": true, From 5bfde5357034eeeba2171a8230cbbd50c656c78f Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 21 Apr 2023 07:17:12 +0200 Subject: [PATCH 5/7] Limit the Heading color option to blocks that support Heading color --- .../edit-site/src/components/global-styles/screen-colors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index dc40ca155b3387..884ff3bbbb736e 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -139,7 +139,7 @@ function HeadingColorItem( { name, parentMenu, variation = '' } ) { const prefix = variation ? `variations.${ variation }.` : ''; const urlPrefix = variation ? `/variations/${ variation }` : ''; const supports = useSupportedStyles( name ); - const hasSupport = supports.includes( 'color' ); + const hasSupport = supports.includes( 'headingColor' ); const [ color ] = useGlobalStyle( prefix + 'elements.heading.color.text', name From 445c51e64f55815343ba0a8cff4e657919108cfa Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 21 Apr 2023 07:49:12 +0200 Subject: [PATCH 6/7] another attempt to fix conflicts --- .../edit-site/src/components/global-styles/screen-colors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index 884ff3bbbb736e..dc40ca155b3387 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -139,7 +139,7 @@ function HeadingColorItem( { name, parentMenu, variation = '' } ) { const prefix = variation ? `variations.${ variation }.` : ''; const urlPrefix = variation ? `/variations/${ variation }` : ''; const supports = useSupportedStyles( name ); - const hasSupport = supports.includes( 'headingColor' ); + const hasSupport = supports.includes( 'color' ); const [ color ] = useGlobalStyle( prefix + 'elements.heading.color.text', name From 0d7fd989fb08a9b2ab032e84d121326b2201e740 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 21 Apr 2023 08:52:57 +0200 Subject: [PATCH 7/7] Fix typo --- .../block-editor/src/components/global-styles/color-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js index ba8a97b1708584..4051d81e738e54 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.js +++ b/packages/block-editor/src/components/global-styles/color-panel.js @@ -35,7 +35,7 @@ export function useHasColorPanel( settings ) { const hasBackgroundPanel = useHasBackgroundPanel( settings ); const hasLinkPanel = useHasLinkPanel( settings ); const hasHeadingPanel = useHasHeadingPanel( settings ); - const hasButtonPanel = useHasHeadingPanel( settings ); + const hasButtonPanel = useHasButtonPanel( settings ); const hasCaptionPanel = useHasCaptionPanel( settings ); return (