From af2915fae5cd9d0e50719e7e8887794bd2be8dbb Mon Sep 17 00:00:00 2001 From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com> Date: Tue, 4 Feb 2025 17:39:57 +0530 Subject: [PATCH 01/24] Featured Image block: Use resolution tool component (#68471) * Removed custom dropdown and implemented resolution tool component * Remove constant file and use inline constant * Extract resolution tool logic to separate component Co-authored-by: akasunil Co-authored-by: Mamaduka --- .../post-featured-image/dimension-controls.js | 45 +------------------ .../src/post-featured-image/edit.js | 42 +++++++++++++++-- 2 files changed, 41 insertions(+), 46 deletions(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 9a71a96b2db846..4bc343635f2f93 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -10,19 +10,7 @@ import { __experimentalUseCustomUnits as useCustomUnits, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; -import { - useSettings, - privateApis as blockEditorPrivateApis, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { unlock } from '../lock-unlock'; - -const { ResolutionTool } = unlock( blockEditorPrivateApis ); +import { useSettings } from '@wordpress/block-editor'; const SCALE_OPTIONS = ( <> @@ -45,7 +33,6 @@ const SCALE_OPTIONS = ( ); const DEFAULT_SCALE = 'cover'; -const DEFAULT_SIZE = 'full'; const scaleHelp = { cover: __( @@ -61,9 +48,8 @@ const scaleHelp = { const DimensionControls = ( { clientId, - attributes: { aspectRatio, width, height, scale, sizeSlug }, + attributes: { aspectRatio, width, height, scale }, setAttributes, - media, } ) => { const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] = useSettings( @@ -75,18 +61,6 @@ const DimensionControls = ( { const units = useCustomUnits( { availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ], } ); - const imageSizes = useSelect( - ( select ) => select( blockEditorStore ).getSettings().imageSizes, - [] - ); - const imageSizeOptions = imageSizes - .filter( ( { slug } ) => { - return media?.media_details?.sizes?.[ slug ]?.source_url; - } ) - .map( ( { name, slug } ) => ( { - value: slug, - label: name, - } ) ); const onDimensionChange = ( dimension, nextValue ) => { const parsedValue = parseFloat( nextValue ); @@ -230,21 +204,6 @@ const DimensionControls = ( { ) } - { !! imageSizeOptions.length && ( - - setAttributes( { sizeSlug: nextSizeSlug } ) - } - isShownByDefault={ false } - resetAllFilter={ () => ( { - sizeSlug: DEFAULT_SIZE, - } ) } - /> - ) } ); }; diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 6afe2c29e25045..9fd64b29908e42 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -27,6 +27,8 @@ import { __experimentalUseBorderProps as useBorderProps, __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, useBlockEditingMode, + privateApis as blockEditorPrivateApis, + store as blockEditorStore, } from '@wordpress/block-editor'; import { useMemo, useEffect, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; @@ -40,12 +42,37 @@ import DimensionControls from './dimension-controls'; import OverlayControls from './overlay-controls'; import Overlay from './overlay'; import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; +import { unlock } from '../lock-unlock'; const ALLOWED_MEDIA_TYPES = [ 'image' ]; +const { ResolutionTool } = unlock( blockEditorPrivateApis ); +const DEFAULT_MEDIA_SIZE_SLUG = 'full'; + +function FeaturedImageResolutionTool( { image, value, onChange } ) { + const { imageSizes } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return { + imageSizes: getSettings().imageSizes, + }; + }, [] ); + + if ( ! imageSizes?.length ) { + return null; + } + + const imageSizeOptions = imageSizes + .filter( + ( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url + ) + .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); -function getMediaSourceUrlBySizeSlug( media, slug ) { return ( - media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url + ); } @@ -125,7 +152,9 @@ export default function PostFeaturedImageEdit( { [ featuredImage, postTypeSlug, postId ] ); - const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug ); + const mediaUrl = + media?.media_details?.sizes?.[ sizeSlug ]?.source_url || + media?.source_url; const blockProps = useBlockProps( { style: { width, height, aspectRatio }, @@ -291,6 +320,13 @@ export default function PostFeaturedImageEdit( { /> ) } + + setAttributes( { sizeSlug: nextSizeSlug } ) + } + /> From b0e328f34efabd1097d55aed32772f8d2594d388 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 5 Feb 2025 06:58:33 +0000 Subject: [PATCH 02/24] chore(release): publish - @wordpress/block-directory@5.17.1 - @wordpress/edit-post@8.17.1 - @wordpress/edit-site@6.17.1 - @wordpress/editor@14.17.1 --- package-lock.json | 8 ++++---- packages/block-directory/package.json | 2 +- packages/edit-post/package.json | 2 +- packages/edit-site/package.json | 2 +- packages/editor/package.json | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8c8ec35e2c3a99..b7cf99a110d796 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49960,7 +49960,7 @@ }, "packages/block-directory": { "name": "@wordpress/block-directory", - "version": "5.17.0", + "version": "5.17.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -51024,7 +51024,7 @@ }, "packages/edit-post": { "name": "@wordpress/edit-post", - "version": "8.17.0", + "version": "8.17.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -51071,7 +51071,7 @@ }, "packages/edit-site": { "name": "@wordpress/edit-site", - "version": "6.17.0", + "version": "6.17.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -51177,7 +51177,7 @@ }, "packages/editor": { "name": "@wordpress/editor", - "version": "14.17.0", + "version": "14.17.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index b3af341dba0f37..f7750c2e49f170 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-directory", - "version": "5.17.0", + "version": "5.17.1", "description": "Extend editor with block directory features to search, download and install blocks.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index ab9096f89903a2..0403f1b952eef9 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/edit-post", - "version": "8.17.0", + "version": "8.17.1", "description": "Edit Post module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index e830ee3066c0ce..637032e303e9e8 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/edit-site", - "version": "6.17.0", + "version": "6.17.1", "description": "Edit Site Page module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/editor/package.json b/packages/editor/package.json index bfa645fa88a74b..3b40e5965b6a33 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/editor", - "version": "14.17.0", + "version": "14.17.1", "description": "Enhanced block editor for WordPress posts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From 589e763287a8cc9a2750196f81f4cffcc6558121 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Wed, 5 Feb 2025 00:39:55 -0700 Subject: [PATCH 03/24] ComboboxControl: Add an `isLoading` prop to show a loading spinner (#68990) Co-authored-by: adamsilverstein Co-authored-by: Mamaduka Co-authored-by: ciampo --- packages/components/CHANGELOG.md | 2 ++ packages/components/src/combobox-control/README.md | 10 +++++++++- packages/components/src/combobox-control/index.tsx | 5 ++++- packages/components/src/combobox-control/style.scss | 5 ++++- packages/components/src/combobox-control/types.ts | 7 +++++++ 5 files changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c487b0a17a288d..a36773a8e16d66 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- `ComboboxControl`: Add an `isLoading` prop to show a loading spinner ([#68990](https://github.com/WordPress/gutenberg/pull/68990)) + ## 29.3.0 (2025-01-29) ### Enhancements diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md index 4089cf9c56e9b5..7a11c8b95fe2e9 100644 --- a/packages/components/src/combobox-control/README.md +++ b/packages/components/src/combobox-control/README.md @@ -39,6 +39,7 @@ function MyComboboxControl() { label="Font Size" value={ fontSize } onChange={ setFontSize } + isLoading={ isLoading } options={ filteredOptions } onFilterValueChange={ ( inputValue ) => setFilteredOptions( @@ -112,13 +113,20 @@ If the control is clicked, the dropdown will expand regardless of this prop. - Required: No - Default: `true` -### placeholder +#### placeholder If passed, the combobox input will show a placeholder string if no values are present. - Type: `string` - Required: No +#### isLoading + +Show a spinner (and hide the suggestions dropdown) while data about the matching suggestions (ie the `options` prop) is loading + +- Type: `Boolean` +- Required: No + #### __experimentalRenderItem Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop). diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx index 28510c8653d02e..9c6bd2a4d75dd2 100644 --- a/packages/components/src/combobox-control/index.tsx +++ b/packages/components/src/combobox-control/index.tsx @@ -35,6 +35,7 @@ import type { TokenInputProps } from '../form-token-field/types'; import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'; import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events'; import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; +import Spinner from '../spinner'; const noop = () => {}; @@ -126,6 +127,7 @@ function ComboboxControl( props: ComboboxControlProps ) { help, allowReset = true, className, + isLoading = false, messages = { selected: __( 'Item selected.' ), }, @@ -362,6 +364,7 @@ function ComboboxControl( props: ComboboxControlProps ) { onChange={ onInputChange } /> + { isLoading && } { allowReset && (