Hello, Thank you for this example, it has helped allot on extending multiple gutenberg blocks and adding more options to them. I’m facing issue with block validation on certain blocks after removing the tests for the core/image block, for example on `woocommerce/all-products` block added with WooCommerce Blocks as seen in the video attached. The error generated in the console are: ``` blocks.js?ver=423068d7079f57cf9f02458ccb4a6131:8778 Block validation: Expected attributes Array(2), instead saw Array(3). log @ blocks.js?ver=423068d7079f57cf9f02458ccb4a6131:8778 blocks.js?ver=423068d7079f57cf9f02458ccb4a6131:8778 Block validation: Block validation failed for `woocommerce/all-products` (Object). Content generated by `save` function:

Content retrieved from post body:

``` Plugin is exactly the same, only difference is commenting out the test for the single `core/image` block inside the `spacing-control.js` ``` import assign from 'lodash.assign'; const { createHigherOrderComponent } = wp.compose; const { Fragment } = wp.element; const { InspectorControls } = wp.blockEditor; const { PanelBody, SelectControl } = wp.components; const { addFilter } = wp.hooks; const { __ } = wp.i18n; // Enable spacing control on the following blocks const enableSpacingControlOnBlocks = [ 'core/image', ]; // Available spacing control options const spacingControlOptions = [ { label: __( 'None' ), value: '', }, { label: __( 'Small' ), value: 'small', }, { label: __( 'Medium' ), value: 'medium', }, { label: __( 'Large' ), value: 'large', }, ]; /** * Add spacing control attribute to block. * * @param {object} settings Current block settings. * @param {string} name Name of block. * * @returns {object} Modified block settings. */ const addSpacingControlAttribute = ( settings, name ) => { // Do nothing if it's another block than our defined ones. /* if ( ! enableSpacingControlOnBlocks.includes( name ) ) { return settings; } */ // Use Lodash's assign to gracefully handle if attributes are undefined settings.attributes = assign( settings.attributes, { spacing: { type: 'string', default: spacingControlOptions[ 0 ].value, }, } ); return settings; }; addFilter( 'blocks.registerBlockType', 'extend-block-example/attribute/spacing', addSpacingControlAttribute ); /** * Create HOC to add spacing control to inspector controls of block. */ const withSpacingControl = createHigherOrderComponent( ( BlockEdit ) => { return ( props ) => { // Do nothing if it's another block than our defined ones. /* if ( ! enableSpacingControlOnBlocks.includes( props.name ) ) { return ( ); } */ const { spacing } = props.attributes; // add has-spacing-xy class to block if ( spacing ) { props.attributes.className = `has-spacing-${ spacing }`; } return ( { props.setAttributes( { spacing: selectedSpacingOption, } ); } } /> ); }; }, 'withSpacingControl' ); addFilter( 'editor.BlockEdit', 'extend-block-example/with-spacing-control', withSpacingControl ); /** * Add margin style attribute to save element of block. * * @param {object} saveElementProps Props of save element. * @param {Object} blockType Block type information. * @param {Object} attributes Attributes of block. * * @returns {object} Modified props of save element. */ const addSpacingExtraProps = ( saveElementProps, blockType, attributes ) => { // Do nothing if it's another block than our defined ones. /* if ( ! enableSpacingControlOnBlocks.includes( blockType.name ) ) { return saveElementProps; } */ const margins = { small: '5px', medium: '15px', large: '30px', }; if ( attributes.spacing in margins ) { // Use Lodash's assign to gracefully handle if attributes are undefined assign( saveElementProps, { style: { 'margin-bottom': margins[ attributes.spacing ] } } ); } return saveElementProps; }; addFilter( 'blocks.getSaveContent.extraProps', 'extend-block-example/get-save-content/extra-props', addSpacingExtraProps ); ``` Any advices on how to tweak this plugin to fix validation issues ? ![Screenshot 2020-07-22 at 16 01 53](https://user-images.githubusercontent.com/7793088/88193667-98b50a80-cc46-11ea-9791-d4c6fc121e72.png) ![screencast 2020-07-22 15-51-23](https://user-images.githubusercontent.com/7793088/88195238-7b813b80-cc48-11ea-8007-dec25a83923a.gif)

GitHub Explorer

extend-block-example-wp-plugin

Score Breakdown

Production Dependencies (1)

Development Dependencies (9)

Production Dependencies (1)

Development Dependencies (9)

Issues Activity: Last 6 months

Hottest Issues