Skip to content

Commit

Permalink
Featured Image block: Use resolution tool component (#68471)
Browse files Browse the repository at this point in the history 
* 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 <sunil25393@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
  • Loading branch information
@akasunil @Mamaduka
3 people authored Feb 4, 2025
1 parent 2670a56 commit af2915f
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 46 deletions.
45 changes: 2 additions & 43 deletions packages/block-library/src/post-featured-image/dimension-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
<>
Expand All @@ -45,7 +33,6 @@ const SCALE_OPTIONS = (
);

const DEFAULT_SCALE = 'cover';
const DEFAULT_SIZE = 'full';

const scaleHelp = {
cover: __(
Expand All @@ -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(
Expand All @@ -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 );
Expand Down Expand Up @@ -230,21 +204,6 @@ const DimensionControls = ( {
</ToggleGroupControl>
</ToolsPanelItem>
) }
{ !! imageSizeOptions.length && (
<ResolutionTool
panelId={ clientId }
value={ sizeSlug }
defaultValue={ DEFAULT_SIZE }
options={ imageSizeOptions }
onChange={ ( nextSizeSlug ) =>
setAttributes( { sizeSlug: nextSizeSlug } )
}
isShownByDefault={ false }
resetAllFilter={ () => ( {
sizeSlug: DEFAULT_SIZE,
} ) }
/>
) }
</>
);
};
Expand Down
42 changes: 39 additions & 3 deletions packages/block-library/src/post-featured-image/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
<ResolutionTool
value={ value }
defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
options={ imageSizeOptions }
onChange={ onChange }
/>
);
}

Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -291,6 +320,13 @@ export default function PostFeaturedImageEdit( {
/>
</ToolsPanelItem>
) }
<FeaturedImageResolutionTool
image={ media }
value={ sizeSlug }
onChange={ ( nextSizeSlug ) =>
setAttributes( { sizeSlug: nextSizeSlug } )
}
/>
</ToolsPanel>
</InspectorControls>
</>
Expand Down

1 comment on commit af2915f

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in af2915f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/13135119838
📝 Reported issues:

Please sign in to comment.