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

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
+35 −50
Open

Featured Image block: Use resolution tool component #68471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 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
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
1 change: 1 addition & 0 deletions packages/block-library/src/post-featured-image/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
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
39 changes: 32 additions & 7 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,14 +42,11 @@ import DimensionControls from './dimension-controls';
import OverlayControls from './overlay-controls';
import Overlay from './overlay';
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
import { unlock } from '../lock-unlock';
import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
Copy link
Member

Choose a reason for hiding this comment

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

Suggestion: There's no reason to extract constant into a separate file if it's only used once. Let's just inline it.


const ALLOWED_MEDIA_TYPES = [ 'image' ];

function getMediaSourceUrlBySizeSlug( media, slug ) {
return (
media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
);
}
Comment on lines -46 to -50
Copy link
Member

Choose a reason for hiding this comment

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

Why remove this helper?

Copy link
Member Author

Choose a reason for hiding this comment

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

Its used only once, so don't see need for separate function.

const { ResolutionTool } = unlock( blockEditorPrivateApis );

const disabledClickProps = {
onClick: ( event ) => event.preventDefault(),
Expand Down Expand Up @@ -130,7 +129,23 @@ export default function PostFeaturedImageEdit( {
[ featuredImage, postTypeSlug, postId ]
);

const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
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 mediaUrl =
media?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
media?.source_url;

const blockProps = useBlockProps( {
style: { width, height, aspectRatio },
Expand Down Expand Up @@ -296,6 +311,16 @@ export default function PostFeaturedImageEdit( {
/>
</ToolsPanelItem>
) }
{ !! imageSizeOptions?.length && (
<ResolutionTool
value={ sizeSlug }
options={ imageSizeOptions }
onChange={ ( nextSizeSlug ) =>
setAttributes( { sizeSlug: nextSizeSlug } )
}
defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
/>
) }
</ToolsPanel>
</InspectorControls>
</>
Expand Down
Loading