Skip to content

Commit

Permalink
Cover: Avoid adding a wrapper Group block when transforming to Group,…
Browse files Browse the repository at this point in the history 
… where possible (#40293)

* Cover: Avoid adding a wrapper Group block when transforming to Group, where possible

* Use cleanEmptyObject to ensure stray undefined values from the Group block don't override real values from the Cover block

* Only add the style attribute object if style attribute is set

* Stop empty style attribute being added when converting from group to cover

* Check for specific style attributes rather than just the top-level style object

* Apply style object update to group from transform

* Remove redundant or check

* Move check down to style.color instead of the root style object, preserve clearing out background / gradient in transform from the Group block

* Add tests for transforms

* Rename transform to transfer in test names for better clarity

* Skip merging Cover background colors into Group if Group contains any bg color or gradient

Co-authored-by: Glen Davies <glen.davies@a8c.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
  • Loading branch information
@andrewserong @aaronrobertshaw
3 people committed May 4, 2022
1 parent b89145d commit a784cf9
Show file tree
Hide file tree
Showing 2 changed files with 400 additions and 7 deletions.
301 changes: 301 additions & 0 deletions packages/block-library/src/cover/test/transforms.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
/**
* WordPress dependencies
*/
import {
createBlock,
getBlockTypes,
registerBlockType,
switchToBlockType,
unregisterBlockType,
} from '@wordpress/blocks';

/**
* Internal dependencies
*/
import { metadata as coverMetadata, settings as coverSettings } from '../index';
import {
metadata as groupMetadata,
settings as groupSettings,
} from '../../group';

describe( 'transforms', () => {
beforeAll( () => {
registerBlockType( coverMetadata, coverSettings );
registerBlockType( groupMetadata, groupSettings );
} );

afterAll( () => {
getBlockTypes().forEach( ( block ) => {
unregisterBlockType( block.name );
} );
} );

describe( 'transform from Group to Cover', () => {
it( 'should return child Cover block when Group block contains only a single Cover block', () => {
const block = createBlock(
'core/group',
{ gradient: 'my-gradient' },
[ createBlock( 'core/cover', { dimRatio: 10 } ) ]
);

const transformedBlocks = switchToBlockType( block, 'core/cover' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { dimRatio: 10 },
innerBlocks: [],
name: 'core/cover',
} );
} );

it( 'should wrap Group in a Cover block and move named gradient up to the parent Cover block', () => {
const block = createBlock( 'core/group', {
gradient: 'my-gradient',
} );

const transformedBlocks = switchToBlockType( block, 'core/cover' );
const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { gradient: 'my-gradient' },
name: 'core/cover',
} );

expect( innerGroupBlock.name ).toBe( 'core/group' );
expect( innerGroupBlock.attributes ).not.toHaveProperty(
'gradient'
);
} );

it( 'should wrap Group in a Cover block and move custom gradient up to the parent Cover block', () => {
const gradient =
'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
const block = createBlock( 'core/group', {
style: {
color: {
gradient,
},
},
} );

const transformedBlocks = switchToBlockType( block, 'core/cover' );
const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { customGradient: gradient },
name: 'core/cover',
} );

expect( innerGroupBlock.name ).toBe( 'core/group' );
expect( innerGroupBlock.attributes ).not.toHaveProperty( 'style' );
} );

it( 'should wrap Group in a Cover block and move named background color up to the parent Cover block', () => {
const block = createBlock( 'core/group', {
backgroundColor: 'my-background-color',
} );

const transformedBlocks = switchToBlockType( block, 'core/cover' );
const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { overlayColor: 'my-background-color' },
name: 'core/cover',
} );

expect( innerGroupBlock.name ).toBe( 'core/group' );
expect( innerGroupBlock.attributes ).not.toHaveProperty(
'backgroundColor'
);
} );

it( 'should wrap Group in a Cover block and move custom background color up to the parent Cover block', () => {
const background = '#ff0000';
const block = createBlock( 'core/group', {
style: {
color: {
background,
},
},
} );

const transformedBlocks = switchToBlockType( block, 'core/cover' );
const innerGroupBlock = transformedBlocks[ 0 ].innerBlocks[ 0 ];

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { customOverlayColor: background },
name: 'core/cover',
} );

expect( innerGroupBlock.name ).toBe( 'core/group' );
expect( innerGroupBlock.attributes ).not.toHaveProperty( 'style' );
} );
} );

describe( 'transform from Cover to Group', () => {
it( 'should transfer named gradient color to Group block', () => {
const block = createBlock( 'core/cover', {
gradient: 'my-gradient',
} );

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { gradient: 'my-gradient' },
name: 'core/group',
} );
} );

it( 'should transfer custom gradient color to style object in Group block', () => {
const gradient =
'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
const block = createBlock( 'core/cover', {
customGradient: gradient,
} );

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { style: { color: { gradient } } },
name: 'core/group',
} );
} );

it( 'should transfer named background color to backgroundColor attribute in Group block', () => {
const block = createBlock( 'core/cover', {
overlayColor: 'my-background-color',
} );

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { backgroundColor: 'my-background-color' },
name: 'core/group',
} );
} );

it( 'should transfer custom background color to style object in Group block', () => {
const block = createBlock( 'core/cover', {
customOverlayColor: '#ff0000',
} );

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { style: { color: { background: '#ff0000' } } },
name: 'core/group',
} );
} );

it( 'should merge Cover block named gradient color into child Group block', () => {
const block = createBlock(
'core/cover',
{
gradient: 'my-gradient',
},
[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
);

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: { fontSize: 'medium', gradient: 'my-gradient' },
innerBlocks: [],
name: 'core/group',
} );
} );

it( 'should merge Cover block custom gradient color to style object in child Group block', () => {
const gradient =
'linear-gradient(90deg,rgb(188,138,51) 0%,rgb(65,88,208) 100%)';
const block = createBlock(
'core/cover',
{
customGradient: gradient,
},
[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
);

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: {
fontSize: 'medium',
style: { color: { gradient } },
},
innerBlocks: [],
name: 'core/group',
} );
} );

it( 'should merge Cover block named background color to backgroundColor attribute in child Group block', () => {
const block = createBlock(
'core/cover',
{
overlayColor: 'my-background-color',
},
[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
);

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: {
backgroundColor: 'my-background-color',
fontSize: 'medium',
},
innerBlocks: [],
name: 'core/group',
} );
} );

it( 'should merge Cover block custom background color into child Group block', () => {
const block = createBlock(
'core/cover',
{
customOverlayColor: '#ff0000',
},
[ createBlock( 'core/group', { fontSize: 'medium' } ) ]
);

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: {
fontSize: 'medium',
style: { color: { background: '#ff0000' } },
},
innerBlocks: [],
name: 'core/group',
} );
} );

it( 'should skip merging Cover block gradient into child Group block if Group block has background color', () => {
const block = createBlock(
'core/cover',
{
gradient: 'my-gradient',
},
[
createBlock( 'core/group', {
fontSize: 'medium',
style: { color: { background: '#ff0000' } },
} ),
]
);

const transformedBlocks = switchToBlockType( block, 'core/group' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
attributes: {
fontSize: 'medium',
style: { color: { background: '#ff0000' } },
},
innerBlocks: [],
name: 'core/group',
} );
expect( transformedBlocks[ 0 ].attributes ).not.toHaveProperty(
'gradient'
);
} );
} );
} );

0 comments on commit a784cf9

Please sign in to comment.