From b36dca5b7fb0088b73a8316317b86717adb7fa41 Mon Sep 17 00:00:00 2001 From: Ringish Date: Tue, 4 Feb 2020 17:04:40 +0100 Subject: [PATCH 1/4] Implements transform on buttons --- packages/block-library/src/buttons/index.js | 2 ++ .../block-library/src/buttons/transforms.js | 31 +++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 packages/block-library/src/buttons/transforms.js diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js index 211c07f4e43ad0..4777968dd1e710 100644 --- a/packages/block-library/src/buttons/index.js +++ b/packages/block-library/src/buttons/index.js @@ -7,6 +7,7 @@ import { button as icon } from '@wordpress/icons'; /** * Internal dependencies */ +import transforms from './transforms'; import edit from './edit'; import metadata from './block.json'; import save from './save'; @@ -26,6 +27,7 @@ export const settings = { align: true, alignWide: false, }, + transforms, edit, save, }; diff --git a/packages/block-library/src/buttons/transforms.js b/packages/block-library/src/buttons/transforms.js new file mode 100644 index 00000000000000..f4e6bab55b1b22 --- /dev/null +++ b/packages/block-library/src/buttons/transforms.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { createBlock } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { name } from './block.json'; + +const transforms = { + from: [ + { + type: 'block', + blocks: [ 'core/button' ], + transform: ( props ) => + createBlock( name, { attributes: props }, [ + createBlock( 'core/button', props ), + ] ), + }, + ], + to: [ + { + type: 'block', + blocks: [ name ], + transform: ( { content } ) => createBlock( name, { content } ), + }, + ], +}; + +export default transforms; From 87f22133fc1c423339cb741ee524bb02dc43f201 Mon Sep 17 00:00:00 2001 From: Ringish Date: Wed, 5 Feb 2020 09:26:46 +0100 Subject: [PATCH 2/4] DEV: Makes buttons transform multi block --- packages/block-library/src/buttons/transforms.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/buttons/transforms.js b/packages/block-library/src/buttons/transforms.js index f4e6bab55b1b22..2c6e60685d5484 100644 --- a/packages/block-library/src/buttons/transforms.js +++ b/packages/block-library/src/buttons/transforms.js @@ -12,18 +12,14 @@ const transforms = { from: [ { type: 'block', + isMultiBlock: true, blocks: [ 'core/button' ], transform: ( props ) => - createBlock( name, { attributes: props }, [ - createBlock( 'core/button', props ), - ] ), - }, - ], - to: [ - { - type: 'block', - blocks: [ name ], - transform: ( { content } ) => createBlock( name, { content } ), + createBlock( + name, + {}, + props.map( ( prop ) => createBlock( 'core/button', prop ) ) + ), }, ], }; From 148eec6c468ab763ab9f1c52709fab34d9f434cd Mon Sep 17 00:00:00 2001 From: Ringish Date: Wed, 5 Feb 2020 09:36:18 +0100 Subject: [PATCH 3/4] Improves variable names --- packages/block-library/src/buttons/transforms.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/buttons/transforms.js b/packages/block-library/src/buttons/transforms.js index 2c6e60685d5484..51b2a0d5c24731 100644 --- a/packages/block-library/src/buttons/transforms.js +++ b/packages/block-library/src/buttons/transforms.js @@ -18,7 +18,9 @@ const transforms = { createBlock( name, {}, - props.map( ( prop ) => createBlock( 'core/button', prop ) ) + props.map( ( singleProps ) => + createBlock( 'core/button', singleProps ) + ) ), }, ], From 92f677523d47e0d7ae71175129e9effa1259e1e6 Mon Sep 17 00:00:00 2001 From: Ringish Date: Thu, 6 Feb 2020 10:34:31 +0100 Subject: [PATCH 4/4] Adds some comments & imporoves code readability --- packages/block-library/src/buttons/transforms.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/buttons/transforms.js b/packages/block-library/src/buttons/transforms.js index 51b2a0d5c24731..a558b580741d34 100644 --- a/packages/block-library/src/buttons/transforms.js +++ b/packages/block-library/src/buttons/transforms.js @@ -14,12 +14,15 @@ const transforms = { type: 'block', isMultiBlock: true, blocks: [ 'core/button' ], - transform: ( props ) => + transform: ( buttons ) => + // Creates the buttons block createBlock( name, {}, - props.map( ( singleProps ) => - createBlock( 'core/button', singleProps ) + // Loop the selected buttons + buttons.map( ( attributes ) => + // Create singular button in the buttons block + createBlock( 'core/button', attributes ) ) ), },