From faaba66c7329606e64df2edf32396bbcb5ccfc24 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 10 Mar 2023 17:08:34 +1000 Subject: [PATCH 1/2] Add text color block support to Cover block --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/cover/block.json | 2 +- packages/block-library/src/cover/style.scss | 23 ++++-- .../src/media-text/transforms.js | 75 ++++++------------- 4 files changed, 42 insertions(+), 60 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index abe8ab6b0643a..1dee5a7509d7b 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -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 (~~background~~, ~~text~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align, anchor, color (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 diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 3b3ac379d7430..3f3eed0dcbb7d 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -96,7 +96,7 @@ }, "color": { "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background", - "text": false, + "text": true, "background": false }, "typography": { diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 95fab91763886..cbd2c0d247093 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -106,17 +106,11 @@ .wp-block-cover__inner-container { width: 100%; z-index: z-index(".wp-block-cover__inner-container"); - color: $white; + color: inherit; // Reset the fixed LTR direction at the root of the block in RTL languages. /*rtl:raw: direction: rtl; */ } - &.is-light { - .wp-block-cover__inner-container { - color: $black; - } - } - p, h1, h2, @@ -285,3 +279,18 @@ section.wp-block-cover-image > h2, padding: 0.44em; text-align: center; } + +// If Cover block's text color has not been set adjust default color +// based on if overlay is light or not. The following styles leverage +// `:where` to allow for generic global styles that have a low specificity to +// still take precedence. + +:where(.wp-block-cover:not(.has-text-color)), +:where(.wp-block-cover-image:not(.has-text-color)) { + color: $white; +} + +:where(.wp-block-cover.is-light:not(.has-text-color)), +:where(.wp-block-cover-image.is-light:not(.has-text-color)) { + color: $black; +} diff --git a/packages/block-library/src/media-text/transforms.js b/packages/block-library/src/media-text/transforms.js index b80f94485ed09..b4a3328d4508b 100644 --- a/packages/block-library/src/media-text/transforms.js +++ b/packages/block-library/src/media-text/transforms.js @@ -42,6 +42,8 @@ const transforms = { gradient, id, overlayColor, + style, + textColor, url, }, innerBlocks @@ -66,6 +68,16 @@ const transforms = { }; } + // Maintain custom text color block support value. + if ( style?.color?.text ) { + additionalAttributes.style = { + color: { + ...additionalAttributes.style?.color, + text: style.color.text, + }, + }; + } + return createBlock( 'core/media-text', { @@ -77,6 +89,7 @@ const transforms = { mediaId: id, mediaType: backgroundType, mediaUrl: url, + textColor, ...additionalAttributes, }, innerBlocks @@ -135,6 +148,8 @@ const transforms = { ) => { const additionalAttributes = {}; + // Migrate the background styles or gradient to Cover's custom + // gradient and overlay properties. if ( style?.color?.gradient ) { additionalAttributes.customGradient = style.color.gradient; } else if ( style?.color?.background ) { @@ -142,6 +157,13 @@ const transforms = { style.color.background; } + // Maintain custom text color support style. + if ( style?.color?.text ) { + additionalAttributes.style = { + color: { text: style.color.text }, + }; + } + const coverAttributes = { align, alt: mediaAlt, @@ -152,64 +174,15 @@ const transforms = { gradient, id: mediaId, overlayColor: backgroundColor, + textColor, url: mediaUrl, ...additionalAttributes, }; - const customTextColor = style?.color?.text; - - // Attempt to maintain any text color selection. - // Cover block's do not opt into color block support so we - // cannot directly copy the color attributes across. - if ( ! textColor && ! customTextColor ) { - return createBlock( - 'core/cover', - coverAttributes, - innerBlocks - ); - } - - const coloredInnerBlocks = innerBlocks.map( ( innerBlock ) => { - const { - attributes: { style: innerStyle }, - } = innerBlock; - - // Only apply the media and text color if the inner block - // doesn't set its own color block support selection. - if ( - innerBlock.attributes.textColor || - innerStyle?.color?.text - ) { - return innerBlock; - } - - const newAttributes = { textColor }; - - // Only add or extend inner block's style object if we have - // a custom text color from the media & text block. - if ( customTextColor ) { - newAttributes.style = { - ...innerStyle, - color: { - ...innerStyle?.color, - text: customTextColor, - }, - }; - } - - return createBlock( - innerBlock.name, - { - ...innerBlock.attributes, - ...newAttributes, - }, - innerBlock.innerBlocks - ); - } ); return createBlock( 'core/cover', coverAttributes, - coloredInnerBlocks + innerBlocks ); }, }, From 28f40f7f695428d6ea5f08d707a5ae31fd9edb15 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 10 Mar 2023 17:11:44 +1000 Subject: [PATCH 2/2] Prevent incorrect serialization of gradient class on wrapper The Cover block previously (and likely accidentally) relied on gradient classes and styles not being serialized on the block wrapper as it didn't have text or background support. Its ad-hoc use of the same gradient attribute gives rise to the problem. --- packages/block-library/src/cover/block.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 3f3eed0dcbb7d..0d272ab4e4cff 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -97,7 +97,8 @@ "color": { "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background", "text": true, - "background": false + "background": false, + "__experimentalSkipSerialization": [ "gradients" ] }, "typography": { "fontSize": true,