Last active
February 13, 2019 13:52
-
-
Save emfluenceindia/71846f7c76b19f8a974a0c3e0a30d4df to your computer and use it in GitHub Desktop.
Gutenberg Custom Block for adding columns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Watcher can't resolve
memize
in my above code. I have opened a help request at WordPress/gutenberg#13859