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.

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

Editor Settings: remove duplicate "Replace Image" button when editing the Featured Image #19555

Closed
3 tasks
ciampo opened this issue Apr 16, 2021 · 0 comments · Fixed by #19644
Closed
3 tasks
Assignees
Labels
[Extension] External Media Extend all block editor media tools to support external providers [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Pri] Normal [Type] Bug When a feature is broken and / or not performing as intended

Comments

@ciampo
Copy link
Contributor

ciampo commented Apr 16, 2021

Steps to reproduce the issue

  1. On a WordPress.com site (simple or atomic), create a new post
  2. Open the settings sidebar (by clicking the cog icon in the top right of the editor)
  3. Select the "Post" tab and scroll to the "Featured Image" section
  4. Notice the "Select Image" button. When clicking this button, a dropdown appears showing media source selection.
  5. Add a Featured Image
  6. One the image has uploaded, notice the buttons UI: "Replace Image", "Select Image", "Remove featured image"

What I expected

When a featured image is selected:

  • The original "Replace Image" button (coming from core gutenberg) should not be visible
  • The "Select Image" button (from Jetpack plugin) should be visible, but its label text should say "Replace Image"
  • There should be some vertical space before the "Remove featured image" link/button

What happened instead

The "Replace Image" button (from core Gutenberg) and the "Select Image" button are both shown to the user, and there are some misalignments in the buttons UI

Screenshots

image

Context

This issue was part of a larger exploration (see this GitHub issue) about the discrepancies between .org and .com sites when editing a post's featured image.

A good starting point when working on this issue is:

if ( isAllowedBlock( name, render ) || isFeaturedImage( props ) ) {
const { allowedTypes, gallery = false, value = [] } = props;
// Only replace button for components that expect images, except existing galleries.
if ( allowedTypes.indexOf( 'image' ) > -1 && ! ( gallery && value.length > 0 ) ) {
render = button => <MediaButton { ...button } mediaProps={ props } />;
}
}

@ciampo ciampo added the [Type] Bug When a feature is broken and / or not performing as intended label Apr 16, 2021
@ciampo ciampo changed the title Editor Settings: cleanup Featured Image buttons Editor Settings: remove duplicate "Replace Image" button when editing the Featured Image Apr 16, 2021
@ciampo ciampo added [Pri] Normal [Feature] WordPress.com Block Editor [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ and removed [Feature] WordPress.com Block Editor labels Apr 16, 2021
@jeherve jeherve added the [Extension] External Media Extend all block editor media tools to support external providers label Apr 16, 2021
@mattwiebe mattwiebe self-assigned this Apr 23, 2021
mattwiebe added a commit that referenced this issue Apr 23, 2021
Previously, our "Select Image" button would still show alongside Core's "Replace Image" button. Now, Cores' button is not shown, and our button shows as "Replace Image" when an image has been selected.

Fixes #19555
mattwiebe added a commit that referenced this issue May 4, 2021
Previously, our "Select Image" button would still show alongside Core's "Replace Image" button. Now, Cores' button is not shown, and our button shows as "Replace Image" when an image has been selected.

Fixes #19555
mattwiebe added a commit that referenced this issue May 4, 2021
)

Previously, our "Select Image" button would still show alongside Core's "Replace Image" button. Now, Cores' button is not shown, and our button shows as "Replace Image" when an image has been selected.

Fixes #19555 
props @creativecoder
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Extension] External Media Extend all block editor media tools to support external providers [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Pri] Normal [Type] Bug When a feature is broken and / or not performing as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants