Skip to content

Instantly share code, notes, and snippets.

@emfluenceindia
Last active February 13, 2019 13:52
Show Gist options
  • Save emfluenceindia/71846f7c76b19f8a974a0c3e0a30d4df to your computer and use it in GitHub Desktop.
Save emfluenceindia/71846f7c76b19f8a974a0c3e0a30d4df to your computer and use it in GitHub Desktop.
Gutenberg Custom Block for adding columns
/**
* Custom Column control
* Reference: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/columns/index.js
*/
import { times } from 'lodash';
import classnames from 'classnames'
import memoize from 'memize';
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const { PanelBody, RangeControl, G, SVG, Path } = wp.components;
const { Fragment } = wp.element;
const { registerBlockType } = wp.blocks;
const { InspectorControls, InnerBlocks } = wp.editor;
/**
* Allowed blocks constant is passed to InnerBlocks precisely as specified here.
* The contents of the array should never be changed.
* The array should contain the name of each block that we are allowing.
* In columns block, the only block we are allowing is 'core/column'.
*
* @constant
* @type {string[]}
*/
const ALLOWED_BLOCKS = [ 'core/column' ];
/**
* Returns the layouts configuration for a given number of columns.
*
* @param {number} columns Number of columns.
*
* @return {object[]} Columns layout configuration.
*/
const getColumnsTemplate = memoize( (customColumns) => {
return times( customColumns, () => [ 'core/column' ] );
} );
function hall_block_content_column() {
registerBlockType( 'hallmark/custom-cloumn-builder', {
title: 'Hallmark Column Buidler',
icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M4,4H20a2,2,0,0,1,2,2V18a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4ZM4 6V18H8V6Zm6 0V18h4V6Zm6 0V18h4V6Z" /></G></SVG>,
category: 'formatting',
keywords: [
__( 'Hallmark column builder' ),
__( 'Custom column builder' ),
__( 'Hall columns' )
],
attributes: {
columns: {
type: 'number',
default: 2
}
},
description: __( 'Create multiple columns' ),
supports: {
align: [ 'wide', 'full' ],
html: false
},
edit: function( props ) {
const howManyColumns = props.attributes.columns;
function onModifyColumnNumber( totalColumns ) {
props.setAttributes( { columns: totalColumns } )
}
return(
<Fragment>
<InspectorControls>
<PanelBody>
<RangeControl
label={ __( 'Columns' ) }
value={ howManyColumns }
onChange={ onModifyColumnNumber }
min={2}
max={6}
/>
</PanelBody>
</InspectorControls>
<div className={props.className}>
<InnerBlocks
template={ getColumnsTemplate( howManyColumns ) }
allowedBlocks={ ALLOWED_BLOCKS }
/>
</div>
</Fragment>
);
},
save: function ( props ) {
return null;
}
} );
}
export default hall_block_content_column();
@emfluenceindia
Copy link
Author

Watcher can't resolve memize in my above code. I have opened a help request at WordPress/gutenberg#13859

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment