From 4289a754763fdf25038698066fcb5e4bd4834a71 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 14 Jun 2023 14:18:37 +0200 Subject: [PATCH 01/23] Add featured image to Media & Text block --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/media-text/block.json | 5 +++ packages/block-library/src/media-text/edit.js | 36 +++++++++++++++++-- .../src/media-text/media-container.js | 8 ++++- 4 files changed, 47 insertions(+), 4 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index c05cdd3eb009b..89946a8007645 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -434,7 +434,7 @@ Set media and words side-by-side for a richer layout. ([Source](https://github.c - **Name:** core/media-text - **Category:** media - **Supports:** align (full, wide), anchor, color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** align, allowedBlocks, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, verticalAlignment +- **Attributes:** align, allowedBlocks, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, useFeaturedImage, verticalAlignment ## Unsupported diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index cdeb4ce13e8f5..35fcc993879e5 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -92,8 +92,13 @@ }, "allowedBlocks": { "type": "array" + }, + "useFeaturedImage": { + "type": "boolean", + "default": false } }, + "usesContext": [ "postId", "postType" ], "supports": { "anchor": true, "align": [ "wide", "full" ], diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index f3baeb8c1756b..3228adcdaadb9 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -31,7 +31,7 @@ import { } from '@wordpress/components'; import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob'; import { pullLeft, pullRight } from '@wordpress/icons'; -import { store as coreStore } from '@wordpress/core-data'; +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -127,7 +127,12 @@ function attributesFromMedia( { }; } -function MediaTextEdit( { attributes, isSelected, setAttributes } ) { +function MediaTextEdit( { + attributes, + isSelected, + setAttributes, + context: { postId, postType }, +} ) { const { focalPoint, href, @@ -145,9 +150,35 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { rel, verticalAlignment, allowedBlocks, + useFeaturedImage, } = attributes; const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG; + const [ featuredImage ] = useEntityProp( + 'postType', + postType, + 'featured_media', + postId + ); + + const featuredImageMedia = useSelect( + ( select ) => + featuredImage && + select( coreStore ).getMedia( featuredImage, { context: 'view' } ), + [ featuredImage ] + ); + + const toggleUseFeaturedImage = () => { + setAttributes( { + imageFill: false, + mediaType: 'image', + mediaId: featuredImage, + mediaUrl: featuredImageMedia.source_url, + mediaAlt: featuredImageMedia?.alt_text, + useFeaturedImage: ! useFeaturedImage, + } ); + }; + const { imageSizes, image } = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); @@ -370,6 +401,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { commitWidthChange={ commitWidthChange } ref={ refMediaContainer } enableResize={ blockEditingMode === 'default' } + toggleUseFeaturedImage={ toggleUseFeaturedImage } { ...{ focalPoint, imageFill, diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js index 951c0013b76eb..d4610f4dd2540 100644 --- a/packages/block-library/src/media-text/media-container.js +++ b/packages/block-library/src/media-text/media-container.js @@ -70,7 +70,12 @@ function ToolbarEditButton( { mediaId, mediaUrl, onSelectMedia } ) { ); } -function PlaceholderContainer( { className, mediaUrl, onSelectMedia } ) { +function PlaceholderContainer( { + className, + mediaUrl, + onSelectMedia, + toggleUseFeaturedImage, +} ) { const { createErrorNotice } = useDispatch( noticesStore ); const onUploadError = ( message ) => { @@ -86,6 +91,7 @@ function PlaceholderContainer( { className, mediaUrl, onSelectMedia } ) { className={ className } onSelect={ onSelectMedia } accept="image/*,video/*" + onToggleFeaturedImage={ toggleUseFeaturedImage } allowedTypes={ ALLOWED_MEDIA_TYPES } onError={ onUploadError } disableMediaButtons={ mediaUrl } From 1ff701f501f4b32c5ac54fbec03ea3440ec89d1b Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 15 Jun 2023 09:45:22 +0200 Subject: [PATCH 02/23] Try adding the featured image option to the toolbar (replace flow) --- packages/block-library/src/media-text/edit.js | 1 + .../src/media-text/media-container.js | 14 +++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 3228adcdaadb9..cf681b0c4cd2f 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -413,6 +413,7 @@ function MediaTextEdit( { mediaType, mediaUrl, mediaWidth, + useFeaturedImage, } } /> { mediaPosition !== 'right' &&
} diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js index d4610f4dd2540..e569eff4def4b 100644 --- a/packages/block-library/src/media-text/media-container.js +++ b/packages/block-library/src/media-text/media-container.js @@ -56,7 +56,13 @@ const ResizableBoxContainer = forwardRef( } ); -function ToolbarEditButton( { mediaId, mediaUrl, onSelectMedia } ) { +function ToolbarEditButton( { + mediaId, + mediaUrl, + onSelectMedia, + toggleUseFeaturedImage, + useFeaturedImage, +} ) { return ( ); @@ -116,6 +124,8 @@ function MediaContainer( props, ref ) { onSelectMedia, onWidthChange, enableResize, + toggleUseFeaturedImage, + useFeaturedImage, } = props; const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl ); @@ -173,6 +183,8 @@ function MediaContainer( props, ref ) { onSelectMedia={ onSelectMedia } mediaUrl={ mediaUrl } mediaId={ mediaId } + toggleUseFeaturedImage={ toggleUseFeaturedImage } + useFeaturedImage={ useFeaturedImage } /> { ( mediaTypeRenderers[ mediaType ] || noop )() } { isTemporaryMedia && } From 9505f7dc31e761bd5c120fe1fa9577b5d62fdf5b Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 15 Jun 2023 09:57:21 +0200 Subject: [PATCH 03/23] fix JS warning in templates where there is no featured image. --- packages/block-library/src/media-text/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index cf681b0c4cd2f..50a632d173c60 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -173,7 +173,7 @@ function MediaTextEdit( { imageFill: false, mediaType: 'image', mediaId: featuredImage, - mediaUrl: featuredImageMedia.source_url, + mediaUrl: featuredImageMedia?.source_url, mediaAlt: featuredImageMedia?.alt_text, useFeaturedImage: ! useFeaturedImage, } ); From f1de86ec78da56bd130a4581f4422a315c01bb30 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 16 Jun 2023 10:30:33 +0200 Subject: [PATCH 04/23] Add deprecation, update fixtures --- .../src/media-text/deprecated.js | 131 +++++++++++++++++- .../fixtures/blocks/core__media-text.json | 3 +- .../core__media-text__image-alt-no-align.json | 3 +- 3 files changed, 132 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js index d03659022b95b..744ed19e68c46 100644 --- a/packages/block-library/src/media-text/deprecated.js +++ b/packages/block-library/src/media-text/deprecated.js @@ -18,6 +18,7 @@ import { compose } from '@wordpress/compose'; * Internal dependencies */ import { DEFAULT_MEDIA_SIZE_SLUG } from './constants'; +import { imageFillStyles } from './media-container'; const v1ToV5ImageFillStyles = ( url, focalPoint ) => { return url @@ -198,6 +199,17 @@ const v6Attributes = { }, }; +const v7Attributes = { + ...v6Attributes, + align: { + type: 'string', + default: 'none', + }, + allowedBlocks: { + type: 'array', + }, +}; + const v4ToV5Supports = { anchor: true, align: [ 'wide', 'full' ], @@ -208,7 +220,7 @@ const v4ToV5Supports = { }, }; -const v6Supports = { +const v6ToV7Supports = { ...v4ToV5Supports, color: { gradients: true, @@ -237,11 +249,124 @@ const v6Supports = { }, }; +// Version without featured image option. +const v7 = { + attributes: v7Attributes, + supports: v6ToV7Supports, + save( { attributes } ) { + const { + isStackedOnMobile, + mediaAlt, + mediaPosition, + mediaType, + mediaUrl, + mediaWidth, + mediaId, + verticalAlignment, + imageFill, + focalPoint, + linkClass, + href, + linkTarget, + rel, + } = attributes; + const mediaSizeSlug = + attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG; + const newRel = ! rel ? undefined : rel; + + const imageClasses = classnames( { + [ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image', + [ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image', + } ); + + let image = ( + { + ); + + if ( href ) { + image = ( + + { image } + + ); + } + + const mediaTypeRenders = { + image: () => image, + video: () =>