Extending Kadence Blocks

Hey Thanks for posting,
Are you wanting basically a custom css box per block? Or are you wanting to add a specific setting?

Ben

Hi Ben,

I want to add a set of specific settings to some of the built in Kadence blocks. For example add some extra drop downs to the Advance Button panel and etc.

Alex

Hey,
Is this a feature that you would like to request I add? There are workarounds to filter the output of the content but It’s hard to offer any suggestions unless you can tell me exactly what you are wanting to do.

Ben

Hi Ben,

It would be great to just provide a code example. One of the extra settings I wish to add is 100% width to Advance Buttons. In cases where I want the button to span the full width of its container.

This setting doesn’t have to be individual to each button but can be applied to the whole Advanced Buttons block. In this example case I would like to add an extra checkbox to the Advanced Buttons settings panel with label ‘[] Span Full-width’.

Alex

I added the setting to the latest version of the plugin which is out.

For a code example on how you could do this here is what it could look like:

const {
	Fragment,
} = wp.element;
const {
	InspectorControls,
} = wp.editor;
const {
	PanelBody,
	ToggleControl,
} = wp.components;
const { createHigherOrderComponent } = wp.compose;
const { __ } = wp.i18n;
const { addFilter } = wp.hooks;
import assign from 'lodash/assign';

/**
 * Add attribute to the block
 *
 * @param {Object} settings blocks settings.
 * @param {String} name blocks name.
 * @return {Object} the block settings.
 */
export function prefixAddAttribute( settings, name ) {
	if ( name !== 'kadence/advancedbtn' ) {
		return settings;
	}
	settings.attributes = assign( settings.attributes, {
		btnFullwidth: {
			type: 'bool',
			default: false,
		},
	} );
	return settings;
}
addFilter( 'blocks.registerBlockType', 'prefix/editbutton', prefixAddAttribute );

/**
 * Build setting.
 */
const prefixAddControl = createHigherOrderComponent( ( BlockEdit ) => {
	return ( props ) => {
		if ( props.name === 'kadence/advancedbtn' && props.isSelected ) {
			const { attributes: { btnFullwidth }, setAttributes } = props;
			return (
				<Fragment>
					<BlockEdit { ...props } />
					<InspectorControls>
						<PanelBody
							title={ __( 'Fullwidth Button' ) }
							initialOpen={ false }
						>
							<ToggleControl
								label={ __( 'Set button to fullwidth?' ) }
								checked={ ( undefined !== btnFullwidth ? btnFullwidth : false ) }
								onChange={ ( value ) => setAttributes( { btnFullwidth: value } ) }
							/>
						</PanelBody>
					</InspectorControls>
				</Fragment>
			);
		}
		return <BlockEdit { ...props } />;
	};
}, 'withInspectorControl' );
addFilter( 'editor.BlockEdit', 'prefix/editbutton', prefixAddControl );

function prefixAddData( props, blockType, attributes ) {
	if ( blockType === 'kadence/advancedbtn' && attributes.btnFullwidth ) {
		assign( props, { 'class': ( attributes.btnFullwidth ? 'class-button-is-fullwidth' : undefined } );
	}
	return props;
}
addFilter( 'blocks.getSaveContent.extraProps', 'prefix/editbutton', prefixAddData );

There are three steps. First you add in the attribute to the block, then you add in the settings so they show when using the block and finally you add in an extra class if the toggle is checked. Using that you just load the css on the front end that would allow you to style the block based on the added class.

I hope that helps,

Ben

Ben this is very helpful and thank you for your prompt feedback! This makes me feel very confident using this plugin for our project.

You bet,

Ben

Hey Ben,

Is it also possible to add extra drop-down selector to the individual button settings? We need a selector that determines which attributes are added to the anchor that in the end will effect Google Tag Manager event.

Alex

That gets more tricky, you can’t hook into the current single item settings so you would have to create a new section that had a dropdown for each button… then to change the anchor attributes you would have to filter the html of the block because I don’t believe there is a way to add attributes to inner items.

So I think I would suggest making your own block rather than that route. But I’m happy to take feature requests, can you outline exactly what you are wanting and I can look at adding it. For example you can already define a custom class on individual button control.

Ben