Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Featured Image block: Use resolution tool component #68471

Merged
merged 5 commits into from
Feb 4, 2025
Merged

Featured Image block: Use resolution tool component #68471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
796ee2b
Removed custom dropdown and implemented resolution tool component
akasunil Dec 20, 2024
adac6e8
Resolved conflict and sync with trunk
akasunil Jan 3, 2025
fb48881
Merge branch 'trunk' of personal.github.com:WordPress/gutenberg into …
akasunil Feb 4, 2025
7f7acf0
Remove constant file and use inline constant
akasunil Feb 4, 2025
1e20c26
Extract resolution tool logic to separate component
akasunil Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 2 additions & 43 deletions packages/block-library/src/post-featured-image/dimension-controls.js
View file
Open in desktop
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
Open in desktop
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
Loading