Block Context in editor.BlockEdit filter

  • pookaknight

    (@pookaknight)


    4 years ago

    I’m trying to extend a core gutenberg block so that it has a couple of additional options only when it’s contained in a certain custom made block. I thought block context would make this a simple task — set the container block to providesContext and use the blocks.registerBlockType filter to add usesContext to the core block. In the editor.BlockEdit filter, I thought I’d be able to get context from the block’s props. However, context is not one of the props. To make sure I wasn’t doing anything wrong around context, I used the editor.BlockEdit filter on one of my custom blocks that I knew was receiving block context correctly. It doesn’t have context as one of its props either.

    Does anyone know of a way to get block context into the editor.BlockEdit filter?

    For reference, here is a snippet of the code so far:

    registerBlockType( 'card/main', {
	title: 'Card',
	icon: 'images-alt2',
	category: 'utdesign_system',
	description: '',
	attributes: {
		blockName: {
			type: 'string',
			default: 'card',
		}
	},
	providesContext: {
    	'card/blockName': 'blockName',
	},
	edit,
	save,
} );

function addImageContext( settings ) {
	if( settings.name == 'core/image' ){
		settings.usesContext = Object.assign( ['card/blockName'] );
	}
	return settings;
}

addFilter(
	'blocks.registerBlockType',
	'gutenstrap/image-context',
	addImageContext
);

const addImageControls =  createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
		
		const {
			name,
			attributes,
			setAttributes,
			context,
			isSelected,
		} = props;
		//do stuff with context
    };
}, "addImageControls" );

addFilter(
	'editor.BlockEdit',
	'gutenstrap/image-context',
	addImageControls
);
Viewing 1 replies (of 1 total)

  • Hm, I tried out your code and I also wasn’t able to get the context to work when extending a block. However, if all you want is to check whether you’re in the card/main block, you could do this:

    
const addImageControls = createHigherOrderComponent( ( BlockEdit ) => {
	return ( props ) => {
		const isBlockInCard = useSelect( ( select ) => {
			const { getBlockParents, getBlocksByClientId } = select( 'core/block-editor' );

			const parentIds = getBlockParents( props.clientId, [ 'card/main' ] );
			const parents = getBlocksByClientId( parentIds );
			return parents.some( block => 'card/main' === block.name );
		} );

		if ( props.name === 'core/image' && isBlockInCard ) {
			// Do your custom stuff here.
			return <BlockEdit { ...props } />;
		}

		return <BlockEdit { ...props } />;
	};
}, "addImageControls" );

addFilter(
	'editor.BlockEdit',
	'gutenstrap/image-context',
	addImageControls
);

    And you don’t need the addImageContext function.

    This uses useSelect to get data from the block editor, pull out the parents of the current block, and checks if any are the card/main block.

Viewing 1 replies (of 1 total)
  • The topic ‘Block Context in editor.BlockEdit filter’ is closed to new replies.