From 05c852683fbaeb72b06a7b8cd5f4a38c500b8850 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 27 Jun 2024 18:59:21 +0530 Subject: [PATCH 01/16] Add attribute for resolution of image in cover block --- packages/block-library/src/cover/block.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 0ce80ca8d424f..733dfc12fc9bc 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" ], From c686246df4610230f1fcbfa1ea944bf5e2c4cf0c Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 27 Jun 2024 19:00:25 +0530 Subject: [PATCH 02/16] Add resolutionTool into cover block for background images --- .../src/cover/edit/inspector-controls.js | 58 ++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 0b05a004cd06e..e673b35b4f915 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -21,12 +21,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 @@ -34,7 +37,7 @@ import { __ } from '@wordpress/i18n'; import { COVER_MIN_HEIGHT, mediaPosition } from '../shared'; import { unlock } from '../../lock-unlock'; -const { cleanEmptyObject } = unlock( blockEditorPrivateApis ); +const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis ); function CoverHeightInput( { onChange, @@ -97,6 +100,7 @@ export default function CoverInspectorControls( { } ) { const { useFeaturedImage, + id, dimRatio, focalPoint, hasParallax, @@ -105,6 +109,7 @@ export default function CoverInspectorControls( { minHeightUnit, alt, tagName, + sizeSlug, } = attributes; const { isVideoBackground, @@ -115,6 +120,23 @@ export default function CoverInspectorControls( { } = currentSettings; 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 ] + ); + + const imageSizeOptions = imageSizes + .filter( + ( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url + ) + .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); const toggleParallax = () => { setAttributes( { @@ -163,8 +185,42 @@ export default function CoverInspectorControls( { ), }; + function updateImage( newSizeSlug ) { + const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url; + if ( ! newUrl ) { + return null; + } + + setAttributes( { + url: newUrl, + sizeSlug: newSizeSlug, + } ); + } + return ( <> + + { !! imageSizeOptions.length && ( + !! sizeSlug } + label={ __( 'Resolution' ) } + onDeselect={ () => + setAttributes( { sizeSlug: undefined } ) + } + resetAllFilter={ () => ( { + sizeSlug: undefined, + } ) } + isShownByDefault + panelId={ clientId } + > + + + ) } + { !! url && ( From 6212d272a63c8d39088efdc5ab8cb6b0a762fbf6 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 2 Jul 2024 12:10:46 +0530 Subject: [PATCH 03/16] Relocate the resolution control in inspector control --- docs/reference-guides/core-blocks.md | 2 +- .../src/cover/edit/inspector-controls.js | 66 +++++++++---------- 2 files changed, 33 insertions(+), 35 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 77e466db8e1f9..2ec6897acedc4 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/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index e673b35b4f915..24b30dca52197 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -132,6 +132,18 @@ export default function CoverInspectorControls( { [ 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 @@ -185,42 +197,8 @@ export default function CoverInspectorControls( { ), }; - function updateImage( newSizeSlug ) { - const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url; - if ( ! newUrl ) { - return null; - } - - setAttributes( { - url: newUrl, - sizeSlug: newSizeSlug, - } ); - } - return ( <> - - { !! imageSizeOptions.length && ( - !! sizeSlug } - label={ __( 'Resolution' ) } - onDeselect={ () => - setAttributes( { sizeSlug: undefined } ) - } - resetAllFilter={ () => ( { - sizeSlug: undefined, - } ) } - isShownByDefault - panelId={ clientId } - > - - - ) } - { !! url && ( @@ -354,6 +332,26 @@ export default function CoverInspectorControls( { ) } + { ! useFeaturedImage && !! imageSizeOptions.length && ( + !! sizeSlug } + label={ __( 'Resolution' ) } + onDeselect={ () => + setAttributes( { sizeSlug: undefined } ) + } + resetAllFilter={ () => ( { + sizeSlug: undefined, + } ) } + isShownByDefault + panelId={ clientId } + > + + + ) } !! minHeight } label={ __( 'Minimum height' ) } From 615bb8c88dd7a7baa720a8d1b2cae62f8b080bef Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 2 Jul 2024 12:11:19 +0530 Subject: [PATCH 04/16] Add image size class to image on save --- packages/block-library/src/cover/save.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js index f4ee486fb99a7..325ddf2b741f9 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, } From 63e1c17c5fcb11e5099c9bd2440bea02103b0e8c Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 2 Jul 2024 16:43:23 +0530 Subject: [PATCH 05/16] Retain previous value of sizeSlug attribute on image change --- packages/block-library/src/cover/edit/inspector-controls.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 24b30dca52197..4f66ab7b4490a 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -336,12 +336,6 @@ export default function CoverInspectorControls( { !! sizeSlug } label={ __( 'Resolution' ) } - onDeselect={ () => - setAttributes( { sizeSlug: undefined } ) - } - resetAllFilter={ () => ( { - sizeSlug: undefined, - } ) } isShownByDefault panelId={ clientId } > From 4da9dac351394b2c199ccc568ad670ab9777fbae Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 2 Jul 2024 16:44:15 +0530 Subject: [PATCH 06/16] Update url based on selected image size --- packages/block-library/src/cover/edit/index.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 458f279e8748b..98bd96f52849b 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -99,6 +99,7 @@ function CoverEdit( { templateLock, tagName: TagName = 'div', isUserOverlayColor, + sizeSlug, } = attributes; const [ featuredImage ] = useEntityProp( @@ -107,6 +108,7 @@ function CoverEdit( { 'featured_media', postId ); + const { getSettings } = useSelect( blockEditorStore ); const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); @@ -195,6 +197,22 @@ function CoverEdit( { averageBackgroundColor ); + if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes.id ) { + const { imageDefaultSize } = getSettings(); + + // Try to use the previous selected image size if its available + // otherwise try the default image size or fallback 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 = 'full'; + } + } + setAttributes( { ...mediaAttributes, focalPoint: undefined, From 211a5f2893e4dd861b3c45f38659a7a7416a8603 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 22 Aug 2024 20:15:00 +0530 Subject: [PATCH 07/16] Update setting panel using ToolsPanel component --- .../block-library/src/cover/edit/index.js | 4 +- .../src/cover/edit/inspector-controls.js | 168 +++++++++++++----- 2 files changed, 122 insertions(+), 50 deletions(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 98bd96f52849b..4bdb31647f668 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -204,10 +204,10 @@ function CoverEdit( { // otherwise try the default image size or fallback full size. if ( sizeSlug && newMedia?.sizes?.[ sizeSlug ] ) { mediaAttributes.sizeSlug = sizeSlug; - mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ].url; + mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url; } else if ( newMedia?.sizes?.[ imageDefaultSize ] ) { mediaAttributes.sizeSlug = imageDefaultSize; - mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ].url; + mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url; } else { mediaAttributes.sizeSlug = 'full'; } diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index e1f0fd6d058d3..3b9721cf50f84 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -6,13 +6,12 @@ import { Button, ExternalLink, FocalPointPicker, - PanelBody, - PanelRow, RangeControl, TextareaControl, ToggleControl, SelectControl, __experimentalUseCustomUnits as useCustomUnits, + __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalUnitControl as UnitControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, @@ -36,6 +35,7 @@ import { store as coreStore } from '@wordpress/core-data'; */ import { COVER_MIN_HEIGHT, mediaPosition } from '../shared'; import { unlock } from '../../lock-unlock'; +import { useToolsPanelDropdownMenuProps } from '../../utils/hooks'; const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis ); @@ -197,72 +197,137 @@ export default function CoverInspectorControls( { ), }; + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + + const flag = true; return ( <> - { !! url && ( - + { flag && !! url && ( + { + setAttributes( { + hasParallax: undefined, + focalPoint: undefined, + isRepeated: false, + alt: '', + sizeSlug: undefined, + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > { isImageBackground && ( <> - + isShownByDefault + hasValue={ () => !! hasParallax } + onDeselect={ () => + setAttributes( { + hasParallax: undefined, + focalPoint: undefined, + } ) + } + > + + - + isShownByDefault + hasValue={ () => !! isRepeated } + onDeselect={ () => + setAttributes( { + isRepeated: false, + } ) + } + > + + ) } + { showFocalPointPicker && ( - + isShownByDefault + hasValue={ () => !! focalPoint } + onDeselect={ () => setAttributes( { - focalPoint: newFocalPoint, + focalPoint: undefined, } ) } - /> + > + + setAttributes( { + focalPoint: newFocalPoint, + } ) + } + /> + ) } + { ! useFeaturedImage && url && ! isVideoBackground && ( - - setAttributes( { alt: newAlt } ) + isShownByDefault + hasValue={ () => !! alt } + onDeselect={ () => + setAttributes( { alt: '' } ) } - help={ - <> - + > + + setAttributes( { alt: newAlt } ) + } + help={ + <> + + { __( + 'Describe the purpose of the image.' + ) } + +
{ __( - 'Describe the purpose of the image.' + 'Leave empty if decorative.' ) } - -
- { __( 'Leave empty if decorative.' ) } - - } - /> + + } + /> + ) } - + !! url } + isShownByDefault + > - - + + { ! useFeaturedImage && !! imageSizeOptions.length && ( + + ) } + ) } { colorGradientSettings.hasColorsOrGradients && ( From 7a50d210d20d58099b60306ad727e91bc0574d81 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 22 Aug 2024 22:43:01 +0530 Subject: [PATCH 08/16] Remove clear media button from setting panel --- .../src/cover/edit/inspector-controls.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 3b9721cf50f84..657d7bb54a4f1 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -324,19 +324,6 @@ export default function CoverInspectorControls( { /> ) } - !! url } - isShownByDefault - > - - { ! useFeaturedImage && !! imageSizeOptions.length && ( Date: Sat, 24 Aug 2024 21:39:58 +0530 Subject: [PATCH 09/16] Remove Resolution Tool component from dimension panel --- .../src/cover/edit/inspector-controls.js | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 5a445ed603511..b09c2db5ac30f 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -388,20 +388,6 @@ export default function CoverInspectorControls( { ) } - { ! useFeaturedImage && !! imageSizeOptions.length && ( - !! sizeSlug } - label={ __( 'Resolution' ) } - isShownByDefault - panelId={ clientId } - > - - - ) } !! minHeight } From be4df9603b05079778b5c0b4f1692fad3bfe3628 Mon Sep 17 00:00:00 2001 From: akasunil Date: Sat, 24 Aug 2024 21:58:43 +0530 Subject: [PATCH 10/16] Update role of setting panel in unit test --- packages/block-library/src/cover/test/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index 97c52a47ec4d7..348cd88edfd96 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -190,7 +190,7 @@ describe( 'Cover block', () => { test( 'does not display media settings panel if url is not set', async () => { await setup(); expect( - screen.queryByRole( 'button', { + screen.queryByRole( 'heading', { name: 'Settings', } ) ).not.toBeInTheDocument(); @@ -202,7 +202,7 @@ describe( 'Cover block', () => { await selectBlock( 'Block: Cover' ); expect( - screen.getByRole( 'button', { + screen.getByRole( 'heading', { name: 'Settings', } ) ).toBeInTheDocument(); From 726f2865cfe71ec36bde343629458b55829b1156 Mon Sep 17 00:00:00 2001 From: akasunil Date: Sun, 25 Aug 2024 11:06:53 +0530 Subject: [PATCH 11/16] Remove unneccessory code --- packages/block-library/src/cover/edit/inspector-controls.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index b09c2db5ac30f..9526686b12c52 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -197,11 +197,10 @@ export default function CoverInspectorControls( { const dropdownMenuProps = useToolsPanelDropdownMenuProps(); - const flag = true; return ( <> - { flag && !! url && ( + { !! url && ( { From d46c666ea2534f3078b2861a7924499cffaf8eab Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 13 Sep 2024 13:54:59 +0530 Subject: [PATCH 12/16] Remove typecasting for boolean variable and update default value --- .../block-library/src/cover/edit/inspector-controls.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 9526686b12c52..ac49c559bd582 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -205,7 +205,7 @@ export default function CoverInspectorControls( { label={ __( 'Settings' ) } resetAll={ () => { setAttributes( { - hasParallax: undefined, + hasParallax: false, focalPoint: undefined, isRepeated: false, alt: '', @@ -219,10 +219,10 @@ export default function CoverInspectorControls( { !! hasParallax } + hasValue={ () => hasParallax } onDeselect={ () => setAttributes( { - hasParallax: undefined, + hasParallax: false, focalPoint: undefined, } ) } @@ -238,7 +238,7 @@ export default function CoverInspectorControls( { !! isRepeated } + hasValue={ () => isRepeated } onDeselect={ () => setAttributes( { isRepeated: false, From 18c3e9396737c8e24e96ddbca543e30561dc1d96 Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 16 Sep 2024 22:31:14 +0530 Subject: [PATCH 13/16] Set default value to full size for media size slug attribute --- packages/block-library/src/cover/constants.js | 1 + packages/block-library/src/cover/edit/index.js | 3 ++- packages/block-library/src/cover/edit/inspector-controls.js | 4 +++- 3 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 packages/block-library/src/cover/constants.js diff --git a/packages/block-library/src/cover/constants.js b/packages/block-library/src/cover/constants.js new file mode 100644 index 0000000000000..984193dbfb376 --- /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 a4d72eebf0cc2..f37d06a4cfef4 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -46,6 +46,7 @@ import { DEFAULT_BACKGROUND_COLOR, DEFAULT_OVERLAY_COLOR, } from './color-utils'; +import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants'; function getInnerBlocksTemplate( attributes ) { return [ @@ -212,7 +213,7 @@ function CoverEdit( { mediaAttributes.sizeSlug = imageDefaultSize; mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url; } else { - mediaAttributes.sizeSlug = 'full'; + mediaAttributes.sizeSlug = DEFAULT_MEDIA_SIZE_SLUG; } } diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index ac49c559bd582..17d2ed538e43a 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -35,6 +35,7 @@ import { store as coreStore } from '@wordpress/core-data'; 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, ResolutionTool } = unlock( blockEditorPrivateApis ); @@ -107,7 +108,6 @@ export default function CoverInspectorControls( { minHeightUnit, alt, tagName, - sizeSlug, } = attributes; const { isVideoBackground, @@ -117,6 +117,8 @@ export default function CoverInspectorControls( { overlayColor, } = currentSettings; + const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG; + const { gradientValue, setGradient } = __experimentalUseGradient(); const { getSettings } = useSelect( blockEditorStore ); From 049a25810bfda943d5d65da26bbac501745944e7 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 18 Oct 2024 15:52:27 +0530 Subject: [PATCH 14/16] clear whitespace and typos --- packages/block-library/src/cover/edit/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 65ed3677178fc..633e0672e237c 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -205,8 +205,8 @@ function CoverEdit( { if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes.id ) { const { imageDefaultSize } = getSettings(); - // Try to use the previous selected image size if its available - // otherwise try the default image size or fallback full size. + // 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; @@ -255,7 +255,6 @@ function CoverEdit( { isDark: newIsDark, } ); }; - const onSetOverlayColor = async ( newOverlayColor ) => { const averageBackgroundColor = await getMediaColor( url ); const newIsDark = compositeIsDark( From 8592fe7a2822c6a452dc4c0d533247982e48ea88 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 18 Oct 2024 18:47:47 +0530 Subject: [PATCH 15/16] Set default value for image resolution --- packages/block-library/src/cover/edit/index.js | 1 + packages/block-library/src/cover/edit/inspector-controls.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 633e0672e237c..88a47f566987c 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -255,6 +255,7 @@ function CoverEdit( { isDark: newIsDark, } ); }; + const onSetOverlayColor = async ( newOverlayColor ) => { const averageBackgroundColor = await getMediaColor( url ); const newIsDark = compositeIsDark( diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 17d2ed538e43a..a1f6f79efc83c 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -256,7 +256,6 @@ export default function CoverInspectorControls( { ) } - { showFocalPointPicker && ( ) } From 7b18c657b689d1d37ef8d38a948ea735f5fc7b77 Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 21 Oct 2024 11:53:34 +0530 Subject: [PATCH 16/16] Fix empty image sizes condition --- .../block-library/src/cover/edit/inspector-controls.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index a1f6f79efc83c..c0807869ee1a5 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -122,7 +122,7 @@ export default function CoverInspectorControls( { const { gradientValue, setGradient } = __experimentalUseGradient(); const { getSettings } = useSelect( blockEditorStore ); - const imageSizes = getSettings().imageSizes; + const imageSizes = getSettings()?.imageSizes; const image = useSelect( ( select ) => @@ -145,10 +145,10 @@ export default function CoverInspectorControls( { } const imageSizeOptions = imageSizes - .filter( + ?.filter( ( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url ) - .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); + ?.map( ( { name, slug } ) => ( { value: slug, label: name } ) ); const toggleParallax = () => { setAttributes( { @@ -321,7 +321,7 @@ export default function CoverInspectorControls( { /> ) } - { ! useFeaturedImage && !! imageSizeOptions.length && ( + { ! useFeaturedImage && !! imageSizeOptions?.length && (