From d96d79b3dadf87ef38338fb82877570a0fae5ab6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Mon, 23 Apr 2018 12:02:50 +0200 Subject: [PATCH] Blocks: Fix BlockEdit hooks not working properly with context (#6312) --- blocks/block-edit/context.js | 2 +- blocks/block-edit/edit.js | 52 ++++++++++++++++++++ blocks/block-edit/index.js | 35 ++----------- blocks/block-edit/test/{index.js => edit.js} | 12 ++--- 4 files changed, 62 insertions(+), 39 deletions(-) create mode 100644 blocks/block-edit/edit.js rename blocks/block-edit/test/{index.js => edit.js} (81%) diff --git a/blocks/block-edit/context.js b/blocks/block-edit/context.js index dd9a55359794f..939cd9c981e0a 100644 --- a/blocks/block-edit/context.js +++ b/blocks/block-edit/context.js @@ -4,7 +4,7 @@ import { createContext, createHigherOrderComponent } from '@wordpress/element'; const { Consumer, Provider } = createContext( { - isSelected: true, + isSelected: false, } ); export { Provider as BlockEditContextProvider }; diff --git a/blocks/block-edit/edit.js b/blocks/block-edit/edit.js new file mode 100644 index 0000000000000..252d6b2dd27c9 --- /dev/null +++ b/blocks/block-edit/edit.js @@ -0,0 +1,52 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { noop } from 'lodash'; + +/** + * WordPress dependencies + */ +import { withFilters } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { + getBlockType, + getBlockDefaultClassName, + hasBlockSupport, +} from '../api'; + +export const Edit = ( props ) => { + const { attributes = {}, isSelected, name } = props; + const blockType = getBlockType( name ); + + if ( ! blockType ) { + return null; + } + + // Generate a class name for the block's editable form + const generatedClassName = hasBlockSupport( blockType, 'className', true ) ? + getBlockDefaultClassName( name ) : + null; + const className = classnames( generatedClassName, attributes.className ); + + // `edit` and `save` are functions or components describing the markup + // with which a block is displayed. If `blockType` is valid, assign + // them preferentially as the render value for the block. + const Component = blockType.edit || blockType.save; + + // For backwards compatibility concerns adds a focus and setFocus prop + // These should be removed after some time (maybe when merging to Core) + return ( + + ); +}; + +export default withFilters( 'blocks.BlockEdit' )( Edit ); diff --git a/blocks/block-edit/index.js b/blocks/block-edit/index.js index 9ab2b6bb2450c..7f1324e34ed62 100644 --- a/blocks/block-edit/index.js +++ b/blocks/block-edit/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import classnames from 'classnames'; import { noop, get } from 'lodash'; /** @@ -9,16 +8,12 @@ import { noop, get } from 'lodash'; */ import { withSelect } from '@wordpress/data'; import { Component, compose } from '@wordpress/element'; -import { withContext, withFilters, withAPIData } from '@wordpress/components'; +import { withContext, withAPIData } from '@wordpress/components'; /** * Internal dependencies */ -import { - getBlockType, - getBlockDefaultClassName, - hasBlockSupport, -} from '../api'; +import Edit from './edit'; import { BlockEditContextProvider } from './context'; export class BlockEdit extends Component { @@ -56,34 +51,11 @@ export class BlockEdit extends Component { } render() { - const { name, attributes = {}, isSelected } = this.props; - const blockType = getBlockType( name ); - - if ( ! blockType ) { - return null; - } - - // Generate a class name for the block's editable form - const generatedClassName = hasBlockSupport( blockType, 'className', true ) ? - getBlockDefaultClassName( name ) : - null; - const className = classnames( generatedClassName, attributes.className ); - - // `edit` and `save` are functions or components describing the markup - // with which a block is displayed. If `blockType` is valid, assign - // them preferentially as the render value for the block. - const Edit = blockType.edit || blockType.save; - // For backwards compatibility concerns adds a focus and setFocus prop // These should be removed after some time (maybe when merging to Core) return ( - + ); } @@ -95,7 +67,6 @@ BlockEdit.childContextTypes = { }; export default compose( [ - withFilters( 'blocks.BlockEdit' ), withSelect( ( select ) => ( { postType: select( 'core/editor' ).getEditedPostAttribute( 'type' ), } ) ), diff --git a/blocks/block-edit/test/index.js b/blocks/block-edit/test/edit.js similarity index 81% rename from blocks/block-edit/test/index.js rename to blocks/block-edit/test/edit.js index 3564c499e1867..572630ca0aae1 100644 --- a/blocks/block-edit/test/index.js +++ b/blocks/block-edit/test/edit.js @@ -7,14 +7,14 @@ import { noop } from 'lodash'; /** * Internal dependencies */ -import { BlockEdit } from '../'; +import { Edit } from '../edit'; import { registerBlockType, unregisterBlockType, getBlockTypes, } from '../../api'; -describe( 'BlockEdit', () => { +describe( 'Edit', () => { afterEach( () => { getBlockTypes().forEach( ( block ) => { unregisterBlockType( block.name ); @@ -22,7 +22,7 @@ describe( 'BlockEdit', () => { } ); it( 'should return null if block type not defined', () => { - const wrapper = shallow( ); + const wrapper = shallow( ); expect( wrapper.type() ).toBe( null ); } ); @@ -36,7 +36,7 @@ describe( 'BlockEdit', () => { edit, } ); - const wrapper = shallow( ); + const wrapper = shallow( ); expect( wrapper.find( edit ) ).toBePresent(); } ); @@ -49,7 +49,7 @@ describe( 'BlockEdit', () => { title: 'block title', } ); - const wrapper = shallow( ); + const wrapper = shallow( ); expect( wrapper.find( save ) ).toBePresent(); } ); @@ -67,7 +67,7 @@ describe( 'BlockEdit', () => { } ); const wrapper = shallow( - + ); expect( wrapper.find( edit ) ).toHaveClassName( 'wp-block-test-block my-class' );