Extending core blocks – Add a custom control UI to core group ‘ROW’
-
I want to add a control UI ONLY to the core/group ‘ROW’. Not the ‘GROUP’ or ‘STACK’, just the ‘ROW’ variation. I was able to add in my control UI to the core/group, but how can I target the ‘ROW’ variation, so the control UI only shows up when I am using ROW ?
Below is my code:
function enable_row_stack_render_block_columns( $block_content, $block ) { $row_stack_on_mobile = isset( $block['attrs']['isRowStackOnMobile'] ) ? $block['attrs']['isRowStackOnMobile'] : false; if ( ! $row_stack_on_mobile ) { return $block_content; } // Append the custom class to the block. $p = new WP_HTML_Tag_Processor( $block_content ); if ( $p->next_tag() ) { $p->add_class( 'is-row-stack-on-mobile' ); } $block_content = $p->get_updated_html(); return $block_content; } add_filter( 'render_block_core/group', 'enable_row_stack_render_block_columns', 10, 2 );
/** * External dependencies */ import classnames from 'classnames'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import { InspectorControls } from '@wordpress/block-editor'; import { ToggleControl } from '@wordpress/components'; function addAttributes( settings ) { if ( 'core/group' !== settings.name ) { return settings; } // Add the attribute. const rowAttributes = { isRowStackOnMobile: { type: 'boolean', default: false, }, }; const newSettings = { ...settings, attributes: { ...settings.attributes, ...rowAttributes, }, }; return newSettings; } addFilter( 'blocks.registerBlockType', 'enable-row-stack/add-attributes', addAttributes ); /** * Filter the BlockEdit object and add icon inspector controls to button blocks. * * @since 0.1.0 * @param {Object} BlockEdit */ function addInspectorControls( BlockEdit ) { return ( props ) => { if ( props.name !== 'core/group' ) { return <BlockEdit { ...props } />; } const { attributes, setAttributes } = props; const { isRowStackOnMobile } = attributes; return ( <> <BlockEdit { ...props } /> <InspectorControls> <div className="enable-row-stack-container"> <ToggleControl label={ __( 'Row Stack on mobile', 'enable-row-stack' ) } checked={ isRowStackOnMobile } onChange={ () => { setAttributes( { isRowStackOnMobile: ! isRowStackOnMobile, } ); } } /> </div> </InspectorControls> </> ); }; } addFilter( 'editor.BlockEdit', 'enable-row-stack/add-inspector-controls', addInspectorControls ); /** * Add icon and position classes in the Editor. * * @since 0.1.0 * @param {Object} BlockListBlock */ function addClasses( BlockListBlock ) { return ( props ) => { const { name, attributes } = props; if ( 'core/group' !== name || ! attributes?.isRowStackOnMobile ) { return <BlockListBlock { ...props } />; } const classes = classnames( props?.className, { 'is-row-stack-on-mobile': attributes?.isRowStackOnMobile, } ); return <BlockListBlock { ...props } className={ classes } />; }; } addFilter( 'editor.BlockListBlock', 'enable-row-stack/add-classes', addClasses );
thank you!
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘Extending core blocks – Add a custom control UI to core group ‘ROW’’ is closed to new replies.