Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import assign from 'lodash.assign';
- const { __ } = wp.i18n;
- const { registerBlockType } = wp.blocks;
- const { InspectorControls } = wp.blockEditor;
- const { Component, Fragment } = wp.element;
- const { RangeControl } = wp.components;
- wp.hooks.addFilter(
- 'blocks.registerBlockType',
- 'elder/thicknessAttribute',
- settings => {
- if(settings.name === 'core/separator') {
- settings.attributes = {
- ...settings.attributes,
- elderThickness: {
- type: 'number',
- default: 1,
- },
- };
- }
- return settings;
- }
- );
- wp.hooks.addFilter(
- 'editor.BlockEdit',
- 'elder/thicknessInput',
- wp.compose.createHigherOrderComponent(
- BlockEdit => props => {
- if(props.name === 'core/separator') {
- return (
- <Fragment>
- <BlockEdit {...props} />
- <InspectorControls>
- <RangeControl
- label="Thickness"
- min={ 1 }
- max={ 10 }
- value={props.attributes.elderThickness}
- onChange={nextRel => props.setAttributes({elderThickness: nextRel})}
- />
- </InspectorControls>
- </Fragment>
- );
- }
- return <BlockEdit {...props} />;
- },
- 'withelderThicknessInput'
- )
- );
- wp.hooks.addFilter( 'blocks.getSaveContent.extraProps', 'elder/rel', ( element, block, attributes ) => {
- if(block.name === 'core/separator') {
- if(attributes.elderThickness) {
- assign( element, { style: { 'borderTopWidth': attributes.elderThickness } } );
- }
- }
- return element;
- } )
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement