Add caption to post featured image

WordPress · Jan 4, 2023 · 557bb56 · 557bb56 · github-actions · Jan 4, 2023
1 parent 2addaea
commit 557bb56
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 5 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -555,7 +555,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:** customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
+-	**Attributes:** caption, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
 
 ## Post Navigation Link
 

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
@@ -48,6 +48,9 @@
 		},
 		"customGradient": {
 			"type": "string"
+		},
+		"caption": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -15,6 +15,7 @@ import {
 	Placeholder,
 	Button,
 	TextControl,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -23,12 +24,16 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
+	RichText,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
-import { upload } from '@wordpress/icons';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { upload, caption as captionIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-
+import { useEffect, useState, useCallback } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -47,10 +52,12 @@ function PostFeaturedImageDisplay( {
 	clientId,
 	attributes,
 	setAttributes,
+	isSelected,
+	insertBlocksAfter,
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
+	const { isLink, height, width, scale, sizeSlug, rel, linkTarget, caption } =
 		attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
@@ -59,6 +66,32 @@ function PostFeaturedImageDisplay( {
 		postId
 	);
 
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
 	const { media, postType } = useSelect(
 		( select ) => {
 			const { getMedia, getPostType } = select( coreStore );
@@ -121,6 +154,23 @@ function PostFeaturedImageDisplay( {
 
 	const controls = (
 		<>
+			<BlockControls group="block">
+				<ToolbarButton
+					onClick={ () => {
+						setShowCaption( ! showCaption );
+						if ( showCaption && caption ) {
+							setAttributes( { caption: undefined } );
+						}
+					} }
+					icon={ captionIcon }
+					isPressed={ showCaption }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
+				/>
+			</BlockControls>
 			<DimensionControls
 				clientId={ clientId }
 				attributes={ attributes }
@@ -262,6 +312,28 @@ function PostFeaturedImageDisplay( {
 					setAttributes={ setAttributes }
 					clientId={ clientId }
 				/>
+				{ showCaption &&
+					( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+							aria-label={ __( 'Image caption text' ) }
+							ref={ captionRef }
+							placeholder={ __( 'Add caption' ) }
+							value={ caption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+							}
+						/>
+					) }
 			</figure>
 		</>
 	);

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
@@ -29,6 +29,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
 	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
+	$caption        = isset( $attributes['caption'] ) ? $attributes['caption'] : '';
 
 	if ( $is_link ) {
 		$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
@@ -61,11 +62,16 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = $featured_image . $overlay_markup;
 	}
 
+	$image_caption = '';
+	if ( $caption ) {
+		$image_caption = '<figcaption class="wp-element-caption">' . $caption . '</figcaption>';
+	}
+
 	$wrapper_attributes = empty( $attributes['width'] )
 		? get_block_wrapper_attributes()
 		: get_block_wrapper_attributes( array( 'style' => "width:{$attributes['width']};" ) );
 
-	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
+	return "<figure {$wrapper_attributes}>{$featured_image}{$image_caption}</figure>";
 }
 
 /**