diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index 1072c7576d6454..40f51cffa06e75 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, diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss index c52d14f44f7a6c..37c29160055d85 100644 --- a/packages/block-library/src/post-featured-image/editor.scss +++ b/packages/block-library/src/post-featured-image/editor.scss @@ -6,87 +6,85 @@ backdrop-filter: none; // Removes background blur so the overlay's actual color is visible. } - &.wp-block-post-featured-image { - // Style the placeholder. - .wp-block-post-featured-image__placeholder, - .components-placeholder { - justify-content: center; - align-items: center; - padding: 0; + // 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; - } + // Hide the upload button, as it's also available in the media library. + .components-form-file-upload { + display: none; + } - // 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; + // Style the upload 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; - > svg { - color: inherit; - } + > svg { + color: inherit; } + } - // 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; - } + // Show default placeholder height when not resized. + min-height: 200px; - &: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; - } + // 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; } - // 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%; + &: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%; } } diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index 552811f6d2f21d..40a7f41cd78ac3 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 ) ) ) ); - } /** diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js index 572cef64801e76..f577978b9a3c93 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 ( <> -