Skip to content

Commit

Permalink
Post Featured Image block: Enable gradient overlay (#43838)
Browse files Browse the repository at this point in the history 
* Feat: Add block attributes related to the overlay

* Feat: Add overlay settings and markup for editor

* Feat: Add overlay markup for the front-end

* Feat: Add styles for the overlay

* Feat: Add custom gradient on front-end

* Refact: Use overlay instead of background for variable names

* Chore: Remove default opacity

* Feat: Export the Overlay settings as a component

* Feat: Add the Overlay settings in the site editor

* Refact: Set default overlay opacity to 0

* Refact: Export the overlay markup in the separate component

* Feat: Export the utility function to a separate file

* Fix: Add missing custom overlay attribute

* Fix: Links not working because of the overlay

* Fix: The upload button on placeholder not working

* Refact: Rename variable to a shorten name

'overlay_element_markup' to 'overlay_markup'

* Chore: Remove unnecessary brackets

* Refact: Remove duplicate style property

* Feat: Add overlay when block is used inside query loop

* Fix: Missing attribute in unit test and doc
  • Loading branch information
@RahiDroid
RahiDroid authored Sep 13, 2022
1 parent c2d06e3 commit e291564
Show file tree
Hide file tree
Showing 9 changed files with 357 additions and 80 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -546,7 +546,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
- **Name:** core/post-featured-image
- **Category:** theme
- **Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
- **Attributes:** height, isLink, linkTarget, rel, scale, sizeSlug, width
- **Attributes:** customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width

## Post Navigation Link

Expand Down
16 changes: 16 additions & 0 deletions packages/block-library/src/post-featured-image/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,22 @@
"linkTarget": {
"type": "string",
"default": "_self"
},
"overlayColor": {
"type": "string"
},
"customOverlayColor": {
"type": "string"
},
"dimRatio": {
"type": "number",
"default": 0
},
"gradient": {
"type": "string"
},
"customGradient": {
"type": "string"
}
},
"usesContext": [ "postId", "postType", "queryId" ],
Expand Down
24 changes: 22 additions & 2 deletions packages/block-library/src/post-featured-image/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import { store as noticesStore } from '@wordpress/notices';
* Internal dependencies
*/
import DimensionControls from './dimension-controls';
import Overlay from './overlay';

const ALLOWED_MEDIA_TYPES = [ 'image' ];

Expand Down Expand Up @@ -170,7 +171,14 @@ function PostFeaturedImageDisplay( {
return (
<>
{ controls }
<div { ...blockProps }>{ placeholder() }</div>
<div { ...blockProps }>
{ placeholder() }
<Overlay
attributes={ attributes }
setAttributes={ setAttributes }
clientId={ clientId }
/>
</div>
</>
);
}
Expand Down Expand Up @@ -247,7 +255,14 @@ function PostFeaturedImageDisplay( {
</MediaReplaceFlow>
</BlockControls>
) }
<figure { ...blockProps }>{ image }</figure>
<figure { ...blockProps }>
{ image }
<Overlay
attributes={ attributes }
setAttributes={ setAttributes }
clientId={ clientId }
/>
</figure>
</>
);
}
Expand All @@ -267,6 +282,11 @@ export default function PostFeaturedImageEdit( props ) {
withIllustration={ true }
style={ borderProps.style }
/>
<Overlay
attributes={ props.attributes }
setAttributes={ props.setAttributes }
clientId={ props.clientId }
/>
</div>
);
}
Expand Down
147 changes: 77 additions & 70 deletions packages/block-library/src/post-featured-image/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,92 @@
// Provide special styling for the placeholder.
// @todo: this particular minimal style of placeholder could be componentized further.
.wp-block-post-featured-image.wp-block-post-featured-image {
// Style the placeholder.
.wp-block-post-featured-image__placeholder,
.components-placeholder {
justify-content: center;
align-items: center;
padding: 0;

// Hide the upload button, as it's also available in the media library.
.components-form-file-upload {
display: none;
}
.wp-block-post-featured-image {
.block-editor-media-placeholder {
z-index: 1; // Need to put it above the overlay so the upload button works.
backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
}

// Style the upload button.
.components-button.components-button {
padding: 0;
display: flex;
&.wp-block-post-featured-image {
// Style the placeholder.
.wp-block-post-featured-image__placeholder,
.components-placeholder {
justify-content: center;
align-items: center;
width: $grid-unit-60;
height: $grid-unit-60;
border-radius: 50%;
position: relative;
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border-style: solid;
color: $white;
padding: 0;

> svg {
color: inherit;
// Hide the upload button, as it's also available in the media library.
.components-form-file-upload {
display: none;
}
}

// Show default placeholder height when not resized.
min-height: 200px;
// Style the upload button.
.components-button.components-button {
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: $grid-unit-60;
height: $grid-unit-60;
border-radius: 50%;
position: relative;
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border-style: solid;
color: $white;

// The following override the default placeholder styles that remove
// its border so that a user selection for border color or width displays
// a visual border.
&:where(.has-border-color) {
border-style: solid;
}
&:where([style*="border-top-color"]) {
border-top-style: solid;
}
&:where([style*="border-right-color"]) {
border-right-style: solid;
}
&:where([style*="border-bottom-color"]) {
border-bottom-style: solid;
}
&:where([style*="border-left-color"]) {
border-left-style: solid;
}
> svg {
color: inherit;
}
}

&:where([style*="border-width"]) {
border-style: solid;
}
&:where([style*="border-top-width"]) {
border-top-style: solid;
}
&:where([style*="border-right-width"]) {
border-right-style: solid;
}
&:where([style*="border-bottom-width"]) {
border-bottom-style: solid;
}
&:where([style*="border-left-width"]) {
border-left-style: solid;
// Show default placeholder height when not resized.
min-height: 200px;

// The following override the default placeholder styles that remove
// its border so that a user selection for border color or width displays
// a visual border.
&:where(.has-border-color) {
border-style: solid;
}
&:where([style*="border-top-color"]) {
border-top-style: solid;
}
&:where([style*="border-right-color"]) {
border-right-style: solid;
}
&:where([style*="border-bottom-color"]) {
border-bottom-style: solid;
}
&:where([style*="border-left-color"]) {
border-left-style: solid;
}

&:where([style*="border-width"]) {
border-style: solid;
}
&:where([style*="border-top-width"]) {
border-top-style: solid;
}
&:where([style*="border-right-width"]) {
border-right-style: solid;
}
&:where([style*="border-bottom-width"]) {
border-bottom-style: solid;
}
&:where([style*="border-left-width"]) {
border-left-style: solid;
}
}
}

// Provide a minimum size for the placeholder when resized.
// Note, this should be as small as we can afford it, and exists only
// to ensure there's room for the upload button.
&[style*="height"] .components-placeholder {
min-height: $grid-unit-60;
min-width: $grid-unit-60;
height: 100%;
width: 100%;
// Provide a minimum size for the placeholder when resized.
// Note, this should be as small as we can afford it, and exists only
// to ensure there's room for the upload button.
&[style*="height"] .components-placeholder {
min-height: $grid-unit-60;
min-width: $grid-unit-60;
height: 100%;
width: 100%;
}
}
}

Expand Down
95 changes: 88 additions & 7 deletions packages/block-library/src/post-featured-image/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
}
$post_ID = $block->context['postId'];

$is_link = isset( $attributes['isLink'] ) && $attributes['isLink'];
$size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
$post_title = trim( strip_tags( get_the_title( $post_ID ) ) );
$attr = get_block_core_post_featured_image_border_attributes( $attributes );
$is_link = isset( $attributes['isLink'] ) && $attributes['isLink'];
$size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
$post_title = trim( strip_tags( get_the_title( $post_ID ) ) );
$attr = get_block_core_post_featured_image_border_attributes( $attributes );
$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );

if ( $is_link ) {
$attr['alt'] = $post_title;
Expand All @@ -36,13 +37,22 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
if ( $is_link ) {
$link_target = $attributes['linkTarget'];
$rel = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
$featured_image = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $link_target ), $rel, $featured_image );
$featured_image = sprintf(
'<a href="%1$s" target="%2$s" %3$s>%4$s%5$s</a>',
get_the_permalink( $post_ID ),
esc_attr( $link_target ),
$rel,
$featured_image,
$overlay_markup
);
} else {
$featured_image = $featured_image . $overlay_markup;
}

$has_width = ! empty( $attributes['width'] );
$has_height = ! empty( $attributes['height'] );
if ( ! $has_height && ! $has_width ) {
return "<figure $wrapper_attributes>$featured_image</figure>";
return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
}

if ( $has_width ) {
Expand All @@ -57,7 +67,78 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
$featured_image = str_replace( 'src=', 'style="' . esc_attr( $image_styles ) . '" src=', $featured_image );
}

return "<figure $wrapper_attributes>$featured_image</figure>";
return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
}

/**
* Generate markup for the HTML element that will be used for the overlay.
*
* @param array $attributes Block attributes.
*
* @return string HTML markup in string format.
*/
function get_block_core_post_featured_image_overlay_element_markup( $attributes ) {
$has_dim_background = isset( $attributes['dimRatio'] ) && $attributes['dimRatio'];
$has_gradient = isset( $attributes['gradient'] ) && $attributes['gradient'];
$has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
$has_solid_overlay = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
$has_custom_overlay = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
$class_names = array(
'wp-block-post-featured-image__overlay',
);
$styles_properties = array();

if ( ! $has_dim_background ) {
return '';
}

// Generate required classes for the element.
if ( $has_dim_background ) {
$class_names[] = 'has-background-dim';
$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
}

if ( $has_solid_overlay ) {
$class_names[] = "has-{$attributes['overlayColor']}-background-color";
}

if ( $has_gradient || $has_custom_gradient ) {
$class_names[] = 'has-background-gradient';
}

if ( $has_gradient ) {
$class_names[] = "has-{$attributes['gradient']}-gradient-background";
}

// Generate required CSS properties and their values.
if ( ! empty( $attributes['style']['border']['radius'] ) ) {
$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
}

if ( ! empty( $attributes['style']['border']['width'] ) ) {
$styles_properties['border-width'] = $attributes['style']['border']['width'];
}

if ( $has_custom_gradient ) {
$styles_properties['background-image'] = $attributes['customGradient'];
}

if ( $has_custom_overlay ) {
$styles_properties['background-color'] = $attributes['customOverlayColor'];
}

$styles = '';

foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {
$styles .= "{$style_attribute}: $style_attribute_value; ";
}

return sprintf(
'<span class="%s" style="%s" aria-hidden="true"></span>',
esc_attr( implode( ' ', $class_names ) ),
esc_attr( trim( $styles ) )
);

}

/**
Expand Down
Loading

0 comments on commit e291564

Please sign in to comment.