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

Added toolbar dropdown action to set any image as feature image #65896

Merged
merged 18 commits into from
Nov 6, 2024
Merged

Added toolbar dropdown action to set any image as feature image #65896

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2b55ec3
feature: created toggle control to set content image as feature image…
up1512001 Oct 6, 2024
f4e6f37
Fix: docs build
up1512001 Oct 6, 2024
7501994
revert: php changes for feature image
up1512001 Oct 7, 2024
23d153c
feature: created toolbar control to set image as feature image is pos…
up1512001 Oct 7, 2024
e95aacf
feature: created block settings & added proper notices for success me…
up1512001 Oct 8, 2024
b9e39c7
Merge branch 'trunk' into gh/65889
up1512001 Oct 8, 2024
2fb9113
Merge branch 'trunk' into gh/65889
up1512001 Oct 24, 2024
68ab121
update: added required block context for feature image control
up1512001 Oct 24, 2024
d57d240
update: set feature image control as per suggestion
up1512001 Oct 24, 2024
a28d110
remove: unnessary isFeature image attribute
up1512001 Oct 24, 2024
479194d
rename: feature image control
up1512001 Oct 24, 2024
e44927a
Fix: query loop issue
up1512001 Oct 24, 2024
d5071c1
Fix: typo in set featured image
up1512001 Oct 24, 2024
4a2d3bd
Merge branch 'trunk' into gh/65889
up1512001 Nov 4, 2024
053cede
update as per suggestions
up1512001 Nov 4, 2024
246b3f2
Fix: minor feedback
up1512001 Nov 4, 2024
8a24ce7
Fix: minor issue
up1512001 Nov 4, 2024
8ebbc47
Merge branch 'trunk' into gh/65889
up1512001 Nov 6, 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
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
- **Name:** core/image
- **Category:** media
- **Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity, shadow (), spacing (margin)
- **Attributes:** alt, aspectRatio, blob, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
- **Attributes:** alt, aspectRatio, blob, caption, height, href, id, isFeatureImage, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width

## Latest Comments

Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/image/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,10 @@
"source": "attribute",
"selector": "figure > a",
"attribute": "target"
},
"isFeatureImage": {
"type": "boolean",
"default": false
}
},
"supports": {
Expand Down
41 changes: 40 additions & 1 deletion packages/block-library/src/image/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
Placeholder,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect, useDispatch, dispatch, select } from '@wordpress/data';
import {
BlockControls,
InspectorControls,
Expand Down Expand Up @@ -128,6 +128,7 @@ export default function Image( {
sizeSlug,
lightbox,
metadata,
isFeatureImage,
} = attributes;

// The only supported unit is px, so we can parseInt to strip the px here.
Expand All @@ -139,6 +140,7 @@ export default function Image( {
const { getBlock, getSettings } = useSelect( blockEditorStore );

const image = useSelect(
// eslint-disable-next-line no-shadow
( select ) =>
id && isSingleSelected
? select( coreStore ).getMedia( id, { context: 'view' } )
Expand All @@ -147,6 +149,7 @@ export default function Image( {
);

const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect(
// eslint-disable-next-line no-shadow
( select ) => {
const { getBlockRootClientId, canInsertBlockType } =
select( blockEditorStore );
Expand Down Expand Up @@ -472,6 +475,7 @@ export default function Image( {
lockTitleControlsMessage,
lockCaption = false,
} = useSelect(
// eslint-disable-next-line no-shadow
( select ) => {
if ( ! isSingleSelected ) {
return {};
Expand Down Expand Up @@ -1043,10 +1047,45 @@ export default function Image( {
);
}

const setAttributeForFeatureImage = ( value ) => {
const isPostHasFeatureImage =
// eslint-disable-next-line @wordpress/data-no-store-string-literals
select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
if ( isPostHasFeatureImage ) {
// dispatch notice that post already has feature image
createErrorNotice( __( 'Post already has a featured image.' ), {
type: 'snackbar',
} );
return;
}

// set post featured image as current image.
// eslint-disable-next-line @wordpress/data-no-store-string-literals
dispatch( 'core/editor' ).editPost( { featured_media: attributes.id } );

setAttributes( { isFeatureImage: ! value } );
};

const makeFeatureImageFormatControl = (
<BlockControls>
<ToolbarGroup>
<ToolbarButton
icon="format-image"
label={ __( 'Make Feature Image' ) }
onClick={ () =>
setAttributeForFeatureImage( isFeatureImage )
}
isPressed={ isFeatureImage }
/>
Copy link
Contributor

Choose a reason for hiding this comment

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

@paaljoachim @jameskoster @scruffian

I want to confirm again here: does the "Make Feature Image" button mean to label the block to be used as a featured image? Or is it meant to update the featured image with the current image?

For example, let's assume that the former (labeling) is what is expected here. Furthermore, suppose that useFirstImageFromPost is enabled for the featured image and a second Image block in the content is labeled to be used as a featured image.

In this case, which one will actually be displayed as the featured image?

To prevent such inconsistencies, I prefer the latter approach (updating the featured image with the current image).

Copy link
Contributor

Choose a reason for hiding this comment

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

The latter was my expectation. But I don't have a strong feeling about this feature and would welcome more feedback.

Copy link
Contributor

Choose a reason for hiding this comment

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

I expect to use the image as a selected featured image.

That is when I press the link/button "Set featured image" associated with the Image block a featured image should also be added here:
Screenshot 2024-10-08 at 20 34 13

It becomes an additional option to directly set the Featured image through the ellipse (3 button drop down) in an Image block. As it is added here it could easily also be added to a Cover block, Media & Text block etc.
If there was already a featured image added to the post then clicking the option in the ellipse would then updated the featured image with the one that was just selected through the Image block.

Conclusion is that having an additional method to add a featured image would be helpful.

--

Now on another similar issue.
It would also be helpful to set first image in post as featured image through Global settings. This means if one forgets to set a featured image then the first image in the post will automatically be set as featured. I have experienced over and over that customers forget to add a featured image. Having this happen automatically would very much help.

</ToolbarGroup>
</BlockControls>
);

return (
<>
{ mediaReplaceFlow }
{ controls }
{ makeFeatureImageFormatControl }
{ img }

<Caption
Expand Down
Loading