Skip to content

Use block naming for marking blocks as overridable in patterns #59268

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

Merged
youknowriad merged 20 commits into from
Mar 1, 2024
Merged

Use block naming for marking blocks as overridable in patterns #59268

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
ba91d58
Try using block metadata names instead of nano ids for pattern overri…
talldan Feb 22, 2024
92fb5db
Switch to using a const
talldan Feb 22, 2024
6d4b66e
Remove `values` property, reverting back to attributes being at root …
talldan Feb 26, 2024
ef59150
Add a migration to the new format
talldan Feb 28, 2024
fa3bb13
Add backwards compatibility
talldan Feb 28, 2024
3b45710
Use a map of clientIds to ids for back compat
talldan Feb 29, 2024
9a48af8
Fix bindings not being applied when using the rename option in List View
talldan Feb 29, 2024
4cbb6c5
Rename to addBindings to complement removeBindings
talldan Feb 29, 2024
8c7656a
Rename partial-syncing-controls file
talldan Feb 29, 2024
a2cf150
Rename pattern-partial-syncing hooks file to pattern-overrides
talldan Feb 29, 2024
42048f9
Remove nanoid dependency
talldan Feb 29, 2024
5e7c650
Update doc string
talldan Feb 29, 2024
1642af4
Fix linting issues
aaronrobertshaw Mar 1, 2024
4a415c1
More linting fixes
aaronrobertshaw Mar 1, 2024
bd5f4b4
Linting again
aaronrobertshaw Mar 1, 2024
035d0d6
Update e2e tests
talldan Mar 1, 2024
121ff2d
Fix reset button on individual blocks
talldan Mar 1, 2024
2f68377
Address feedback
talldan Mar 1, 2024
72299f0
Add fixtures for deprecations
talldan Mar 1, 2024
c0440bd
Use fill instead of click & type
talldan Mar 1, 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
Prev Previous commit
Next Next commit
Update e2e tests
  • Loading branch information
@talldan
talldan committed Mar 1, 2024
commit 035d0d67502fd1488c871fd4590d45a9f2f945d6
59 changes: 26 additions & 33 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 @@ -32,7 +32,7 @@ test.describe( 'Pattern Overrides', () => {
editor,
} ) => {
let patternId;
let editableParagraphId;
const editableParagraphName = 'Editable Paragraph';

await test.step( 'Create a synced pattern and assign blocks to allow overrides', async () => {
await admin.visitSiteEditor( { path: '/patterns' } );
Expand Down Expand Up @@ -85,16 +85,17 @@ test.describe( 'Pattern Overrides', () => {
await advancedPanel.click();
}
await editorSettings
.getByRole( 'checkbox', { name: 'Allow instance overrides' } )
.setChecked( true );
.getByRole( 'textbox', { name: 'Block Name' } )
.click();
await page.keyboard.type( editableParagraphName );

await expect.poll( editor.getBlocks ).toMatchObject( [
{
name: 'core/paragraph',
attributes: {
content: 'This paragraph can be edited',
metadata: {
id: expect.any( String ),
name: editableParagraphName,
bindings: {
content: {
source: 'core/pattern-overrides',
Expand Down Expand Up @@ -123,8 +124,6 @@ test.describe( 'Pattern Overrides', () => {
).toBeVisible();

patternId = new URL( page.url() ).searchParams.get( 'postId' );
const blocks = await editor.getBlocks();
editableParagraphId = blocks[ 0 ].attributes.metadata.id;
} );

await test.step( 'Create a post and insert the pattern with overrides', async () => {
Expand Down Expand Up @@ -176,10 +175,8 @@ test.describe( 'Pattern Overrides', () => {
attributes: {
ref: patternId,
content: {
[ editableParagraphId ]: {
values: {
content: 'I would word it this way',
},
[ editableParagraphName ]: {
content: 'I would word it this way',
},
},
},
Expand All @@ -189,10 +186,8 @@ test.describe( 'Pattern Overrides', () => {
attributes: {
ref: patternId,
content: {
[ editableParagraphId ]: {
values: {
content: 'This one is different',
},
[ editableParagraphName ]: {
content: 'This one is different',
},
},
},
Expand Down Expand Up @@ -276,11 +271,11 @@ test.describe( 'Pattern Overrides', () => {
editor,
context,
} ) => {
const buttonId = 'button-id';
const buttonName = 'Editable button';
const { id } = await requestUtils.createBlock( {
title: 'Button with target',
content: `<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"id":"${ buttonId }","bindings":{"text":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"linkTarget":{"source":"core/pattern-overrides"},"rel":{"source":"core/pattern-overrides"}}}} -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"name":"${ buttonName }","bindings":{"text":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"linkTarget":{"source":"core/pattern-overrides"},"rel":{"source":"core/pattern-overrides"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="http://wp.org" target="_blank" rel="noreferrer noopener nofollow">Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`,
Expand Down Expand Up @@ -386,21 +381,21 @@ test.describe( 'Pattern Overrides', () => {
requestUtils,
editor,
} ) => {
const paragraphId = 'paragraph-id';
const headingId = 'heading-id';
const paragraphName = 'Editable paragraph';
const headingName = 'Editable heading';
const innerPattern = await requestUtils.createBlock( {
title: 'Inner Pattern',
content: `<!-- wp:paragraph {"metadata":{"id":"${ paragraphId }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
<p>Inner paragraph</p>
<!-- /wp:paragraph -->`,
status: 'publish',
} );
const outerPattern = await requestUtils.createBlock( {
title: 'Outer Pattern',
content: `<!-- wp:heading {"metadata":{"id":"${ headingId }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
content: `<!-- wp:heading {"metadata":{"name":"${ headingName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
<h2 class="wp-block-heading">Outer heading</h2>
<!-- /wp:heading -->
<!-- wp:block {"ref":${ innerPattern.id },"overrides":{"${ paragraphId }":{"content":"Inner paragraph (edited)"}}} /-->`,
<!-- wp:block {"ref":${ innerPattern.id },"content":{"${ paragraphName }":{"content":"Inner paragraph (edited)"}}} /-->`,
status: 'publish',
} );

Expand All @@ -425,8 +420,8 @@ test.describe( 'Pattern Overrides', () => {
attributes: {
ref: outerPattern.id,
content: {
[ headingId ]: {
values: { content: 'Outer heading (edited)' },
[ headingName ]: {
content: 'Outer heading (edited)',
},
},
},
Expand All @@ -440,10 +435,8 @@ test.describe( 'Pattern Overrides', () => {
attributes: {
ref: innerPattern.id,
content: {
[ paragraphId ]: {
values: {
content: 'Inner paragraph (edited)',
},
[ paragraphName ]: {
content: 'Inner paragraph (edited)',
},
},
},
Expand Down Expand Up @@ -505,14 +498,14 @@ test.describe( 'Pattern Overrides', () => {
requestUtils,
editor,
} ) => {
const headingId = 'heading-id';
const paragraphId = 'paragraph-id';
const headingName = 'Editable heading';
const paragraphName = 'Editable paragraph';
const { id } = await requestUtils.createBlock( {
title: 'Pattern',
content: `<!-- wp:heading {"metadata":{"id":"${ headingId }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
content: `<!-- wp:heading {"metadata":{"name":"${ headingName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"metadata":{"id":"${ paragraphId }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
<p>Paragraph</p>
<!-- /wp:paragraph -->`,
status: 'publish',
Expand Down Expand Up @@ -597,14 +590,14 @@ test.describe( 'Pattern Overrides', () => {
requestUtils,
editor,
} ) => {
const imageId = 'image-id';
const imageName = 'Editable image';
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"}}}} -->
content: `<!-- wp:image {"metadata":{"name":"${ imageName }","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',
Expand Down