From bf8838b505aca6bda0b97f8c1c28ba078fe1e067 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 20 Sep 2022 17:29:26 +1000 Subject: [PATCH 1/6] Add overlay to post featured image border selectors --- packages/block-library/src/post-featured-image/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index 1072c7576d645..40f51cffa06e7 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -62,7 +62,7 @@ "color": true, "radius": true, "width": true, - "__experimentalSelector": "img, .block-editor-media-placeholder", + "__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay", "__experimentalSkipSerialization": true, "__experimentalDefaultControls": { "color": true, From 85f38a0909c2dfb0f4347b403c776344264198b3 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 21 Sep 2022 13:51:18 +1000 Subject: [PATCH 2/6] Fix borders on overlays for individual blocks --- .../src/post-featured-image/index.php | 42 ++++++++----------- 1 file changed, 18 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index 552811f6d2f21..40a7f41cd78ac 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -76,16 +76,25 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes $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(); + $class_names = array( 'wp-block-post-featured-image__overlay' ); + $styles = array(); if ( ! $has_dim_background ) { return ''; } - // Generate required classes for the element. + // Apply border classes and styles. + $border_attributes = get_block_core_post_featured_image_border_attributes( $attributes ); + + if ( ! empty( $border_attributes['class'] ) ) { + $class_names[] = $border_attributes['class']; + } + + if ( ! empty( $border_attributes['style'] ) ) { + $styles[] = $border_attributes['style']; + } + + // Apply overlay and gradient classes. if ( $has_dim_background ) { $class_names[] = 'has-background-dim'; $class_names[] = "has-background-dim-{$attributes['dimRatio']}"; @@ -103,35 +112,20 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes $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']; - } - + // Apply background styles. if ( $has_custom_gradient ) { - $styles_properties['background-image'] = $attributes['customGradient']; + $styles[] = sprintf( 'background-image: %s;', $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; "; + $styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] ); } return sprintf( '', esc_attr( implode( ' ', $class_names ) ), - esc_attr( trim( $styles ) ) + esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) ) ); - } /** From b388f346b3515c9dde4fd94b78b825b8102669d7 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 21 Sep 2022 14:20:28 +1000 Subject: [PATCH 3/6] Provide a fallback border style --- packages/block-library/src/post-featured-image/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss index d4cfbc7273638..fbe1ae75fad90 100644 --- a/packages/block-library/src/post-featured-image/style.scss +++ b/packages/block-library/src/post-featured-image/style.scss @@ -12,6 +12,11 @@ box-sizing: border-box; } + :where(img), + :where(.wp-block-post-featured-image__overlay) { + border-style: solid; + } + &.alignwide img, &.alignfull img { width: 100%; From 1d9bd9ab035e8ad4d99d9588af8bed42c364935b Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 21 Sep 2022 14:21:17 +1000 Subject: [PATCH 4/6] Make the editor markup match frontend Overlay was being rendered in editor regardless of if there should be one and it didn't have border classes applied to the overlay. --- .../src/post-featured-image/overlay.js | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js index 572cef64801e7..f577978b9a3c9 100644 --- a/packages/block-library/src/post-featured-image/overlay.js +++ b/packages/block-library/src/post-featured-image/overlay.js @@ -47,20 +47,23 @@ const Overlay = ( { return ( <> -