Post Featured Image: Add a useFirstImageFromPost attribute

WordPress · Nov 27, 2023 · 5ea0213 · 5ea0213
1 parent 500c9e4
commit 5ea0213
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 2 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -630,7 +630,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:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
+-	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, 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
@@ -51,6 +51,10 @@
 		},
 		"customGradient": {
 			"type": "string"
+		},
+		"useFirstImageFromPost": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"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
@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { parse } from '@wordpress/blocks';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -64,14 +65,33 @@ export default function PostFeaturedImageEdit( {
 		sizeSlug,
 		rel,
 		linkTarget,
+		useFirstImageFromPost,
 	} = attributes;
-	const [ featuredImage, setFeaturedImage ] = useEntityProp(
+	let [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
 		'featured_media',
 		postId
 	);
 
+	// Fallback to post content if no featured image is set.
+	// This is needed for the "Use first image from post" option.
+	const [ postContent ] = useEntityProp(
+		'postType',
+		postTypeSlug,
+		'content',
+		postId
+	);
+	const blocks = parse( postContent );
+	const imageBlock = blocks.find( ( block ) => block.name === 'core/image' );
+	if (
+		! featuredImage &&
+		useFirstImageFromPost &&
+		imageBlock?.attributes?.id
+	) {
+		featuredImage = imageBlock.attributes.id;
+	}
+
 	const { media, postType, postPermalink } = useSelect(
 		( select ) => {
 			const { getMedia, getPostType, getEditedEntityRecord } =
@@ -189,6 +209,16 @@ export default function PostFeaturedImageEdit( {
 							/>
 						</>
 					) }
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Use first image from post' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								useFirstImageFromPost: value,
+							} )
+						}
+						checked={ useFirstImageFromPost }
+					/>
 				</PanelBody>
 			</InspectorControls>
 		</>

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
@@ -54,9 +54,26 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 
 	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
+
+	// Get the first image from the post.
+	if ( $attributes['useFirstImageFromPost'] && ! $featured_image ) {
+		$content_post = get_post( $post_ID );
+		$content = $content_post->post_content;
+		$processor = new WP_HTML_Tag_Processor( $content );
+		if ( $processor->next_tag( 'img' ) ) {
+			$tag_html = new WP_HTML_Tag_Processor( '<img>' );
+			$tag_html->next_tag();
+			foreach ( $processor->get_attribute_names_with_prefix( '' ) as $name ) {
+				$tag_html->set_attribute( $name, $processor->get_attribute( $name ) );
+			}
+			$featured_image = $tag_html->get_updated_html();
+		}
+	}
+
 	if ( ! $featured_image ) {
 		return '';
 	}
+
 	if ( $is_link ) {
 		$link_target    = $attributes['linkTarget'];
 		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';