From a7507d8d674a54c49aa7487b48d0afd5d76a621a Mon Sep 17 00:00:00 2001 From: scruffian Date: Mon, 27 Nov 2023 16:18:40 -0500 Subject: [PATCH 1/8] Post Featured Image: Add a useFirstImageFromPost attribute --- docs/reference-guides/core-blocks.md | 2 +- .../src/post-featured-image/block.json | 4 +++ .../src/post-featured-image/edit.js | 32 ++++++++++++++++++- .../src/post-featured-image/index.php | 17 ++++++++++ 4 files changed, 53 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index b091f9d143b7ad..1da60d60aff08d 100644 --- 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 index 34e3bd6b2325fa..4c4ba6919eaff6 100644 --- 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 index 843f1cf66cdfcd..e9019c2cf0ebe5 100644 --- 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( { /> ) } + + setAttributes( { + useFirstImageFromPost: value, + } ) + } + checked={ useFirstImageFromPost } + /> diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index 4a7aa2f3d8ab94..7312b889d0bf22 100644 --- 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( '' ); + $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'] ) . '"' : ''; From 099f556b5adce5c4aa33f3ec5cf9359b239b71a4 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 14:30:44 +0000 Subject: [PATCH 2/8] Add a comment and remove the toggle --- .../block-library/src/post-featured-image/edit.js | 10 ---------- .../block-library/src/post-featured-image/index.php | 13 +++++++++++++ 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index e9019c2cf0ebe5..9ce33a8e14a981 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -209,16 +209,6 @@ export default function PostFeaturedImageEdit( { /> ) } - - setAttributes( { - useFirstImageFromPost: value, - } ) - } - checked={ useFirstImageFromPost } - /> diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index 7312b889d0bf22..cde2aa018d3b21 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -60,6 +60,19 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) $content_post = get_post( $post_ID ); $content = $content_post->post_content; $processor = new WP_HTML_Tag_Processor( $content ); + /* + * Transfer the image tag from the post into a new text snippet. + * Because the HTML API doesn't currently expose a way to extract + * HTML substrings this is necessary as a workaround. Of note, this + * is different than directly extracting the IMG tag: + * - If there are duplicate attributes in the source there will only be one in the output. + * - If there are single-quoted or unquoted attributes they will be double-quoted in the output. + * - If there are named character references in the attribute values they may be replaced with their direct code points. E.g. `…` becomes `…`. + * In the future there will likely be a mechanism to copy snippets of HTML from + * one document into another, via the HTML Processor's `get_outer_html()` or + * equivalent. When that happens it would be appropriate to replace this custom + * code with that canonical code. + */ if ( $processor->next_tag( 'img' ) ) { $tag_html = new WP_HTML_Tag_Processor( '' ); $tag_html->next_tag(); From 5e72cff9ed5ed40a17ba535252f51dc85bc7d5cf Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 19:07:11 +0000 Subject: [PATCH 3/8] PHPCS --- packages/block-library/src/post-featured-image/index.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index cde2aa018d3b21..9a1fd315bb9524 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -58,8 +58,9 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) // 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 ); + $content = $content_post->post_content; + $processor = new WP_HTML_Tag_Processor( $content ); + /* * Transfer the image tag from the post into a new text snippet. * Because the HTML API doesn't currently expose a way to extract From c2215e79d6d8b7985015120b6d80e492aaaaf788 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 8 Dec 2023 17:45:48 +0000 Subject: [PATCH 4/8] only load image if there is post content --- .../src/post-featured-image/edit.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 9ce33a8e14a981..86c7e51000149b 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -82,14 +82,15 @@ export default function PostFeaturedImageEdit( { '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; + + if ( ! featuredImage && useFirstImageFromPost && postContent ) { + const blocks = parse( postContent ); + const imageBlock = blocks.find( + ( block ) => block.name === 'core/image' + ); + if ( imageBlock?.attributes?.id ) { + featuredImage = imageBlock.attributes.id; + } } const { media, postType, postPermalink } = useSelect( From dfbac67bd9914b3775389dd363fe867884c31e9e Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 8 Dec 2023 17:56:42 +0000 Subject: [PATCH 5/8] use a regex to improve performance --- .../block-library/src/post-featured-image/edit.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 86c7e51000149b..d82e1e5b1a77a6 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -84,10 +84,17 @@ export default function PostFeaturedImageEdit( { ); if ( ! featuredImage && useFirstImageFromPost && postContent ) { - const blocks = parse( postContent ); - const imageBlock = blocks.find( - ( block ) => block.name === 'core/image' + const firstImageCloser = //.exec( + postContent ); + const content = firstImageCloser + ? postContent.slice( + 0, + firstImageCloser.index + firstImageCloser[ 0 ].length + ) + : ''; + const blocks = parse( content ); + const imageBlock = blocks.find( ( { name } ) => name === 'core/image' ); if ( imageBlock?.attributes?.id ) { featuredImage = imageBlock.attributes.id; } From 959e7fe4d621b5b3c28ec58ab4f38cdab08b9f4d Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 8 Dec 2023 19:35:23 +0000 Subject: [PATCH 6/8] don't update the value that comes from the useSelect --- .../src/post-featured-image/edit.js | 36 ++++++++++++------- 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index d82e1e5b1a77a6..be8380851ff569 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -26,6 +26,7 @@ import { store as blockEditorStore, __experimentalUseBorderProps as useBorderProps, } from '@wordpress/block-editor'; +import { useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { upload } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; @@ -67,7 +68,8 @@ export default function PostFeaturedImageEdit( { linkTarget, useFirstImageFromPost, } = attributes; - let [ featuredImage, setFeaturedImage ] = useEntityProp( + + const [ storedFeaturedImage, setFeaturedImage ] = useEntityProp( 'postType', postTypeSlug, 'featured_media', @@ -83,22 +85,32 @@ export default function PostFeaturedImageEdit( { postId ); - if ( ! featuredImage && useFirstImageFromPost && postContent ) { + const featuredImage = useMemo( () => { + if ( storedFeaturedImage ) { + return storedFeaturedImage; + } + + if ( ! useFirstImageFromPost ) { + return; + } + const firstImageCloser = //.exec( postContent ); - const content = firstImageCloser - ? postContent.slice( - 0, - firstImageCloser.index + firstImageCloser[ 0 ].length - ) - : ''; + + if ( ! firstImageCloser ) { + return; + } + + const content = postContent.slice( + 0, + firstImageCloser.index + firstImageCloser[ 0 ].length + ); + const blocks = parse( content ); const imageBlock = blocks.find( ( { name } ) => name === 'core/image' ); - if ( imageBlock?.attributes?.id ) { - featuredImage = imageBlock.attributes.id; - } - } + return imageBlock?.attributes?.id; + }, [ storedFeaturedImage, useFirstImageFromPost, postContent ] ); const { media, postType, postPermalink } = useSelect( ( select ) => { From afd950bc3a63cae4d3ddfbca4e2392b90873b1ef Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Dec 2023 22:20:24 +0000 Subject: [PATCH 7/8] update snapshots --- .../integration/fixtures/blocks/core__post-featured-image.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/integration/fixtures/blocks/core__post-featured-image.json b/test/integration/fixtures/blocks/core__post-featured-image.json index 158007533a3f2b..dec6e14712a3a2 100644 --- a/test/integration/fixtures/blocks/core__post-featured-image.json +++ b/test/integration/fixtures/blocks/core__post-featured-image.json @@ -7,7 +7,8 @@ "scale": "cover", "rel": "", "linkTarget": "_self", - "dimRatio": 0 + "dimRatio": 0, + "useFirstImageFromPost": false }, "innerBlocks": [] } From df6a00c769dc74aef4b840bead21c9d81a492fd9 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 4 Jan 2024 17:28:03 +0000 Subject: [PATCH 8/8] simplify regex --- .../src/post-featured-image/edit.js | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index be8380851ff569..26f3439964f90e 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -6,7 +6,6 @@ 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 { @@ -94,22 +93,14 @@ export default function PostFeaturedImageEdit( { return; } - const firstImageCloser = //.exec( - postContent - ); - - if ( ! firstImageCloser ) { - return; - } - - const content = postContent.slice( - 0, - firstImageCloser.index + firstImageCloser[ 0 ].length - ); - - const blocks = parse( content ); - const imageBlock = blocks.find( ( { name } ) => name === 'core/image' ); - return imageBlock?.attributes?.id; + const imageOpener = + /).)*)?}\s+)?-->/.exec( + postContent + ); + const imageId = + imageOpener?.groups?.attrs && + JSON.parse( imageOpener.groups.attrs )?.id; + return imageId; }, [ storedFeaturedImage, useFirstImageFromPost, postContent ] ); const { media, postType, postPermalink } = useSelect(