From c6952d98ca0208973628b3cc5757eb8f1d7a2d38 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 1 Apr 2022 18:31:58 +0300 Subject: [PATCH 1/2] adds featured image support to the cover block --- docs/reference-guides/core-blocks.md | 2 +- lib/blocks.php | 1 + packages/block-library/src/cover/block.json | 5 + packages/block-library/src/cover/edit.js | 107 +++++++++++++----- packages/block-library/src/cover/index.php | 85 ++++++++++++++ packages/block-library/src/cover/save.js | 32 +++--- .../fixtures/blocks/core__cover.json | 1 + .../blocks/core__cover__gradient-custom.json | 1 + .../blocks/core__cover__gradient-image.json | 1 + .../blocks/core__cover__gradient-video.json | 1 + .../blocks/core__cover__gradient.json | 1 + .../blocks/core__cover__solid-color.json | 1 + .../blocks/core__cover__video-overlay.json | 1 + .../fixtures/blocks/core__cover__video.json | 1 + 14 files changed, 196 insertions(+), 44 deletions(-) create mode 100644 packages/block-library/src/cover/index.php diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index ffdba40b5f1625..d394b0b1366c5d 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -222,7 +222,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https - **Name:** core/cover - **Category:** media - **Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (padding), ~~html~~ -- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url +- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url, useFeaturedImage ## Embed diff --git a/lib/blocks.php b/lib/blocks.php index 5ff1cc5d907281..320d50bf509500 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -57,6 +57,7 @@ function gutenberg_reregister_core_block_types() { 'block.php' => 'core/block', 'calendar.php' => 'core/calendar', 'categories.php' => 'core/categories', + 'cover.php' => 'core/cover', 'comment-author-avatar.php' => 'core/comment-author-avatar', 'comment-author-name.php' => 'core/comment-author-name', 'comment-content.php' => 'core/comment-content', diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 852b9ab30d1c9b..f908f544fb2974 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -10,6 +10,10 @@ "url": { "type": "string" }, + "useFeaturedImage": { + "type": "boolean", + "default": false + }, "id": { "type": "number" }, @@ -72,6 +76,7 @@ "enum": [ "all", "insert", false ] } }, + "usesContext": [ "postId", "postType" ], "supports": { "anchor": true, "align": true, diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index a921d225d9cb26..18083909c7ea91 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -9,6 +9,7 @@ import namesPlugin from 'colord/plugins/names'; /** * WordPress dependencies */ +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { Fragment, useEffect, @@ -28,6 +29,7 @@ import { Spinner, TextareaControl, ToggleControl, + ToolbarButton, __experimentalUseCustomUnits as useCustomUnits, __experimentalBoxControl as BoxControl, __experimentalToolsPanelItem as ToolsPanelItem, @@ -54,7 +56,7 @@ import { } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; -import { cover as icon } from '@wordpress/icons'; +import { postFeaturedImage, cover as icon } from '@wordpress/icons'; import { isBlobURL } from '@wordpress/blob'; import { store as noticesStore } from '@wordpress/notices'; @@ -298,11 +300,12 @@ function CoverEdit( { setAttributes, setOverlayColor, toggleSelection, + context: { postId, postType }, } ) { const { contentPosition, id, - backgroundType, + useFeaturedImage, dimRatio, focalPoint, hasParallax, @@ -311,11 +314,36 @@ function CoverEdit( { minHeight, minHeightUnit, style: styleAttribute, - url, alt, allowedBlocks, templateLock, } = attributes; + + const [ featuredImage ] = useEntityProp( + 'postType', + postType, + 'featured_media', + postId + ); + + const media = useSelect( + ( select ) => + featuredImage && + select( coreStore ).getMedia( featuredImage, { context: 'view' } ), + [ featuredImage ] + ); + const mediaUrl = media?.source_url; + + // instead of destructuring the attributes + // we define the url and background type + // depending on the value of the useFeaturedImage flag + // to preview in edit the dynamic featured image + const url = useFeaturedImage && mediaUrl ? mediaUrl : attributes.url; + const backgroundType = + useFeaturedImage && mediaUrl + ? IMAGE_BACKGROUND_TYPE + : attributes.backgroundType; + const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); @@ -374,6 +402,13 @@ function CoverEdit( { } ); }; + const toggleUseFeaturedImage = () => { + setAttributes( { + useFeaturedImage: ! useFeaturedImage, + dimRatio: dimRatio === 100 ? 50 : dimRatio, + } ); + }; + const onUploadError = ( message ) => { createErrorNotice( Array.isArray( message ) ? message[ 2 ] : message, { type: 'snackbar', @@ -458,14 +493,22 @@ function CoverEdit( { /> - + { ! useFeaturedImage && ( + + ) } { !! url && ( @@ -499,27 +542,32 @@ function CoverEdit( { } /> ) } - { url && isImageBackground && isImgElement && ( - - setAttributes( { alt: newAlt } ) - } - help={ - <> - + { ! useFeaturedImage && + url && + isImageBackground && + isImgElement && ( + + setAttributes( { alt: newAlt } ) + } + help={ + <> + + { __( + 'Describe the purpose of the image' + ) } + { __( - 'Describe the purpose of the image' + 'Leave empty if the image is purely decorative.' ) } - - { __( - 'Leave empty if the image is purely decorative.' - ) } - - } - /> - ) } + + } + /> + ) }