From b071c754edcc7777a164f8d2dd46f63eb7e4b503 Mon Sep 17 00:00:00 2001 From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com> Date: Mon, 21 Oct 2024 19:26:46 +0530 Subject: [PATCH] Cover Block: Add Image Resolution options (#62926) * Add attribute for resolution of image in cover block * Add resolutionTool into cover block for background images * Relocate the resolution control in inspector control * Add image size class to image on save * Retain previous value of sizeSlug attribute on image change * Update url based on selected image size * Update setting panel using ToolsPanel component * Remove clear media button from setting panel * Remove Resolution Tool component from dimension panel * Update role of setting panel in unit test * Remove unneccessory code * Remove typecasting for boolean variable and update default value * Set default value to full size for media size slug attribute * clear whitespace and typos * Set default value for image resolution * Fix empty image sizes condition Unlinked contributors: Bladed3d. Co-authored-by: akasunil Co-authored-by: t-hamano Co-authored-by: aaronrobertshaw Co-authored-by: richtabor Co-authored-by: andrewserong Co-authored-by: codebymikey --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/cover/block.json | 3 ++ packages/block-library/src/cover/constants.js | 1 + .../block-library/src/cover/edit/index.js | 19 ++++++++ .../src/cover/edit/inspector-controls.js | 47 ++++++++++++++++++- packages/block-library/src/cover/save.js | 2 + 6 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 packages/block-library/src/cover/constants.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 66f713b3aa40fc..dd49d156857249 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -246,7 +246,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres - **Name:** core/cover - **Category:** media - **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage +- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, sizeSlug, tagName, templateLock, url, useFeaturedImage ## Details diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 0ce80ca8d424f4..733dfc12fc9bca 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -78,6 +78,9 @@ "tagName": { "type": "string", "default": "div" + }, + "sizeSlug": { + "type": "string" } }, "usesContext": [ "postId", "postType" ], diff --git a/packages/block-library/src/cover/constants.js b/packages/block-library/src/cover/constants.js new file mode 100644 index 00000000000000..984193dbfb376a --- /dev/null +++ b/packages/block-library/src/cover/constants.js @@ -0,0 +1 @@ +export const DEFAULT_MEDIA_SIZE_SLUG = 'full'; diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 804027708881b6..88a47f566987c6 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -47,6 +47,7 @@ import { DEFAULT_BACKGROUND_COLOR, DEFAULT_OVERLAY_COLOR, } from './color-utils'; +import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants'; function getInnerBlocksTemplate( attributes ) { return [ @@ -100,6 +101,7 @@ function CoverEdit( { templateLock, tagName: TagName = 'div', isUserOverlayColor, + sizeSlug, } = attributes; const [ featuredImage ] = useEntityProp( @@ -108,6 +110,7 @@ function CoverEdit( { 'featured_media', postId ); + const { getSettings } = useSelect( blockEditorStore ); const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); @@ -199,6 +202,22 @@ function CoverEdit( { averageBackgroundColor ); + if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes.id ) { + const { imageDefaultSize } = getSettings(); + + // Try to use the previous selected image size if it's available + // otherwise try the default image size or fallback to full size. + if ( sizeSlug && newMedia?.sizes?.[ sizeSlug ] ) { + mediaAttributes.sizeSlug = sizeSlug; + mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url; + } else if ( newMedia?.sizes?.[ imageDefaultSize ] ) { + mediaAttributes.sizeSlug = imageDefaultSize; + mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url; + } else { + mediaAttributes.sizeSlug = DEFAULT_MEDIA_SIZE_SLUG; + } + } + setAttributes( { ...mediaAttributes, focalPoint: undefined, diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 2ed9b055d49f35..c0807869ee1a5c 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -19,12 +19,15 @@ import { useInstanceId } from '@wordpress/compose'; import { InspectorControls, useSettings, + store as blockEditorStore, __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseGradient, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -32,8 +35,9 @@ import { __ } from '@wordpress/i18n'; import { COVER_MIN_HEIGHT, mediaPosition } from '../shared'; import { unlock } from '../../lock-unlock'; import { useToolsPanelDropdownMenuProps } from '../../utils/hooks'; +import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants'; -const { cleanEmptyObject } = unlock( blockEditorPrivateApis ); +const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis ); function CoverHeightInput( { onChange, @@ -95,6 +99,7 @@ export default function CoverInspectorControls( { } ) { const { useFeaturedImage, + id, dimRatio, focalPoint, hasParallax, @@ -112,7 +117,38 @@ export default function CoverInspectorControls( { overlayColor, } = currentSettings; + const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG; + const { gradientValue, setGradient } = __experimentalUseGradient(); + const { getSettings } = useSelect( blockEditorStore ); + + const imageSizes = getSettings()?.imageSizes; + + const image = useSelect( + ( select ) => + id && isImageBackground + ? select( coreStore ).getMedia( id, { context: 'view' } ) + : null, + [ id, isImageBackground ] + ); + + function updateImage( newSizeSlug ) { + const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url; + if ( ! newUrl ) { + return null; + } + + setAttributes( { + url: newUrl, + sizeSlug: newSizeSlug, + } ); + } + + const imageSizeOptions = imageSizes + ?.filter( + ( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url + ) + ?.map( ( { name, slug } ) => ( { value: slug, label: name } ) ); const toggleParallax = () => { setAttributes( { @@ -175,6 +211,7 @@ export default function CoverInspectorControls( { focalPoint: undefined, isRepeated: false, alt: '', + sizeSlug: undefined, } ); } } dropdownMenuProps={ dropdownMenuProps } @@ -284,6 +321,14 @@ export default function CoverInspectorControls( { /> ) } + { ! useFeaturedImage && !! imageSizeOptions?.length && ( + + ) } ) } diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js index f4ee486fb99a7c..325ddf2b741f98 100644 --- a/packages/block-library/src/cover/save.js +++ b/packages/block-library/src/cover/save.js @@ -45,6 +45,7 @@ export default function save( { attributes } ) { minHeight: minHeightProp, minHeightUnit, tagName: Tag, + sizeSlug, } = attributes; const overlayColorClass = getColorClassName( 'background-color', @@ -95,6 +96,7 @@ export default function save( { attributes } ) { 'wp-block-cover__image-background', id ? `wp-image-${ id }` : null, { + [ `size-${ sizeSlug }` ]: sizeSlug, 'has-parallax': hasParallax, 'is-repeated': isRepeated, }