Post Featured Image: Add border support applied to inner img (#42847)

WordPress · Aug 19, 2022 · 26fea84 · 26fea84
1 parent dfe8ab0
commit 26fea84
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 19 deletions.
diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
@@ -42,6 +42,18 @@
 			"text": false,
 			"background": false
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"width": true,
+			"__experimentalSelector": "img, .block-editor-media-placeholder",
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"width": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -18,6 +23,7 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
@@ -30,17 +36,6 @@ import DimensionControls from './dimension-controls';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration={ true }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
-
 function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
 		media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
@@ -95,6 +90,22 @@ function PostFeaturedImageDisplay( {
 	const blockProps = useBlockProps( {
 		style: { width, height },
 	} );
+	const borderProps = useBorderProps( attributes );
+
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder
+				className={ classnames(
+					'block-editor-media-placeholder',
+					borderProps.className
+				) }
+				withIllustration={ true }
+				style={ borderProps.style }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
 
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
@@ -165,6 +176,11 @@ function PostFeaturedImageDisplay( {
 	}
 
 	const label = __( 'Add a featured image' );
+	const imageStyles = {
+		...borderProps.style,
+		height,
+		objectFit: height && scale,
+	};
 
 	if ( ! featuredImage ) {
 		image = (
@@ -196,6 +212,7 @@ function PostFeaturedImageDisplay( {
 			placeholder()
 		) : (
 			<img
+				className={ borderProps.className }
 				src={ mediaUrl }
 				alt={
 					media.alt_text
@@ -206,7 +223,7 @@ function PostFeaturedImageDisplay( {
 						  )
 						: __( 'Featured image' )
 				}
-				style={ { height, objectFit: height && scale } }
+				style={ imageStyles }
 			/>
 		);
 	}
@@ -237,8 +254,21 @@ function PostFeaturedImageDisplay( {
 
 export default function PostFeaturedImageEdit( props ) {
 	const blockProps = useBlockProps();
+	const borderProps = useBorderProps( props.attributes );
+
 	if ( ! props.context?.postId ) {
-		return <div { ...blockProps }>{ placeholder() }</div>;
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					className={ classnames(
+						'block-editor-media-placeholder',
+						borderProps.className
+					) }
+					withIllustration={ true }
+					style={ borderProps.style }
+				/>
+			</div>
+		);
 	}
 	return <PostFeaturedImageDisplay { ...props } />;
 }
diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
@@ -35,6 +35,41 @@
 
 		// 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.

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
@@ -19,10 +19,15 @@ 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           = $is_link ? array( 'alt' => $post_title ) : array();
+	$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 );
+
+	if ( $is_link ) {
+		$attr['alt'] = $post_title;
+	}
+
 	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
 	if ( ! $featured_image ) {
 		return '';
@@ -55,6 +60,54 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	return "<figure $wrapper_attributes>$featured_image</figure>";
 }
 
+/**
+ * Generates class names and styles to apply the border support styles for
+ * the Post Featured Image block.
+ *
+ * @param array $attributes The block attributes.
+ * @return array The border-related classnames and styles for the block.
+ */
+function get_block_core_post_featured_image_border_attributes( $attributes ) {
+	$border_styles = array();
+	$sides         = array( 'top', 'right', 'bottom', 'left' );
+
+	// Border radius.
+	if ( isset( $attributes['style']['border']['radius'] ) ) {
+		$border_styles['radius'] = $attributes['style']['border']['radius'];
+	}
+
+	// Border style.
+	if ( isset( $attributes['style']['border']['style'] ) ) {
+		$border_styles['style'] = $attributes['style']['border']['style'];
+	}
+
+	// Border width.
+	if ( isset( $attributes['style']['border']['width'] ) ) {
+		$border_styles['width'] = $attributes['style']['border']['width'];
+	}
+
+	// Border color.
+	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
+	$custom_color           = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+
+	// Individual border styles e.g. top, left etc.
+	foreach ( $sides as $side ) {
+		$border                 = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+		$border_styles[ $side ] = array(
+			'color' => isset( $border['color'] ) ? $border['color'] : null,
+			'style' => isset( $border['style'] ) ? $border['style'] : null,
+			'width' => isset( $border['width'] ) ? $border['width'] : null,
+		);
+	}
+
+	$border_attributes = gutenberg_style_engine_get_styles( array( 'border' => $border_styles ) );
+	return array(
+		'class' => $border_attributes['classnames'],
+		'style' => $border_attributes['css'],
+	);
+}
+
 /**
  * Registers the `core/post-featured-image` block on the server.
  */

diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
@@ -9,6 +9,7 @@
 		width: 100%;
 		height: auto;
 		vertical-align: bottom;
+		box-sizing: border-box;
 	}
 
 	&.alignwide img,

diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
@@ -232,6 +232,4 @@
 	height: 100%;
 	stroke: currentColor;
 	stroke-dasharray: 3;
-	border-width: inherit;
-	border-style: inherit;
 }