Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover: Add text color block support #41572

Merged
merged 2 commits into from
Mar 12, 2023
Merged

Cover: Add text color block support #41572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
faaba66
Add text color block support to Cover block
aaronrobertshaw Mar 10, 2023
28f40f7
Prevent incorrect serialization of gradient class on wrapper
aaronrobertshaw Mar 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/cover/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,9 @@
},
"color": {
"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
"text": false,
"background": false
"text": true,
"background": false,
"__experimentalSkipSerialization": [ "gradients" ]
},
"typography": {
"fontSize": true,
Expand Down
23 changes: 16 additions & 7 deletions packages/block-library/src/cover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}
75 changes: 24 additions & 51 deletions packages/block-library/src/media-text/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ const transforms = {
gradient,
id,
overlayColor,
style,
textColor,
url,
},
innerBlocks
Expand All @@ -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',
{
Expand All @@ -77,6 +89,7 @@ const transforms = {
mediaId: id,
mediaType: backgroundType,
mediaUrl: url,
textColor,
...additionalAttributes,
},
innerBlocks
Expand Down Expand Up @@ -135,13 +148,22 @@ 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 ) {
additionalAttributes.customOverlayColor =
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,
Expand All @@ -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
);
},
},
Expand Down