Skip to content

Instantly share code, notes, and snippets.

@landbryo
Created December 20, 2023 18:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save landbryo/090f6801e4e3d603069813976cea49b7 to your computer and use it in GitHub Desktop.
Save landbryo/090f6801e4e3d603069813976cea49b7 to your computer and use it in GitHub Desktop.
Modify paragraph controls to add "Lead" and "Endmark" toggles.
import { createHigherOrderComponent } from '@wordpress/compose';
import { InspectorControls } from "@wordpress/block-editor";
import { __experimentalToolsPanelItem as ToolsPanelItem, ToggleControl, } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const editParagraphAttributes = function ( settings, name ) {
if ( 'core/paragraph' === name ) {
settings.supports = {
...settings.supports,
dimensions: false,
anchor: false,
color: false,
typography: false
};
settings.attributes = {
...settings.attributes,
endMark: {
type: 'boolean',
},
lead: {
type: 'boolean',
}
}
}
return settings;
};
const editParagraphEdit = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
const { attributes, setAttributes, clientId } = props;
return (
<>
<BlockEdit { ...props } />
<InspectorControls group="typography">
<ToolsPanelItem
hasValue={ () => !! attributes.endMark }
label={ __( 'Endmark', 'example' ) }
panelId={ clientId }
>
<ToggleControl
label={ __( 'Endmark', 'example' ) }
checked={ attributes.endMark }
onChange={ ( value ) =>
setAttributes( { endMark: value } )
}
help={ __( 'Toggle to show a end mark.', 'example' ) }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !! attributes.lead }
label={ __( 'Lead', 'example' ) }
panelId={ clientId }
>
<ToggleControl
label={ __( 'Lead', 'example' ) }
checked={ attributes.lead }
onChange={ ( value ) =>
setAttributes( { lead: value } )
}
help={ __( 'Toggle to enable a lead.', 'example' ) }
/>
</ToolsPanelItem>
</InspectorControls>
</>
);
};
}, 'withInspectorControl' );
export { editParagraphAttributes, editParagraphEdit };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment