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

Fix upload button on overridden empty image block in patterns #59169

Merged
merged 1 commit into from
Feb 20, 2024
Merged

Fix upload button on overridden empty image block in patterns #59169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 lib/compat/wordpress-6.5/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ function gutenberg_process_block_bindings( $block_content, $parsed_block, $block
$supported_block_attrs = array(
'core/paragraph' => array( 'content' ),
'core/heading' => array( 'content' ),
'core/image' => array( 'url', 'title', 'alt' ),
'core/image' => array( 'id', 'url', 'title', 'alt' ),
'core/button' => array( 'url', 'text', 'linkTarget', 'rel' ),
);

Expand Down
1 change: 1 addition & 0 deletions packages/patterns/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const PARTIAL_SYNCING_SUPPORTED_BLOCKS = {
rel: __( 'Link Relationship' ),
},
'core/image': {
id: __( 'Image ID' ),
Copy link
Member

Choose a reason for hiding this comment

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

There is a note in the code:

// TODO: This should not be hardcoded. Maybe there should be a config and/or an UI.

@talldan and @SantosGuillamot, I contemplated the other day whether we should add labels to block attributes schema and annotate them as translatable in block.json. That could also be considered as one of the conditions to opt into block bindings in the future.

Copy link
Member

@gziolo gziolo Feb 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

By the way, I think you should use _x() with the context so it's easier to translate these labels.

gutenberg/packages/blocks/src/api/registration.js

Lines 271 to 274 in a04a8e9

if ( typeof i18nSchema === 'string' && typeof settingValue === 'string' ) {
// eslint-disable-next-line @wordpress/i18n-no-variables, @wordpress/i18n-text-domain
return _x( settingValue, i18nSchema, textdomain );
}

The context could be similar to:

gutenberg/packages/blocks/src/api/i18n-block.json

Line 7 in a04a8e9

"label": "block style label"

block attribute label could work. That simpler part might make sense to update still before WP 6.5 beta 3.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, I always have some doubts about including the translation strings here. Currently, they are not used in any way but are still kept. Should we just remove them for this release to not cause confusion for translators?

Copy link
Member

Choose a reason for hiding this comment

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

Let's remove them to prevent unnecessary work for translators. 16 most popular locales need to have 100% coverage before the major release starts 😅

url: __( 'URL' ),
title: __( 'Title' ),
alt: __( 'Alt Text' ),
Expand Down
67 changes: 67 additions & 0 deletions test/e2e/specs/editor/various/pattern-overrides.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

/**
* External dependencies
*/
const path = require( 'path' );

test.describe( 'Pattern Overrides', () => {
test.beforeAll( async ( { requestUtils } ) => {
await Promise.all( [
Expand Down Expand Up @@ -584,4 +589,66 @@ test.describe( 'Pattern Overrides', () => {
await editor.showBlockToolbar();
await expect( resetButton ).toBeDisabled();
} );

// Fix https://github.com/WordPress/gutenberg/issues/58708.
test( 'overridden empty images should not have upload button', async ( {
page,
admin,
requestUtils,
editor,
} ) => {
const imageId = 'image-id';
const TEST_IMAGE_FILE_PATH = path.resolve(
__dirname,
'../../../assets/10x10_e2e_test_image_z9T8jK.png'
);
const { id } = await requestUtils.createBlock( {
title: 'Pattern',
content: `<!-- wp:image {"metadata":{"id":"${ imageId }","bindings":{"id":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"title":{"source":"core/pattern-overrides"},"alt":{"source":"core/pattern-overrides"}}}} -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->`,
status: 'publish',
} );

await admin.createNewPost();

await editor.insertBlock( {
name: 'core/block',
attributes: { ref: id },
} );

const imageBlock = editor.canvas.getByRole( 'document', {
name: 'Block: Image',
} );
await editor.selectBlocks( imageBlock );
await imageBlock
.getByTestId( 'form-file-upload-input' )
.setInputFiles( TEST_IMAGE_FILE_PATH );
await expect( imageBlock.getByRole( 'img' ) ).toHaveCount( 1 );
await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
'src',
/\/wp-content\/uploads\//
);

await editor.publishPost();
await page.reload();

await editor.selectBlocks( imageBlock );
await editor.showBlockToolbar();
const blockToolbar = page.getByRole( 'toolbar', {
name: 'Block tools',
} );
await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
'src',
/\/wp-content\/uploads\//
);
await expect(
blockToolbar.getByRole( 'button', { name: 'Replace' } )
).toBeEnabled();
await expect(
blockToolbar.getByRole( 'button', {
name: 'Upload to Media Library',
} )
).toBeHidden();
} );
} );
Loading