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

Preserve bindings metadata in block transforms #59179

Merged
merged 16 commits into from
Feb 22, 2024
Merged

Preserve bindings metadata in block transforms #59179

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
435cd73
Add metadata in heading transforms
SantosGuillamot Feb 19, 2024
7b753e1
Add metadata in button transforms
SantosGuillamot Feb 19, 2024
c3138e3
Add heading and button transform from/to paragraph
SantosGuillamot Feb 19, 2024
a7cd279
Revert "Add heading and button transform from/to paragraph"
SantosGuillamot Feb 20, 2024
a6fa4ce
Move tests to individual block specs
SantosGuillamot Feb 20, 2024
5168962
Explicitly transform metadata in button block
SantosGuillamot Feb 20, 2024
e472ebf
Explicitly transform metadata in heading block
SantosGuillamot Feb 20, 2024
e334ecd
Make bindings transform explicit in heading block
SantosGuillamot Feb 20, 2024
bb3b325
Use util to transform metadata
SantosGuillamot Feb 20, 2024
7eb0fdb
Use metadata util in code block to keep id and name
SantosGuillamot Feb 20, 2024
b2d54b2
Move util to block-library package
SantosGuillamot Feb 21, 2024
aeaf571
Change code transforms util path
SantosGuillamot Feb 21, 2024
d323507
Inherit transform metadata props in the util
SantosGuillamot Feb 21, 2024
3ca3a08
Add transform tests for code block
SantosGuillamot Feb 21, 2024
2d09640
Return early if no supported properties
SantosGuillamot Feb 21, 2024
5e3eda0
Use bindings callback for mapping attributes
SantosGuillamot Feb 21, 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
12 changes: 8 additions & 4 deletions packages/block-library/src/buttons/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,23 @@ const transforms = {
{},
// Loop the selected buttons.
buttons.map( ( attributes ) => {
const element = createElement(
document,
attributes.content
);
const { content, metadata } = attributes;
const element = createElement( document, content );
// Remove any HTML tags.
const text = element.innerText || '';
// Get first url.
const link = element.querySelector( 'a' );
const url = link?.getAttribute( 'href' );
// Adapt bindings to the button block.
gziolo marked this conversation as resolved.
Show resolved Hide resolved
if ( metadata?.bindings?.content ) {
metadata.bindings.text = metadata.bindings.content;
delete metadata.bindings.content;
}
// Create singular button in the buttons block.
return createBlock( 'core/button', {
text,
url,
metadata,
} );
} )
),
Expand Down
22 changes: 14 additions & 8 deletions packages/block-library/src/heading/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ const transforms = {
isMultiBlock: true,
blocks: [ 'core/paragraph' ],
transform: ( attributes ) =>
attributes.map( ( { content, anchor, align: textAlign } ) =>
createBlock( 'core/heading', {
content,
anchor,
textAlign,
} )
attributes.map(
( { content, anchor, align: textAlign, metadata } ) =>
createBlock( 'core/heading', {
content,
anchor,
textAlign,
metadata,
} )
),
},
{
Expand Down Expand Up @@ -82,8 +84,12 @@ const transforms = {
isMultiBlock: true,
blocks: [ 'core/paragraph' ],
transform: ( attributes ) =>
attributes.map( ( { content, textAlign: align } ) =>
createBlock( 'core/paragraph', { content, align } )
attributes.map( ( { content, textAlign: align, metadata } ) =>
createBlock( 'core/paragraph', {
content,
align,
metadata,
} )
),
},
],
Expand Down
287 changes: 273 additions & 14 deletions test/e2e/specs/editor/various/convert-block-type.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Code block', () => {
test.describe( 'Block transforms', () => {
gziolo marked this conversation as resolved.
Show resolved Hide resolved
test.beforeEach( async ( { admin } ) => {
await admin.createNewPost();
} );
Expand All @@ -12,27 +12,286 @@ test.describe( 'Code block', () => {
await requestUtils.deleteAllPosts();
} );

test( 'should convert to a preformatted block', async ( {
page,
editor,
} ) => {
const code = 'print "Hello Dolly!"';
test.describe( 'Code block', () => {
test( 'should convert to a preformatted block', async ( {
page,
editor,
} ) => {
const code = 'print "Hello Dolly!"';

await editor.insertBlock( { name: 'core/code' } );
await page.keyboard.type( code );
await editor.insertBlock( { name: 'core/code' } );
await page.keyboard.type( code );

// Verify the content starts out as a Code block.
// Verify the content starts out as a Code block.

await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:code -->
await expect.poll( editor.getEditedPostContent )
.toBe( `<!-- wp:code -->
<pre class="wp-block-code"><code>${ code }</code></pre>
<!-- /wp:code -->` );

await editor.transformBlockTo( 'core/preformatted' );
await editor.transformBlockTo( 'core/preformatted' );

// The content should now be a Preformatted block with no data loss.
await expect.poll( editor.getEditedPostContent )
.toBe( `<!-- wp:preformatted -->
// The content should now be a Preformatted block with no data loss.
await expect.poll( editor.getEditedPostContent )
.toBe( `<!-- wp:preformatted -->
<pre class="wp-block-preformatted">${ code }</pre>
<!-- /wp:preformatted -->` );
} );
} );

test.describe( 'Heading block', () => {
test.describe( 'FROM paragraph', () => {
test( 'should preserve the content', async ( { editor } ) => {
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
content: 'initial content',
},
} );
await editor.transformBlockTo( 'core/heading' );
const headingBlock = ( await editor.getBlocks() )[ 0 ];
expect( headingBlock.name ).toBe( 'core/heading' );
expect( headingBlock.attributes.content ).toBe(
'initial content'
);
} );

test( 'should preserve the text align attribute', async ( {
editor,
} ) => {
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
align: 'right',
content: 'initial content',
},
} );
await editor.transformBlockTo( 'core/heading' );
const headingBlock = ( await editor.getBlocks() )[ 0 ];
expect( headingBlock.name ).toBe( 'core/heading' );
expect( headingBlock.attributes.textAlign ).toBe( 'right' );
} );

test( 'should preserve the metadata attribute', async ( {
editor,
} ) => {
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
content: 'initial content',
metadata: {
name: 'Custom name',
},
},
} );

await editor.transformBlockTo( 'core/heading' );
const headingBlock = ( await editor.getBlocks() )[ 0 ];
expect( headingBlock.name ).toBe( 'core/heading' );
expect( headingBlock.attributes.metadata ).toMatchObject( {
name: 'Custom name',
} );
} );

test( 'should preserve the block bindings', async ( {
editor,
} ) => {
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
content: 'initial content',
metadata: {
bindings: {
content: {
source: 'core/post-meta',
args: {
key: 'custom_field',
},
},
},
},
},
} );

await editor.transformBlockTo( 'core/heading' );
const headingBlock = ( await editor.getBlocks() )[ 0 ];
expect( headingBlock.name ).toBe( 'core/heading' );
expect(
headingBlock.attributes.metadata.bindings
).toMatchObject( {
content: {
source: 'core/post-meta',
args: {
key: 'custom_field',
},
},
} );
} );
} );

test.describe( 'TO paragraph', () => {
test( 'should preserve the content', async ( { editor } ) => {
await editor.insertBlock( {
name: 'core/heading',
attributes: {
content: 'initial content',
},
} );
await editor.transformBlockTo( 'core/paragraph' );
const paragraphBlock = ( await editor.getBlocks() )[ 0 ];
expect( paragraphBlock.name ).toBe( 'core/paragraph' );
expect( paragraphBlock.attributes.content ).toBe(
'initial content'
);
} );

test( 'should preserve the text align attribute', async ( {
editor,
} ) => {
await editor.insertBlock( {
name: 'core/heading',
attributes: {
textAlign: 'right',
content: 'initial content',
},
} );
await editor.transformBlockTo( 'core/paragraph' );
const paragraphBlock = ( await editor.getBlocks() )[ 0 ];
expect( paragraphBlock.name ).toBe( 'core/paragraph' );
expect( paragraphBlock.attributes.align ).toBe( 'right' );
} );

test( 'should preserve the metadata attribute', async ( {
editor,
} ) => {
await editor.insertBlock( {
name: 'core/heading',
attributes: {
content: 'initial content',
metadata: {
name: 'Custom name',
},
},
} );

await editor.transformBlockTo( 'core/paragraph' );
const paragraphBlock = ( await editor.getBlocks() )[ 0 ];
expect( paragraphBlock.name ).toBe( 'core/paragraph' );
expect( paragraphBlock.attributes.metadata ).toMatchObject( {
name: 'Custom name',
} );
} );

test( 'should preserve the block bindings', async ( {
editor,
} ) => {
await editor.insertBlock( {
name: 'core/heading',
attributes: {
content: 'initial content',
metadata: {
bindings: {
content: {
source: 'core/post-meta',
args: {
key: 'custom_field',
},
},
},
},
},
} );

await editor.transformBlockTo( 'core/paragraph' );
const paragraphBlock = ( await editor.getBlocks() )[ 0 ];
expect( paragraphBlock.name ).toBe( 'core/paragraph' );
expect(
paragraphBlock.attributes.metadata.bindings
).toMatchObject( {
content: {
source: 'core/post-meta',
args: {
key: 'custom_field',
},
},
} );
} );
} );
} );

test.describe( 'Button block', () => {
test.describe( 'FROM paragraph', () => {
test( 'should preserve the content', async ( { editor } ) => {
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
content: 'initial content',
},
} );
await editor.transformBlockTo( 'core/buttons' );
const buttonBlock = ( await editor.getBlocks() )[ 0 ]
.innerBlocks[ 0 ];
expect( buttonBlock.name ).toBe( 'core/button' );
expect( buttonBlock.attributes.text ).toBe( 'initial content' );
} );

test( 'should preserve the metadata attribute', async ( {
editor,
} ) => {
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
content: 'initial content',
metadata: {
name: 'Custom name',
},
},
} );

await editor.transformBlockTo( 'core/buttons' );
const buttonBlock = ( await editor.getBlocks() )[ 0 ]
.innerBlocks[ 0 ];
expect( buttonBlock.name ).toBe( 'core/button' );
expect( buttonBlock.attributes.metadata ).toMatchObject( {
name: 'Custom name',
} );
} );

test( 'should preserve the block bindings', async ( {
editor,
} ) => {
await editor.insertBlock( {
name: 'core/paragraph',
attributes: {
content: 'initial content',
metadata: {
bindings: {
content: {
source: 'core/post-meta',
args: {
key: 'custom_field',
},
},
},
},
},
} );

await editor.transformBlockTo( 'core/buttons' );
const buttonBlock = ( await editor.getBlocks() )[ 0 ]
.innerBlocks[ 0 ];
expect( buttonBlock.name ).toBe( 'core/button' );
expect(
buttonBlock.attributes.metadata.bindings
).toMatchObject( {
text: {
source: 'core/post-meta',
args: {
key: 'custom_field',
},
},
} );
} );
} );
} );
} );
Loading