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

Jump to bottom

Fix: Refactor Featured Image Block to use aspectRatio block support #61485

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

Fix: Refactor Featured Image Block to use aspectRatio block support #61485

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
6532a41
Add the aspectRatio support from the block supports instead of the at…
hbhalodia May 8, 2024
bfab8ac
Rename blockSupportAspectRatio to aspectRatio
hbhalodia May 8, 2024
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
4 changes: 2 additions & 2 deletions docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,8 +642,8 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber

- **Name:** core/post-featured-image
- **Category:** theme
- **Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), filter (duotone), interactivity (clientNavigation), shadow (), spacing (margin, padding), ~~html~~
- **Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, width
- **Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), dimensions (aspectRatio), filter (duotone), interactivity (clientNavigation), shadow (), spacing (margin, padding), ~~html~~
- **Attributes:** customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, width

## Post Navigation Link

Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/post-featured-image/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@
"type": "boolean",
"default": false
},
"aspectRatio": {
"type": "string"
},
"width": {
"type": "string"
},
Expand Down Expand Up @@ -64,6 +61,9 @@
"text": false,
"background": false
},
"dimensions": {
"aspectRatio": true
},
"__experimentalBorder": {
"color": true,
"radius": true,
Expand Down
56 changes: 6 additions & 50 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 @@ -53,17 +53,12 @@ const scaleHelp = {

const DimensionControls = ( {
clientId,
attributes: { aspectRatio, width, height, scale, sizeSlug },
attributes,
attributes: { width, height, scale, sizeSlug },
setAttributes,
media,
} ) => {
const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
useSettings(
'spacing.units',
'dimensions.aspectRatios.default',
'dimensions.aspectRatios.theme',
'dimensions.defaultAspectRatios'
);
const [ availableUnits ] = useSettings( 'spacing.units' );
const units = useCustomUnits( {
availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
} );
Expand All @@ -80,6 +75,9 @@ const DimensionControls = ( {
label: name,
} ) );

// Get the block Supports aspect ratio.
const aspectRatio = attributes?.style?.dimensions?.aspectRatio;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

const aspectRatio = attributes?.style?.dimensions?.aspectRatio;

Above line can be changed to something like,

const blockSupportAspectRatio = attributes?.style?.dimensions?.aspectRatio || aspectRatio;

Here we should not remove the attribute from the block itself, we just keep it to get the value which was stored previously?

But it would have issue like, blockSupport aspectRatio dropdown would not show the selected aspectRatio from the atttribute.


const onDimensionChange = ( dimension, nextValue ) => {
const parsedValue = parseFloat( nextValue );
/**
Expand All @@ -99,50 +97,8 @@ const DimensionControls = ( {
const showScaleControl =
height || ( aspectRatio && aspectRatio !== 'auto' );

const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
label: name,
value: ratio,
} ) );

const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
label: name,
value: ratio,
} ) );

const aspectRatioOptions = [
{
label: _x(
'Original',
'Aspect ratio option for dimensions control'
),
value: 'auto',
},
...( showDefaultRatios ? defaultOptions : [] ),
...( themeOptions ? themeOptions : [] ),
];

return (
<>
<ToolsPanelItem
hasValue={ () => !! aspectRatio }
label={ __( 'Aspect ratio' ) }
onDeselect={ () => setAttributes( { aspectRatio: undefined } ) }
resetAllFilter={ () => ( {
aspectRatio: undefined,
} ) }
isShownByDefault
panelId={ clientId }
>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Aspect ratio' ) }
value={ aspectRatio }
options={ aspectRatioOptions }
onChange={ ( nextAspectRatio ) =>
setAttributes( { aspectRatio: nextAspectRatio } )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
className="single-column"
hasValue={ () => !! height }
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -62,7 +62,6 @@ export default function PostFeaturedImageEdit( {
const isDescendentOfQueryLoop = Number.isFinite( queryId );
const {
isLink,
aspectRatio,
height,
width,
scale,
Expand All @@ -71,6 +70,7 @@ export default function PostFeaturedImageEdit( {
linkTarget,
useFirstImageFromPost,
} = attributes;
const aspectRatio = attributes?.style?.dimensions?.aspectRatio;
const [ temporaryURL, setTemporaryURL ] = useState();

const [ storedFeaturedImage, setFeaturedImage ] = useEntityProp(
Expand Down
9 changes: 6 additions & 3 deletions packages/block-library/src/post-featured-image/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,13 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
}
}

// Get the aspect Ratio from the block supports.
$aspect_ratio = $attributes['style']['dimensions']['aspectRatio'] ?? '';

$extra_styles = '';

// Aspect ratio with a height set needs to override the default width/height.
if ( ! empty( $attributes['aspectRatio'] ) ) {
if ( ! empty( $aspect_ratio ) ) {
$extra_styles .= 'width:100%;height:100%;';
} elseif ( ! empty( $attributes['height'] ) ) {
$extra_styles .= "height:{$attributes['height']};";
Expand Down Expand Up @@ -114,8 +117,8 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
$featured_image = $featured_image . $overlay_markup;
}

$aspect_ratio = ! empty( $attributes['aspectRatio'] )
? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';'
$aspect_ratio = ! empty( $aspect_ratio )
? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $aspect_ratio ) ) . ';'
: '';
$width = ! empty( $attributes['width'] )
? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';'
Expand Down
Loading