• 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)
  • I would suggest to replace the code of this function addInspectorControls

    function addInspectorControls( BlockEdit ) {
    	return ( props ) => {
          const { attributes, setAttributes } = props;
    		const { isRowStackOnMobile } = attributes;
    		if ( props.name !== 'core/group' ) {
    			return <BlockEdit { ...props } />;
    		}else if(props.name === 'core/group' && attributes.orientation === 'horizontal') {
    
    		
    
    		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>
    			</>
    		);
              }
    	};
    }
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.