first commit

wp-content/plugins/canvas/components/layout-blocks/block-column/block.jsx

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+const {
+    addFilter,
+} = wp.hooks;
+
+/**
+ * Internal dependencies
+ */
+import ColumnBlockEdit from './edit.jsx';
+import ColumnBlockSave from './save.jsx';
+import changeColumnSize from './change-column-size';
+
+const CNVS_PREVENT_UPDATE = 'CNVS_PREVENT_UPDATE';
+
+/**
+ * Custom block Edit output for Column block.
+ *
+ * @param {JSX} edit Original block edit.
+ * @param {Object} blockProps Block data.
+ *
+ * @return {JSX} Block edit.
+ */
+function editRender( edit, blockProps ) {
+	if ( 'canvas/column' === blockProps.name ) {
+		return (
+			<ColumnBlockEdit { ...blockProps } />
+		);
+	}
+
+    return edit;
+}
+
+/**
+ * Custom block register data for Column block.
+ *
+ * @param {Object} blockData Block data.
+ *
+ * @return {Object} Block data.
+ */
+function registerData( blockData ) {
+	if ( 'canvas/column' === blockData.name ) {
+		blockData.save = ColumnBlockSave;
+	}
+
+    return blockData;
+}
+
+/**
+ * Compensate adjacent columns, when changing size directly in field.
+ *
+ * @param {Mixed} val Attribute value.
+ * @param {String} name Attribute name.
+ * @param {Object} blockProps Block data.
+ *
+ * @return {Mixed} Attribute value.
+ */
+function onFieldChange( val, name, blockProps ) {
+	if ( 'canvas/column' === blockProps.name && 'size' === name ) {
+		changeColumnSize( blockProps.clientId, val, true );
+		return CNVS_PREVENT_UPDATE;
+	}
+
+    return val;
+}
+
+addFilter( 'canvas.customBlock.editRender', 'canvas/column/editRender', editRender );
+addFilter( 'canvas.customBlock.registerData', 'canvas/column/registerData', registerData );
+addFilter( 'canvas.customBlock.onFieldChange', 'canvas/column/changeColumnSize', onFieldChange );

wp-content/plugins/canvas/components/layout-blocks/block-column/change-column-size.jsx

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies.
+ */
+const {
+	getBlockRootClientId,
+	getBlocks,
+	getBlockAttributes,
+} = wp.data.select( 'core/block-editor' );
+
+const {
+	jQuery: $,
+} = window;
+
+/**
+ * Internal dependencies
+ */
+import { getAdjacentBlocks } from './utils';
+
+const MIN_COL_SIZE = 1;
+
+/**
+ * Update columns size.
+ *
+ * First, we update the column size by changing style directly, then we update the block attribute.
+ * This hack is needed to prevent columns jumping as `updateBlockAttributes` don't apply changes immediately.
+ *
+ * @param {*} clientId
+ * @param {*} size
+ */
+function updateAttribute( clientId, size ) {
+	$( `#block-${ clientId }[data-type="canvas/column"]` ).css( {
+		flexBasis: `${ 100 * size / 12 }%`,
+		width: `${ 100 * size / 12 }%`,
+	} );
+
+	wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes(clientId, {
+		size: size,
+	} );
+}
+
+/**
+ * Update columns size and compensate adjacent columns if needed.
+ *
+ * @param {String} clientId - block client id.
+ * @param {Int} size - new column size.
+ * @param {Boolean} compensate - compensate adjacent columns also.
+ */
+export default function( clientId, size, compensate = false ) {
+	if ( ! compensate ) {
+		updateAttribute( clientId, size );
+		return;
+	}
+
+	// Compensate
+	if ( size < MIN_COL_SIZE || size > 12 ) {
+		return;
+	}
+
+	// Constrain or expand siblings to account for gain or loss of
+	// total columns area.
+	const columns = getBlocks( getBlockRootClientId( clientId ) );
+	const adjacentColumns = getAdjacentBlocks( columns, clientId );
+	const thisColumnAttrs = getBlockAttributes( clientId );
+
+	let neededSize = size - thisColumnAttrs.size;
+
+	/*
+	 * Make col smaller.
+	 */
+	if ( neededSize < 0 ) {
+		// set new size to current column.
+		updateAttribute( clientId, size );
+
+		// set new size to next column.
+		updateAttribute( adjacentColumns[0].clientId, adjacentColumns[0].attributes.size - neededSize );
+	} else if ( neededSize > 0) {
+		/*
+		 * Make col larger.
+		 */
+		let availableSize = 0;
+		adjacentColumns.map( ( colData ) => {
+			if ( colData.attributes.size > MIN_COL_SIZE ) {
+				availableSize += colData.attributes.size - MIN_COL_SIZE;
+			}
+		} );
+
+		// we can't change size, because no space available on the right.
+		if ( ! availableSize || neededSize > availableSize ) {
+			return;
+		}
+
+		// set new size to current column.
+		updateAttribute( clientId, size );
+
+		// set new size to adjacent columns.
+		adjacentColumns.forEach( ( colData ) => {
+			if ( neededSize > 0 && colData.attributes.size > MIN_COL_SIZE ) {
+				const newColSize = Math.max( colData.attributes.size - neededSize, MIN_COL_SIZE );
+				neededSize -= colData.attributes.size - newColSize;
+
+				updateAttribute( colData.clientId, newColSize );
+			}
+		} );
+	}
+}

wp-content/plugins/canvas/components/layout-blocks/block-column/edit.jsx

@@ -0,0 +1,199 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { throttle } from 'throttle-debounce';
+
+/**
+ * WordPress dependencies
+ */
+const $ = window.jQuery;
+
+const { Component, Fragment } = wp.element;
+
+const {
+	InnerBlocks,
+} = wp.blockEditor;
+
+const {
+	compose,
+} = wp.compose;
+
+const {
+	withSelect,
+} = wp.data;
+
+/**
+ * Internal dependencies
+ */
+import getStyles from './styles';
+import changeColumnSize from './change-column-size';
+
+/**
+ * Component
+ */
+class ColumnBlockEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			resizing: false,
+			resizingContainerWidth: 0,
+			resizingCursorPosition: 0,
+			resizingColSize: 0,
+		};
+
+		this.onResizeStart = this.onResizeStart.bind( this );
+		this.onResizing = throttle( 150, this.onResizing.bind( this ) );
+		this.onResizeEnd = this.onResizeEnd.bind( this );
+	}
+
+	componentDidMount() {
+		document.addEventListener( 'mousemove', this.onResizing );
+		document.addEventListener( 'mouseup', this.onResizeEnd );
+	}
+	componentWillUnmount() {
+		document.removeEventListener( 'mousemove', this.onResizing );
+		document.removeEventListener( 'mouseup', this.onResizeEnd );
+	}
+
+	/**
+	 * On start column resize
+	 *
+	 * @param {Object} e event.
+	 */
+	onResizeStart( e ) {
+		const {
+			clientId,
+			attributes,
+		} = this.props;
+
+		const $column = $(`[data-block="${ clientId }"`);
+		const $parentRow = $column.closest('.cnvs-block-row');
+
+		this.setState( {
+			resizing: true,
+			resizingContainerWidth: $parentRow.width(),
+			resizingCursorPosition: e.clientX,
+			resizingColSize: attributes.size,
+		} );
+
+		e.preventDefault();
+	}
+
+	/**
+	 * On resizing column
+	 *
+	 * @param {Object} e event.
+	 */
+	onResizing( e ) {
+		if ( ! this.state.resizing ) {
+			return;
+		}
+
+		const {
+			attributes,
+			clientId,
+		} = this.props;
+
+		const mouseMoved = e.clientX - this.state.resizingCursorPosition;
+		const oneColumnSize = this.state.resizingContainerWidth / 12;
+		const columnsResized = Math.round( mouseMoved / oneColumnSize );
+		const newSize = this.state.resizingColSize + columnsResized;
+
+		if ( newSize !== attributes.size ) {
+			changeColumnSize( clientId, newSize, true );
+		}
+	}
+
+	/**
+	 * On end column resize
+	 *
+	 * @param {Object} e event.
+	 */
+	onResizeEnd( e ) {
+		if ( ! this.state.resizing ) {
+			return;
+		}
+
+		e.preventDefault();
+
+		this.setState( {
+			resizing: false,
+			resizingContainerWidth: 0,
+			resizingCursorPosition: 0,
+			resizingColSize: 0,
+		} );
+	}
+
+	render() {
+		const {
+			hasChildBlocks,
+			attributes,
+			clientId,
+		} = this.props;
+
+		const {
+			canvasClassName,
+		} = attributes;
+
+		let {
+			className,
+		} = this.props;
+
+		className = classnames(
+			'cnvs-block-column',
+			canvasClassName,
+			className
+		);
+
+		return (
+			<Fragment>
+				<div className={ className }>
+					<div className="cnvs-block-column-inner" data-min-height={ attributes['minHeight'] }>
+						<div>
+							<InnerBlocks
+								templateLock={ false }
+								renderAppender={ (
+									hasChildBlocks ?
+										undefined :
+										() => <InnerBlocks.ButtonBlockAppender />
+								) }
+							/>
+						</div>
+					</div>
+				</div>
+				<div
+					className="cnvs-block-column-resizer"
+					draggable="true"
+					onMouseDown={ ( e ) => { this.onResizeStart( e ) } }
+				>
+					<span />
+				</div>
+				<style>{ canvasClassName && clientId ? getStyles( attributes, canvasClassName, clientId ) : '' }</style>
+			</Fragment>
+		);
+	}
+}
+
+const ColumnBlockEditWithSelect = compose(
+	withSelect( ( select, ownProps ) => {
+		const {
+			clientId,
+		} = ownProps;
+
+		const {
+			getBlockRootClientId,
+			getBlocks,
+			getBlockOrder,
+		} = select( 'core/block-editor' );
+
+		return {
+			getBlockRootClientId,
+			getBlocks,
+			hasChildBlocks: getBlockOrder( clientId ).length > 0,
+		};
+	} )
+)( ColumnBlockEdit );
+
+export default ColumnBlockEditWithSelect;

wp-content/plugins/canvas/components/layout-blocks/block-column/render.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * Column block template
+ *
+ * @var     $attributes - block attributes
+ * @var     $content - inner blocks
+ * @var     $options - layout options
+ *
+ * @package Canvas
+ */
+?>
+
+<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
+	<div class="cnvs-block-column-inner">
+		<div>
+			<?php echo (string) $content; // XSS. ?>
+		</div>
+	</div>
+</div>

wp-content/plugins/canvas/components/layout-blocks/block-column/save.jsx

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+const { Component } = wp.element;
+
+const {
+    InnerBlocks,
+} = wp.blockEditor;
+
+/**
+ * Component
+ */
+export default class ColumnBlockSave extends Component {
+	render() {
+        return <InnerBlocks.Content />;
+	}
+}

wp-content/plugins/canvas/components/layout-blocks/block-column/styles.jsx

@@ -0,0 +1,114 @@
+/**
+ * Internal dependencies
+ */
+const {
+	canvasBreakpoints,
+} = window;
+
+/**
+ * Row block styles for Editor
+ *
+ * @param {Object} attributes block attributes
+ * @param {String} className block class name
+ * @param {String} clientId block client id
+ *
+ * @returns {String}
+ */
+export default function( attributes, className, clientId ) {
+	let result = '';
+	let hideResizer = true;
+
+	Object.keys( canvasBreakpoints ).forEach( ( name ) => {
+		const data = canvasBreakpoints[ name ];
+		let styles = '';
+		let suffix = '';
+
+		if ( 'desktop' !== name ) {
+			suffix = `_${ name }`;
+		}
+
+		/**
+		 * Hide resizer.
+		 */
+		if ( suffix && hideResizer ) {
+			hideResizer = false;
+			styles += `
+				.${ className } + .cnvs-block-column-resizer {
+					display: none;
+				}
+			`;
+		}
+
+		/**
+		 * Size.
+		 */
+		if ( attributes[ `size${ suffix }` ] ) {
+			const size = attributes[ `size${ suffix }` ];
+			styles += `
+				#block-${ clientId }[data-type="canvas/column"] {
+					-ms-flex-preferred-size: ${ 100 * size / 12 }%;
+					flex-basis: ${ 100 * size / 12 }%;
+					width: ${ 100 * size / 12 }%;
+				}
+			`;
+		}
+
+		/**
+		 * Order.
+		 */
+		if ( attributes[ `order${ suffix }` ] ) {
+			const order = attributes[ `order${ suffix }` ];
+			styles += `
+				#block-${ clientId }[data-type="canvas/column"] {
+					-ms-flex-order: ${ order };
+					order: ${ order };
+				}
+			`;
+		}
+
+		/**
+		 * Min Height.
+		 */
+		if ( attributes[ `minHeight${ suffix }` ] ) {
+			const minHeight = attributes[ `minHeight${ suffix }` ];
+			styles += `
+				.${ className } > .cnvs-block-column-inner {
+					min-height: ${ minHeight };
+				}
+			`;
+		}
+
+		/**
+		 * Vertical Align.
+		 */
+		if ( attributes[ `verticalAlign${ suffix }` ] ) {
+			let verticalAlign = attributes[ `verticalAlign${ suffix }` ];
+
+			if ( 'top' === verticalAlign ) {
+				verticalAlign = 'flex-start';
+			} else if ( 'bottom' === verticalAlign ) {
+				verticalAlign = 'flex-end';
+			}
+
+			styles += `
+				#block-${ clientId }[data-type="canvas/column"] {
+					justify-content: ${ verticalAlign };
+				}
+				.${ className } > .cnvs-block-column-inner {
+					align-items: ${ verticalAlign };
+				}
+			`;
+		}
+
+		// add media query.
+		if ( suffix && styles ) {
+			styles = `@media (max-width: ${ data.width }px) { ${ styles } } `;
+		}
+
+		if ( styles ) {
+			result += styles;
+		}
+	} );
+
+	return result;
+}

wp-content/plugins/canvas/components/layout-blocks/block-column/styles.php

@@ -0,0 +1,87 @@
+<?php
+/**
+ * Column block styles for Frontend
+ *
+ * @var     $attributes - block attributes
+ * @var     $class_name - block class name
+ *
+ * @package Canvas
+ */
+
+$breakpoints = cnvs_gutenberg()->get_breakpoints_data();
+
+foreach ( $breakpoints as $name => $data ) {
+	$result = '';
+	$suffix = '';
+
+	if ( 'desktop' !== $name ) {
+		$suffix = '_' . $name;
+	}
+
+	/**
+	 * Size.
+	 */
+	if ( isset( $attributes[ 'size' . $suffix ] ) ) {
+		$size = $attributes[ 'size' . $suffix ];
+		$result .= '
+			.' . esc_attr( $class_name ) . ' {
+				-ms-flex-preferred-size: ' . esc_attr( 100 * $size / 12 ) . '%;
+				flex-basis: ' . esc_attr( 100 * $size / 12 ) . '%;
+			}
+		';
+	}
+
+	/**
+	 * Order.
+	 */
+	if ( isset( $attributes[ 'order' . $suffix ] ) && $attributes[ 'order' . $suffix ] ) {
+		$order = $attributes[ 'order' . $suffix ];
+		$result .= '
+			.' . esc_attr( $class_name ) . ' {
+				-ms-flex-order: ' . esc_attr( $order ) . ';
+				order: ' . esc_attr( $order ) . ';
+			}
+		';
+	}
+
+	/**
+	 * Min Height.
+	 */
+	if ( isset( $attributes[ 'minHeight' . $suffix ] ) && '' !== $attributes[ 'minHeight' . $suffix ] ) {
+		$minHeight = $attributes[ 'minHeight' . $suffix ];
+		$result .= '
+			.' . esc_attr( $class_name ) . ' > .cnvs-block-column-inner {
+				min-height: ' . esc_attr( $minHeight ) . ';
+			}
+		';
+	}
+
+	/**
+	 * Vertical Align.
+	 */
+	if ( isset( $attributes[ 'verticalAlign' . $suffix ] ) && $attributes[ 'verticalAlign' . $suffix ] ) {
+		$verticalAlign = $attributes[ 'verticalAlign' . $suffix ];
+
+		if ( 'top' === $verticalAlign ) {
+			$verticalAlign = 'flex-start';
+		} else if ( 'bottom' === $verticalAlign ) {
+			$verticalAlign = 'flex-end';
+		}
+
+		$result .= '
+			.' . esc_attr( $class_name ) . ',
+			.' . esc_attr( $class_name ) . ' > .cnvs-block-column-inner {
+				align-items: ' . esc_attr( $verticalAlign ) . ';
+			}
+		';
+	}
+
+	// add media query.
+	if ( $suffix && $result ) {
+		$result = '@media (max-width: ' . esc_attr( $data['width'] ) . 'px) { ' . $result . ' } ';
+	}
+
+	if ( $result ) {
+		echo $result; // XSS Ok.
+	}
+}

wp-content/plugins/canvas/components/layout-blocks/block-column/utils.jsx

@@ -0,0 +1,19 @@
+const { findIndex } = window.lodash;
+
+/**
+ * Returns the considered adjacent to that of the specified `clientId` for
+ * resizing consideration. Adjacent blocks are those occurring after, except
+ * when the given block is the last block in the set. For the last block, the
+ * behavior is reversed.
+ *
+ * @param {WPBlock[]} blocks   Block objects.
+ * @param {string}    clientId Client ID to consider for adjacent blocks.
+ *
+ * @return {WPBlock[]} Adjacent block objects.
+ */
+export function getAdjacentBlocks( blocks, clientId ) {
+	const index = findIndex( blocks, { clientId } );
+	const isLastBlock = index === blocks.length - 1;
+
+	return isLastBlock ? blocks.slice( 0, index ) : blocks.slice( index + 1 );
+}

wp-content/plugins/canvas/components/layout-blocks/block-row/block-row-editor-rtl.css

@@ -0,0 +1,138 @@
+/**
+ * All of the CSS for your block editor functionality should be
+ * included in this file.
+ */
+/*--------------------------------------------------------------*/
+.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-wrap: nowrap;
+	flex-wrap: nowrap;
+}
+
+.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"],
+.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] > .cnvs-block-column {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	-webkit-box-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+}
+
+.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] {
+	-ms-flex-preferred-size: 50%;
+	flex-basis: 50%;
+	-webkit-box-flex: 0;
+	-ms-flex-positive: 0;
+	flex-grow: 0;
+	min-width: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+	word-break: break-word;
+	overflow-wrap: break-word;
+}
+
+.cnvs-block-column-inner > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender:not(:first-child) {
+	display: none;
+}
+
+.cnvs-block-column {
+	-webkit-box-align: start;
+	-ms-flex-align: start;
+	align-items: flex-start;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+.cnvs-block-column-inner {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-flex: 100%;
+	-ms-flex: 100%;
+	flex: 100%;
+	width: 100%;
+}
+
+.cnvs-block-column-inner > div {
+	-webkit-box-flex: 100%;
+	-ms-flex: 100%;
+	flex: 100%;
+	width: 100%;
+}
+
+.cnvs-block-column-resizer {
+	position: absolute;
+	left: -2.5px;
+	top: -5px;
+	bottom: -5px;
+	width: 3px;
+	border-radius: 3px;
+	background-color: #017cba;
+	cursor: col-resize;
+	opacity: 0;
+	z-index: 10;
+	-webkit-transition: .3s opacity;
+	transition: .3s opacity;
+}
+
+.cnvs-block-column-resizer:after {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 0;
+	right: -5px;
+	left: -5px;
+	bottom: 0;
+}
+
+[data-type="canvas/column"]:hover > .canvas-component-custom-blocks > .cnvs-block-column-resizer {
+	opacity: 1;
+}
+
+.cnvs-block-column-resizer > span {
+	position: absolute;
+	top: 50%;
+	right: 50%;
+	width: 14px;
+	height: 14px;
+	margin-top: -7px;
+	margin-right: -7px;
+	border-radius: 10px;
+	border: 2px solid #fff;
+	background-color: #017cba;
+}
+
+.cnvs-block-row-inner .block-editor-block-list__layout .block-editor-block-list__block {
+	max-width: none;
+}
+
+.components-popover.block-editor-block-list__block-popover
+.components-popover__content
+.block-editor-block-contextual-toolbar[data-type="canvas/column"] {
+	margin-right: 0;
+}
+
+/**
+ * Columns act as as a "passthrough container"
+ * and therefore has its vertical margins/padding removed via negative margins
+ * therefore we need to compensate for this here by doubling the spacing on the
+ * vertical to ensure there is equal visual spacing around the inserter. Note there
+ * is no formal API for a "passthrough" Block so this is an edge case override
+ */
+[data-type="canvas/row"] .block-list-appender {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.cnvs-block-row-inner > .block-editor-inner-blocks.has-overlay::after {
+	right: 0;
+	left: 0;
+}

wp-content/plugins/canvas/components/layout-blocks/block-row/block-row-editor.css

@@ -0,0 +1,138 @@
+/**
+ * All of the CSS for your block editor functionality should be
+ * included in this file.
+ */
+/*--------------------------------------------------------------*/
+.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-wrap: nowrap;
+	flex-wrap: nowrap;
+}
+
+.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"],
+.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] > .cnvs-block-column {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	-webkit-box-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+}
+
+.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] {
+	-ms-flex-preferred-size: 50%;
+	flex-basis: 50%;
+	-webkit-box-flex: 0;
+	-ms-flex-positive: 0;
+	flex-grow: 0;
+	min-width: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+	word-break: break-word;
+	overflow-wrap: break-word;
+}
+
+.cnvs-block-column-inner > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender:not(:first-child) {
+	display: none;
+}
+
+.cnvs-block-column {
+	-webkit-box-align: start;
+	-ms-flex-align: start;
+	align-items: flex-start;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+.cnvs-block-column-inner {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-flex: 100%;
+	-ms-flex: 100%;
+	flex: 100%;
+	width: 100%;
+}
+
+.cnvs-block-column-inner > div {
+	-webkit-box-flex: 100%;
+	-ms-flex: 100%;
+	flex: 100%;
+	width: 100%;
+}
+
+.cnvs-block-column-resizer {
+	position: absolute;
+	right: -2.5px;
+	top: -5px;
+	bottom: -5px;
+	width: 3px;
+	border-radius: 3px;
+	background-color: #017cba;
+	cursor: col-resize;
+	opacity: 0;
+	z-index: 10;
+	-webkit-transition: .3s opacity;
+	transition: .3s opacity;
+}
+
+.cnvs-block-column-resizer:after {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 0;
+	left: -5px;
+	right: -5px;
+	bottom: 0;
+}
+
+[data-type="canvas/column"]:hover > .canvas-component-custom-blocks > .cnvs-block-column-resizer {
+	opacity: 1;
+}
+
+.cnvs-block-column-resizer > span {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 14px;
+	height: 14px;
+	margin-top: -7px;
+	margin-left: -7px;
+	border-radius: 10px;
+	border: 2px solid #fff;
+	background-color: #017cba;
+}
+
+.cnvs-block-row-inner .block-editor-block-list__layout .block-editor-block-list__block {
+	max-width: none;
+}
+
+.components-popover.block-editor-block-list__block-popover
+.components-popover__content
+.block-editor-block-contextual-toolbar[data-type="canvas/column"] {
+	margin-left: 0;
+}
+
+/**
+ * Columns act as as a "passthrough container"
+ * and therefore has its vertical margins/padding removed via negative margins
+ * therefore we need to compensate for this here by doubling the spacing on the
+ * vertical to ensure there is equal visual spacing around the inserter. Note there
+ * is no formal API for a "passthrough" Block so this is an edge case override
+ */
+[data-type="canvas/row"] .block-list-appender {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.cnvs-block-row-inner > .block-editor-inner-blocks.has-overlay::after {
+	left: 0;
+	right: 0;
+}

wp-content/plugins/canvas/components/layout-blocks/block-row/block-row-rtl.css

@@ -0,0 +1,49 @@
+/**
+ * All of the CSS for your public-facing functionality should be
+ * included in this file.
+ */
+/*--------------------------------------------------------------*/
+.cnvs-block-row > .cnvs-block-row-inner {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-wrap: nowrap;
+	flex-wrap: nowrap;
+}
+
+.cnvs-block-column {
+	-ms-flex-preferred-size: 50%;
+	flex-basis: 50%;
+	-webkit-box-flex: 0;
+	-ms-flex-positive: 0;
+	flex-grow: 0;
+	min-width: 0;
+	word-break: break-word;
+	overflow-wrap: break-word;
+}
+
+.cnvs-block-column {
+	-webkit-box-align: start;
+	-ms-flex-align: start;
+	align-items: flex-start;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+.cnvs-block-column-inner {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-flex: 100%;
+	-ms-flex: 100%;
+	flex: 100%;
+	width: 100%;
+}
+
+.cnvs-block-column-inner > div {
+	-webkit-box-flex: 100%;
+	-ms-flex: 100%;
+	flex: 100%;
+	width: 100%;
+}

wp-content/plugins/canvas/components/layout-blocks/block-row/block-row.css

@@ -0,0 +1,49 @@
+/**
+ * All of the CSS for your public-facing functionality should be
+ * included in this file.
+ */
+/*--------------------------------------------------------------*/
+.cnvs-block-row > .cnvs-block-row-inner {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-wrap: nowrap;
+	flex-wrap: nowrap;
+}
+
+.cnvs-block-column {
+	-ms-flex-preferred-size: 50%;
+	flex-basis: 50%;
+	-webkit-box-flex: 0;
+	-ms-flex-positive: 0;
+	flex-grow: 0;
+	min-width: 0;
+	word-break: break-word;
+	overflow-wrap: break-word;
+}
+
+.cnvs-block-column {
+	-webkit-box-align: start;
+	-ms-flex-align: start;
+	align-items: flex-start;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+.cnvs-block-column-inner {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-flex: 100%;
+	-ms-flex: 100%;
+	flex: 100%;
+	width: 100%;
+}
+
+.cnvs-block-column-inner > div {
+	-webkit-box-flex: 100%;
+	-ms-flex: 100%;
+	flex: 100%;
+	width: 100%;
+}

wp-content/plugins/canvas/components/layout-blocks/block-row/block.jsx

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+const {
+    addFilter,
+} = wp.hooks;
+
+/**
+ * Internal dependencies
+ */
+import RowBlockEdit from './edit.jsx';
+import RowBlockSave from './save.jsx';
+
+/**
+ * Custom block Edit output for Row block.
+ *
+ * @param {JSX} edit Original block edit.
+ * @param {Object} blockProps Block data.
+ *
+ * @return {JSX} Block edit.
+ */
+function editRender( edit, blockProps ) {
+	if ( 'canvas/row' === blockProps.name ) {
+		return (
+			<RowBlockEdit { ...blockProps } />
+		);
+	}
+
+    return edit;
+}
+
+/**
+ * Custom block register data for Row block.
+ *
+ * @param {Object} blockData Block data.
+ *
+ * @return {Object} Block data.
+ */
+function registerData( blockData ) {
+	if ( 'canvas/row' === blockData.name ) {
+		blockData.save = RowBlockSave;
+	}
+
+    return blockData;
+}
+
+addFilter( 'canvas.customBlock.editRender', 'canvas/row/editRender', editRender );
+addFilter( 'canvas.customBlock.registerData', 'canvas/row/registerData', registerData );

wp-content/plugins/canvas/components/layout-blocks/block-row/edit.jsx

@@ -0,0 +1,159 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+const {
+	Component,
+	Fragment,
+} = wp.element;
+
+const {
+	InnerBlocks,
+} = wp.blockEditor;
+
+const {
+	compose,
+} = wp.compose;
+const {
+	withSelect,
+} = wp.data;
+
+/**
+ * Internal dependencies
+ */
+import getStyles from './styles';
+import changeColumnSize from '../block-column/change-column-size';
+
+const availableSizes = {
+	1: [ 12 ],
+	2: [ 6, 6 ],
+	3: [ 4, 4, 4 ],
+	4: [ 3, 3, 3, 3 ],
+	5: [ 2, 2, 4, 2, 2 ],
+	6: [ 2, 2, 2, 2, 2, 2 ],
+};
+
+/**
+ * Component
+ */
+class RowBlockEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			currentColumnCount: this.props.attributes.columns,
+		};
+
+		this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
+		this.updateColumnsSizes = this.updateColumnsSizes.bind( this );
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( this.props.attributes.columns !== this.state.currentColumnCount ) {
+			this.setState( {
+				currentColumnCount: this.props.attributes.columns,
+			} );
+			this.updateColumnsSizes();
+		}
+	}
+
+	/**
+	 * Returns the template configuration for a given section layout.
+	 *
+	 * @return {Object[]} Layout configuration.
+	 */
+	getLayoutTemplate() {
+		const {
+			attributes,
+		} = this.props;
+
+		let {
+			columns,
+		} = attributes;
+
+		const result = [];
+
+		for ( let k = 0; k < columns; k++ ) {
+			result.push( [
+				'canvas/column',
+				{
+					size: availableSizes[ columns ][ k ],
+				},
+			] );
+		}
+
+		return result;
+	}
+
+	/**
+	 * Update columns sizes.
+	 */
+	updateColumnsSizes() {
+		const {
+			block,
+			attributes,
+		} = this.props;
+
+		let {
+			columns,
+		} = attributes;
+
+		block.innerBlocks.forEach( ( colData, i ) => {
+			if ( availableSizes[ columns ][ i ] ) {
+				changeColumnSize( colData.clientId, availableSizes[ columns ][ i ] );
+			}
+		} );
+	}
+
+	render() {
+		const {
+			attributes,
+		} = this.props;
+
+		let {
+			className,
+		} = this.props;
+
+		const {
+			columns,
+			canvasClassName,
+		} = attributes;
+
+		className = classnames(
+			'cnvs-block-row',
+			`cnvs-block-row-columns-${ columns }`,
+			canvasClassName,
+		);
+
+		return (
+			<Fragment>
+				<div className={ className }>
+					<div className="cnvs-block-row-inner">
+						<InnerBlocks
+							template={ this.getLayoutTemplate() }
+							templateLock="all"
+							allowedBlocks={ [ 'canvas/column' ] }
+						/>
+					</div>
+				</div>
+				<style>{ canvasClassName ? getStyles( attributes, canvasClassName ) : '' }</style>
+			</Fragment>
+		);
+	}
+}
+
+export default compose( [
+	withSelect( ( select, ownProps ) => {
+		const {
+			getBlock,
+		} = select( 'core/block-editor' );
+
+		return {
+			block: getBlock( ownProps.clientId ),
+		};
+	} ),
+] )( RowBlockEdit );

wp-content/plugins/canvas/components/layout-blocks/block-row/render.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Row block template
+ *
+ * @var     $attributes - block attributes
+ * @var     $content - inner blocks
+ * @var     $options - layout options
+ *
+ * @package Canvas
+ */
+
+$attributes['className'] .= ' cnvs-block-row-columns-' . $attributes['columns'];
+
+if ( isset( $attributes['verticalAlignment'] ) && $attributes['verticalAlignment'] ) {
+	$attributes['className'] .= ' cnvs-block-row-valign-' . $attributes['verticalAlignment'];
+}
+
+?>
+
+<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
+	<div class="cnvs-block-row-inner">
+		<?php echo $content; // XSS. ?>
+	</div>
+</div>

wp-content/plugins/canvas/components/layout-blocks/block-row/save.jsx

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+const { Component } = wp.element;
+
+const {
+    InnerBlocks,
+} = wp.blockEditor;
+
+/**
+ * Component
+ */
+export default class RowBlockSave extends Component {
+	render() {
+        return <InnerBlocks.Content />;
+    }
+}

wp-content/plugins/canvas/components/layout-blocks/block-row/styles.jsx

@@ -0,0 +1,73 @@
+/**
+ * Internal dependencies
+ */
+const {
+	canvasBreakpoints,
+} = window;
+
+/**
+ * Row block styles for Editor
+ *
+ * @param {Object} attributes block attributes
+ * @param {String} className block class name
+ *
+ * @returns {String}
+ */
+export default function( attributes, className ) {
+	let result = '';
+	let breakColumns = true;
+
+	Object.keys( canvasBreakpoints ).forEach( ( name ) => {
+		const data = canvasBreakpoints[ name ];
+		let styles = '';
+		let suffix = '';
+
+		if ( 'desktop' !== name ) {
+			suffix = `_${ name }`;
+		}
+
+		/**
+		 * Break columns.
+		 */
+		if ( suffix && breakColumns ) {
+			breakColumns = false;
+			styles += `
+				.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+					-ms-flex-wrap: wrap;
+					flex-wrap: wrap;
+				}
+			`;
+		}
+
+		/**
+		 * Gap.
+		 */
+		if ( typeof attributes[ `gap${ suffix }` ] === 'number' ) {
+			const gap = attributes[ `gap${ suffix }` ];
+			styles += `
+				.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+					margin-left: ${ - gap / 2 }px;
+					margin-right: ${ - gap / 2 }px;
+				}
+				.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] {
+					padding-left: ${ gap / 2 }px;
+					padding-right: ${ gap / 2 }px;
+				}
+				.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] > .canvas-component-custom-blocks > .cnvs-block-column-resizer {
+					margin-right: ${ - gap / 2 }px;
+				}
+			`;
+		}
+
+		// add media query.
+		if ( suffix && styles ) {
+			styles = `@media (max-width: ${ data.width }px) { ${ styles } } `;
+		}
+
+		if ( styles ) {
+			result += styles;
+		}
+	} );
+
+	return result;
+}

wp-content/plugins/canvas/components/layout-blocks/block-row/styles.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Row block styles for Frontend
+ *
+ * @var     $attributes - block attributes
+ * @var     $class_name - block class name
+ *
+ * @package Canvas
+ */
+
+$breakpoints = cnvs_gutenberg()->get_breakpoints_data();
+$break_columns = true;
+
+foreach ( $breakpoints as $name => $data ) {
+	$result = '';
+	$suffix = '';
+
+	if ( 'desktop' !== $name ) {
+		$suffix = '_' . $name;
+	}
+
+	/**
+	 * Break columns.
+	 */
+	if ( $suffix && $break_columns ) {
+		$break_columns = false;
+		$result .= '
+			.' . esc_attr( $class_name ) . ' > .cnvs-block-row-inner {
+				-ms-flex-wrap: wrap;
+    			flex-wrap: wrap;
+			}
+		';
+	}
+
+	/**
+	 * Gap.
+	 */
+	if ( isset( $attributes[ 'gap' . $suffix ] ) && $attributes[ 'gap' . $suffix ] ) {
+		$gap = $attributes[ 'gap' . $suffix ];
+		$result .= '
+			.' . esc_attr( $class_name ) . ' > .cnvs-block-row-inner {
+				margin-top: ' . esc_attr( - $gap / 2 ) . 'px;
+				margin-left: ' . esc_attr( - $gap / 2 ) . 'px;
+				margin-right: ' . esc_attr( - $gap / 2 ) . 'px;
+			}
+			.' . esc_attr( $class_name ) . ' > .cnvs-block-row-inner > .cnvs-block-column {
+				padding-top: ' . esc_attr( $gap / 2 ) . 'px;
+				padding-left: ' . esc_attr( $gap / 2 ) . 'px;
+				padding-right: ' . esc_attr( $gap / 2 ) . 'px;
+			}
+		';
+	}
+
+	// add media query.
+	if ( $suffix && $result ) {
+		$result = '@media (max-width: ' . esc_attr( $data['width'] ) . 'px) { ' . $result . ' } ';
+	}
+
+	if ( $result ) {
+		echo $result; // XSS Ok.
+	}
+}

wp-content/plugins/canvas/components/layout-blocks/block-section-content/block.jsx

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+const {
+    addFilter,
+} = wp.hooks;
+
+/**
+ * Internal dependencies
+ */
+import SectionContentBlockEdit from './edit.jsx';
+import SectionContentBlockSave from './save.jsx';
+
+/**
+ * Custom block Edit output for Section block.
+ *
+ * @param {JSX} edit Original block edit.
+ * @param {Object} blockProps Block data.
+ *
+ * @return {JSX} Block edit.
+ */
+function editRender( edit, blockProps ) {
+	if ( 'canvas/section-content' === blockProps.name ) {
+		return (
+			<SectionContentBlockEdit { ...blockProps } />
+		);
+	}
+
+    return edit;
+}
+
+/**
+ * Custom block register data for Section block.
+ *
+ * @param {Object} blockData Block data.
+ *
+ * @return {Object} Block data.
+ */
+function registerData( blockData ) {
+	if ( 'canvas/section-content' === blockData.name ) {
+		blockData.save = SectionContentBlockSave;
+	}
+
+    return blockData;
+}
+
+addFilter( 'canvas.customBlock.editRender', 'canvas/section-content/editRender', editRender );
+addFilter( 'canvas.customBlock.registerData', 'canvas/section-content/registerData', registerData );

wp-content/plugins/canvas/components/layout-blocks/block-section-content/edit.jsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+const { Component } = wp.element;
+
+const {
+    InnerBlocks,
+} = wp.blockEditor;
+
+const {
+    withSelect,
+} = wp.data;
+
+/**
+ * Component
+ */
+class SectionContentBlockEdit extends Component {
+	render() {
+        const {
+            hasChildBlocks,
+            attributes,
+        } = this.props;
+
+        let {
+            className,
+        } = this.props;
+
+        className = classnames(
+            'cnvs-block-section-content',
+            attributes.canvasClassName,
+            className
+        );
+
+        return (
+            <div className={ className }>
+                <div className="cnvs-block-section-content-inner">
+                    <InnerBlocks
+                        templateLock={ false }
+                        renderAppender={ (
+                            hasChildBlocks ?
+                                undefined :
+                                () => <InnerBlocks.ButtonBlockAppender />
+                        ) }
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+const SectionContentBlockEditWithSelect = withSelect( ( select, ownProps ) => {
+    const { clientId } = ownProps;
+    const blockEditor = select( 'core/block-editor' );
+
+    return {
+        hasChildBlocks: blockEditor ? blockEditor.getBlockOrder( clientId ).length > 0 : false,
+    };
+} )( SectionContentBlockEdit );
+
+export default SectionContentBlockEditWithSelect;

wp-content/plugins/canvas/components/layout-blocks/block-section-content/render.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Section Content block template
+ *
+ * @var     $attributes - block attributes
+ * @var     $content - inner blocks
+ * @var     $options - layout options
+ *
+ * @package Canvas
+ */
+
+?>
+
+<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
+	<div class="cnvs-block-section-content-inner">
+		<?php echo (string) $content; // XSS. ?>
+	</div>
+</div>

wp-content/plugins/canvas/components/layout-blocks/block-section-content/save.jsx

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	Component,
+} = wp.element;
+
+const {
+    InnerBlocks,
+} = wp.blockEditor;
+
+/**
+ * Component
+ */
+export default class SectionContentBlockSave extends Component {
+	render() {
+		return <InnerBlocks.Content />;
+    }
+}

wp-content/plugins/canvas/components/layout-blocks/block-section-sidebar/block.jsx

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+const {
+    addFilter,
+} = wp.hooks;
+
+/**
+ * Internal dependencies
+ */
+import SectionSidebarBlockEdit from './edit.jsx';
+import SectionSidebarBlockSave from './save.jsx';
+
+/**
+ * Custom block Edit output for Section block.
+ *
+ * @param {JSX} edit Original block edit.
+ * @param {Object} blockProps Block data.
+ *
+ * @return {JSX} Block edit.
+ */
+function editRender( edit, blockProps ) {
+	if ( 'canvas/section-sidebar' === blockProps.name ) {
+		return (
+			<SectionSidebarBlockEdit { ...blockProps } />
+		);
+	}
+
+    return edit;
+}
+
+/**
+ * Custom block register data for Section block.
+ *
+ * @param {Object} blockData Block data.
+ *
+ * @return {Object} Block data.
+ */
+function registerData( blockData ) {
+	if ( 'canvas/section-sidebar' === blockData.name ) {
+		blockData.save = SectionSidebarBlockSave;
+	}
+
+    return blockData;
+}
+
+addFilter( 'canvas.customBlock.editRender', 'canvas/section-sidebar/editRender', editRender );
+addFilter( 'canvas.customBlock.registerData', 'canvas/section-sidebar/registerData', registerData );

wp-content/plugins/canvas/components/layout-blocks/block-section-sidebar/edit.jsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+const { Component } = wp.element;
+
+const {
+    InnerBlocks,
+} = wp.blockEditor;
+
+const {
+    withSelect,
+} = wp.data;
+
+/**
+ * Component
+ */
+class SectionSidebarBlockEdit extends Component {
+	render() {
+        const {
+            hasChildBlocks,
+            attributes,
+        } = this.props;
+
+        let {
+            className,
+        } = this.props;
+
+        className = classnames(
+            'cnvs-block-section-sidebar',
+            attributes.canvasClassName,
+            className
+        );
+
+        return (
+            <div className={ className }>
+                <div className="cnvs-block-section-sidebar-inner">
+                    <InnerBlocks
+                        templateLock={ false }
+                        renderAppender={ (
+                            hasChildBlocks ?
+                                undefined :
+                                () => <InnerBlocks.ButtonBlockAppender />
+                        ) }
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+const SectionSidebarBlockEditWithSelect = withSelect( ( select, ownProps ) => {
+    const { clientId } = ownProps;
+    const blockEditor = select( 'core/block-editor' );
+
+    return {
+        hasChildBlocks: blockEditor ? blockEditor.getBlockOrder( clientId ).length > 0 : false,
+    };
+} )( SectionSidebarBlockEdit );
+
+export default SectionSidebarBlockEditWithSelect;

wp-content/plugins/canvas/components/layout-blocks/block-section-sidebar/render.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Section Content block template
+ *
+ * @var     $attributes - block attributes
+ * @var     $content - inner blocks
+ * @var     $options - layout options
+ *
+ * @package Canvas
+ */
+
+?>
+
+<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
+	<div class="cnvs-block-section-sidebar-inner">
+		<?php echo (string) $content; // XSS. ?>
+	</div>
+</div>

wp-content/plugins/canvas/components/layout-blocks/block-section-sidebar/save.jsx

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+const { Component } = wp.element;
+
+const {
+    InnerBlocks,
+} = wp.blockEditor;
+
+/**
+ * Component
+ */
+export default class SectionSidebarBlockSave extends Component {
+	render() {
+        return <InnerBlocks.Content />;
+	}
+}

wp-content/plugins/canvas/components/layout-blocks/block-section/block-section-editor-rtl.css

@@ -0,0 +1,186 @@
+/**
+ * All of the CSS for your block editor functionality should be
+ * included in this file.
+ */
+/*--------------------------------------------------------------*/
+.cnvs-block-section-content {
+	-webkit-box-flex: 0;
+	-ms-flex: 0 0 100%;
+	flex: 0 0 100%;
+	max-width: 100%;
+	min-width: 0;
+}
+
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	-webkit-column-gap: 40px;
+	-moz-column-gap: 40px;
+	column-gap: 40px;
+	row-gap: 3rem;
+}
+
+@media (min-width: 1240px) {
+	.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		-webkit-column-gap: 60px;
+		-moz-column-gap: 60px;
+		column-gap: 60px;
+	}
+}
+
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="canvas/section-content"],
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="canvas/section-sidebar"] {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.cnvs-block-section > .cnvs-block-section-inner {
+	padding-right: 20px;
+	padding-left: 20px;
+	margin-right: auto;
+	margin-left: auto;
+}
+
+@media (min-width: 760px) {
+	.cnvs-block-section > .cnvs-block-section-inner {
+		max-width: 720px;
+	}
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section > .cnvs-block-section-inner {
+		max-width: 1000px;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section > .cnvs-block-section-inner {
+		max-width: 1080px;
+	}
+}
+
+@media (min-width: 1240px) {
+	.cnvs-block-section > .cnvs-block-section-inner {
+		max-width: 1200px;
+	}
+}
+
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks {
+	width: 100%;
+}
+
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block {
+	width: 100%;
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout,
+	.cnvs-block-section-sidebar-position-right > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		grid-template-columns: minmax(0, 1fr) 300px;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		grid-template-columns: 300px minmax(0, 1fr);
+	}
+	.cnvs-block-section-sidebar-position-right > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/section-content"] {
+		-webkit-box-ordinal-group: 2;
+		-ms-flex-order: 1;
+		order: 1;
+	}
+}
+
+.cnvs-block-section-layout-align-full {
+	padding-right: 0 !important;
+	padding-left: 0 !important;
+	overflow: hidden;
+}
+
+.cnvs-block-section-layout-align-full > .cnvs-block-section-inner {
+	max-width: 100% !important;
+	padding-right: 0;
+	padding-left: 0;
+}
+
+.cnvs-block-section-layout-align-full > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] {
+	max-width: 100% !important;
+	width: 100% !important;
+	padding-right: 0;
+	padding-left: 0;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] .block-editor-block-list__layout {
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] .wp-block {
+	max-width: 100% !important;
+	width: 100% !important;
+	padding-right: 0;
+	padding-left: 0;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.wp-block[data-type="canvas/section-sidebar"] .canvas-component-custom-blocks,
+.wp-block[data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar {
+	height: 100%;
+}
+
+.wp-block[data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+}
+
+.cnvs-block-section-sidebar-sticky-top [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
+	position: sticky;
+	top: 50px;
+}
+
+.cnvs-block-section-sidebar-sticky-bottom [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
+	position: sticky;
+	bottom: 20px;
+	margin-top: auto;
+}
+
+@-moz-document url-prefix() {
+	.cnvs-block-section-sidebar-sticky-bottom [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
+		position: sticky;
+		top: 50px;
+		bottom: initial;
+		margin-top: initial;
+	}
+}
+
+.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > :last-child {
+	position: sticky;
+	top: 50px;
+}
+
+[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner,
+[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks,
+[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	height: 100%;
+}
+
+.cnvs-block-section-with-background-color {
+	padding: 0;
+}
+
+.cnvs-block-section-notice .components-notice {
+	text-align: right;
+}

wp-content/plugins/canvas/components/layout-blocks/block-section/block-section-editor.css

@@ -0,0 +1,186 @@
+/**
+ * All of the CSS for your block editor functionality should be
+ * included in this file.
+ */
+/*--------------------------------------------------------------*/
+.cnvs-block-section-content {
+	-webkit-box-flex: 0;
+	-ms-flex: 0 0 100%;
+	flex: 0 0 100%;
+	max-width: 100%;
+	min-width: 0;
+}
+
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	-webkit-column-gap: 40px;
+	-moz-column-gap: 40px;
+	column-gap: 40px;
+	row-gap: 3rem;
+}
+
+@media (min-width: 1240px) {
+	.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		-webkit-column-gap: 60px;
+		-moz-column-gap: 60px;
+		column-gap: 60px;
+	}
+}
+
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="canvas/section-content"],
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="canvas/section-sidebar"] {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.cnvs-block-section > .cnvs-block-section-inner {
+	padding-left: 20px;
+	padding-right: 20px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@media (min-width: 760px) {
+	.cnvs-block-section > .cnvs-block-section-inner {
+		max-width: 720px;
+	}
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section > .cnvs-block-section-inner {
+		max-width: 1000px;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section > .cnvs-block-section-inner {
+		max-width: 1080px;
+	}
+}
+
+@media (min-width: 1240px) {
+	.cnvs-block-section > .cnvs-block-section-inner {
+		max-width: 1200px;
+	}
+}
+
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks {
+	width: 100%;
+}
+
+.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block {
+	width: 100%;
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout,
+	.cnvs-block-section-sidebar-position-right > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		grid-template-columns: minmax(0, 1fr) 300px;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		grid-template-columns: 300px minmax(0, 1fr);
+	}
+	.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/section-content"] {
+		-webkit-box-ordinal-group: 2;
+		-ms-flex-order: 1;
+		order: 1;
+	}
+}
+
+.cnvs-block-section-layout-align-full {
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	overflow: hidden;
+}
+
+.cnvs-block-section-layout-align-full > .cnvs-block-section-inner {
+	max-width: 100% !important;
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.cnvs-block-section-layout-align-full > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] {
+	max-width: 100% !important;
+	width: 100% !important;
+	padding-left: 0;
+	padding-right: 0;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] .block-editor-block-list__layout {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] .wp-block {
+	max-width: 100% !important;
+	width: 100% !important;
+	padding-left: 0;
+	padding-right: 0;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.wp-block[data-type="canvas/section-sidebar"] .canvas-component-custom-blocks,
+.wp-block[data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar {
+	height: 100%;
+}
+
+.wp-block[data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+}
+
+.cnvs-block-section-sidebar-sticky-top [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
+	position: sticky;
+	top: 50px;
+}
+
+.cnvs-block-section-sidebar-sticky-bottom [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
+	position: sticky;
+	bottom: 20px;
+	margin-top: auto;
+}
+
+@-moz-document url-prefix() {
+	.cnvs-block-section-sidebar-sticky-bottom [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
+		position: sticky;
+		top: 50px;
+		bottom: initial;
+		margin-top: initial;
+	}
+}
+
+.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > :last-child {
+	position: sticky;
+	top: 50px;
+}
+
+[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner,
+[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks,
+[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	height: 100%;
+}
+
+.cnvs-block-section-with-background-color {
+	padding: 0;
+}
+
+.cnvs-block-section-notice .components-notice {
+	text-align: left;
+}

wp-content/plugins/canvas/components/layout-blocks/block-section/block-section-rtl.css

@@ -0,0 +1,174 @@
+/**
+ * All of the CSS for your public-facing functionality should be
+ * included in this file.
+ */
+/*--------------------------------------------------------------*/
+.cnvs-block-section > .cnvs-block-section-outer {
+	width: 100%;
+	padding-left: 20px;
+	padding-right: 20px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@media (min-width: 760px) {
+	.cnvs-block-section > .cnvs-block-section-outer {
+		max-width: 720px;
+	}
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section > .cnvs-block-section-outer {
+		max-width: 1000px;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section > .cnvs-block-section-outer {
+		max-width: 1080px;
+	}
+}
+
+@media (min-width: 1240px) {
+	.cnvs-block-section > .cnvs-block-section-outer {
+		max-width: 1200px;
+	}
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section > .cnvs-block-section-outer > .cnvs-block-section-inner {
+		display: -webkit-box;
+		display: -ms-flexbox;
+		display: flex;
+		-ms-flex-wrap: wrap;
+		flex-wrap: wrap;
+		margin-left: -20px;
+		margin-right: -20px;
+	}
+}
+
+.cnvs-block-section-with-background-color {
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+.cnvs-block-section-content {
+	-webkit-box-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+	max-width: 100%;
+	min-width: 0;
+}
+
+.cnvs-block-section-sidebar-inner > *:not(:first-child) {
+	margin-top: 3rem;
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section-content {
+		position: relative;
+		width: 100%;
+		padding-left: 20px;
+		padding-right: 20px;
+		-webkit-box-flex: 1;
+		-ms-flex: 1;
+		flex: 1;
+		max-width: 100%;
+		min-width: 0;
+	}
+	.cnvs-block-section-sidebar {
+		position: relative;
+		width: 100%;
+		padding-left: 20px;
+		padding-right: 20px;
+		-webkit-box-flex: 0;
+		-ms-flex: 0 0 340px;
+		flex: 0 0 340px;
+		max-width: 340px;
+		min-width: 0;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section-sidebar {
+		-webkit-box-flex: 0;
+		-ms-flex: 0 0 360px;
+		flex: 0 0 360px;
+		max-width: 360px;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section-sidebar-position-left .cnvs-block-section-content {
+		-webkit-box-ordinal-group: 2;
+		-ms-flex-order: 1;
+		order: 1;
+	}
+	.cnvs-block-section-sidebar-position-left .cnvs-block-section-sidebar {
+		padding-left: 40px;
+	}
+	.cnvs-block-section-sidebar-position-right .cnvs-block-section-sidebar {
+		padding-right: 40px;
+	}
+}
+
+@media (max-width: 1019.98px) {
+	.cnvs-block-section-sidebar {
+		max-width: 340px;
+		margin: 0 auto;
+		margin-top: 40px;
+	}
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section-layout-align-full {
+		width: 100vw !important;
+		margin-left: initial;
+		margin-right: calc(50% - 50vw);
+	}
+}
+
+.cnvs-block-section-layout-align-full > .cnvs-block-section-outer {
+	max-width: 100% !important;
+	padding-right: 0 !important;
+	padding-left: 0 !important;
+}
+
+.cnvs-block-section-layout-align-full > .cnvs-block-section-outer > .cnvs-block-section-inner {
+	margin-left: 0 !important;
+	margin-right: 0 !important;
+}
+
+.cnvs-block-section-layout-align-full .cnvs-block-section-content {
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+}
+
+.cnvs-block-section-sidebar-sticky-top .cnvs-block-section-sidebar-inner {
+	position: sticky;
+	top: 30px;
+}
+
+.cnvs-block-section-sidebar-sticky-bottom .cnvs-block-section-sidebar-inner {
+	position: sticky;
+	bottom: 30px;
+	margin-top: auto;
+}
+
+@-moz-document url-prefix() {
+	.cnvs-block-section-sidebar-sticky-bottom .cnvs-block-section-sidebar-inner {
+		position: sticky;
+		top: 30px;
+		bottom: initial;
+		margin-top: initial;
+	}
+}
+
+.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner {
+	height: 100%;
+}
+
+.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner > :last-child {
+	position: sticky;
+	top: 50px;
+}

wp-content/plugins/canvas/components/layout-blocks/block-section/block-section.css

@@ -0,0 +1,174 @@
+/**
+ * All of the CSS for your public-facing functionality should be
+ * included in this file.
+ */
+/*--------------------------------------------------------------*/
+.cnvs-block-section > .cnvs-block-section-outer {
+	width: 100%;
+	padding-right: 20px;
+	padding-left: 20px;
+	margin-right: auto;
+	margin-left: auto;
+}
+
+@media (min-width: 760px) {
+	.cnvs-block-section > .cnvs-block-section-outer {
+		max-width: 720px;
+	}
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section > .cnvs-block-section-outer {
+		max-width: 1000px;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section > .cnvs-block-section-outer {
+		max-width: 1080px;
+	}
+}
+
+@media (min-width: 1240px) {
+	.cnvs-block-section > .cnvs-block-section-outer {
+		max-width: 1200px;
+	}
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section > .cnvs-block-section-outer > .cnvs-block-section-inner {
+		display: -webkit-box;
+		display: -ms-flexbox;
+		display: flex;
+		-ms-flex-wrap: wrap;
+		flex-wrap: wrap;
+		margin-right: -20px;
+		margin-left: -20px;
+	}
+}
+
+.cnvs-block-section-with-background-color {
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+.cnvs-block-section-content {
+	-webkit-box-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+	max-width: 100%;
+	min-width: 0;
+}
+
+.cnvs-block-section-sidebar-inner > *:not(:first-child) {
+	margin-top: 3rem;
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section-content {
+		position: relative;
+		width: 100%;
+		padding-right: 20px;
+		padding-left: 20px;
+		-webkit-box-flex: 1;
+		-ms-flex: 1;
+		flex: 1;
+		max-width: 100%;
+		min-width: 0;
+	}
+	.cnvs-block-section-sidebar {
+		position: relative;
+		width: 100%;
+		padding-right: 20px;
+		padding-left: 20px;
+		-webkit-box-flex: 0;
+		-ms-flex: 0 0 340px;
+		flex: 0 0 340px;
+		max-width: 340px;
+		min-width: 0;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section-sidebar {
+		-webkit-box-flex: 0;
+		-ms-flex: 0 0 360px;
+		flex: 0 0 360px;
+		max-width: 360px;
+	}
+}
+
+@media (min-width: 1120px) {
+	.cnvs-block-section-sidebar-position-left .cnvs-block-section-content {
+		-webkit-box-ordinal-group: 2;
+		-ms-flex-order: 1;
+		order: 1;
+	}
+	.cnvs-block-section-sidebar-position-left .cnvs-block-section-sidebar {
+		padding-right: 40px;
+	}
+	.cnvs-block-section-sidebar-position-right .cnvs-block-section-sidebar {
+		padding-left: 40px;
+	}
+}
+
+@media (max-width: 1019.98px) {
+	.cnvs-block-section-sidebar {
+		max-width: 340px;
+		margin: 0 auto;
+		margin-top: 40px;
+	}
+}
+
+@media (min-width: 1020px) {
+	.cnvs-block-section-layout-align-full {
+		width: 100vw !important;
+		margin-right: initial;
+		margin-left: calc(50% - 50vw);
+	}
+}
+
+.cnvs-block-section-layout-align-full > .cnvs-block-section-outer {
+	max-width: 100% !important;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+}
+
+.cnvs-block-section-layout-align-full > .cnvs-block-section-outer > .cnvs-block-section-inner {
+	margin-right: 0 !important;
+	margin-left: 0 !important;
+}
+
+.cnvs-block-section-layout-align-full .cnvs-block-section-content {
+	padding-right: 0 !important;
+	padding-left: 0 !important;
+}
+
+.cnvs-block-section-sidebar-sticky-top .cnvs-block-section-sidebar-inner {
+	position: sticky;
+	top: 30px;
+}
+
+.cnvs-block-section-sidebar-sticky-bottom .cnvs-block-section-sidebar-inner {
+	position: sticky;
+	bottom: 30px;
+	margin-top: auto;
+}
+
+@-moz-document url-prefix() {
+	.cnvs-block-section-sidebar-sticky-bottom .cnvs-block-section-sidebar-inner {
+		position: sticky;
+		top: 30px;
+		bottom: initial;
+		margin-top: initial;
+	}
+}
+
+.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner {
+	height: 100%;
+}
+
+.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner > :last-child {
+	position: sticky;
+	top: 50px;
+}

wp-content/plugins/canvas/components/layout-blocks/block-section/block.jsx

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	addFilter,
+} = wp.hooks;
+
+/**
+ * Internal dependencies
+ */
+import SectionBlockEdit from './edit.jsx';
+import SectionBlockSave from './save.jsx';
+
+/**
+ * Custom block Edit output for Section block.
+ *
+ * @param {JSX} edit Original block edit.
+ * @param {Object} blockProps Block data.
+ *
+ * @return {JSX} Block edit.
+ */
+function editRender(edit, blockProps) {
+	if ('canvas/section' === blockProps.name) {
+		return (
+			<SectionBlockEdit {...blockProps} />
+		);
+	}
+
+	return edit;
+}
+
+/**
+ * Custom block register data for Section block.
+ *
+ * @param {Object} blockData Block data.
+ *
+ * @return {Object} Block data.
+ */
+function registerData(blockData) {
+	if ('canvas/section' === blockData.name) {
+		blockData.save = SectionBlockSave;
+		blockData.getEditWrapperProps = (attributes) => {
+			const result = {
+				'data-align': 'full',
+			};
+
+			// additional attribute for last block sticky
+			if (attributes.sidebarSticky) {
+				result['data-canvas-section-sticky'] = attributes.sidebarStickyMethod;
+			}
+
+			return result;
+		};
+	}
+
+	return blockData;
+}
+
+addFilter('canvas.customBlock.editRender', 'canvas/section/editRender', editRender);
+addFilter('canvas.customBlock.registerData', 'canvas/section/registerData', registerData);

wp-content/plugins/canvas/components/layout-blocks/block-section/edit.jsx

@@ -0,0 +1,338 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import Icon from './icon';
+import ImageSelector from '../../../gutenberg/components/image-selector';
+import iconLayouts from './icon-layouts';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+const {
+	Component,
+	Fragment,
+} = wp.element;
+
+const {
+	BaseControl,
+	PanelBody,
+	Placeholder,
+	RangeControl,
+	SelectControl,
+	ToggleControl,
+	Notice,
+} = wp.components;
+
+const {
+	InspectorControls,
+	InnerBlocks,
+} = wp.blockEditor;
+
+const { BlockControls, BlockAlignmentToolbar } = wp.blockEditor;
+
+
+
+
+
+
+/**
+ * Component
+ */
+export default class SectionBlockEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
+		this.getLayoutSelector = this.getLayoutSelector.bind( this );
+	}
+
+	/**
+	 * Returns the template configuration for a given section layout.
+	 *
+	 * @return {Object[]} Layout configuration.
+	 */
+	getLayoutTemplate() {
+		const {
+			attributes,
+		} = this.props;
+
+		let {
+			layout,
+		} = attributes;
+
+		const result = [];
+
+		switch (layout) {
+			case 'full':
+				result.push( [ 'canvas/section-content' ] );
+				break;
+			case 'with-sidebar':
+				result.push( [ 'canvas/section-content' ] );
+				result.push( [ 'canvas/section-sidebar' ] );
+				break;
+		}
+
+		return result;
+	}
+
+	/**
+	 * Returns layout selector.
+	 *
+	 * @return {JSX} ImageSelector.
+	 */
+	getLayoutSelector() {
+		const {
+			setAttributes,
+			attributes,
+		} = this.props;
+
+		const {
+			layout,
+			sidebarPosition,
+		} = attributes;
+
+		let val = '';
+		switch( layout ) {
+			case 'full':
+				val = 'full';
+				break;
+			case 'with-sidebar':
+				val = `with-sidebar${ 'left' === sidebarPosition ? '-left' : '' }`;
+				break;
+		}
+
+		return (
+			<ImageSelector
+				value={ val }
+				onChange={ ( val ) => {
+					// confirmation to remove sidebar.
+					if ( val === 'full' && ( 'with-sidebar' === layout || 'with-sidebar-left' === layout ) ) {
+						if ( ! window.confirm( __( 'When switching from a Sidebar layout to the Fullwidth layout all sidebar content will be removed. Are you sure you would like to switch the layout?' ) ) ) {
+							return;
+						}
+					}
+
+					switch( val ) {
+						case 'full':
+							setAttributes( {
+								layout: 'full',
+							} );
+							break;
+						case 'with-sidebar':
+							setAttributes( {
+								layout: 'with-sidebar',
+								sidebarPosition: 'right',
+							} );
+							break;
+						case 'with-sidebar-left':
+							setAttributes( {
+								layout: 'with-sidebar',
+								sidebarPosition: 'left',
+							} );
+							break;
+					}
+				} }
+				items={
+					[
+						{
+							content: iconLayouts.full,
+							value: 'full',
+							label: __( 'Fullwidth' ),
+						}, {
+							content: iconLayouts['with-sidebar'],
+							value: 'with-sidebar',
+							label: __( 'Right Sidebar' ),
+						}, {
+							content: iconLayouts['with-sidebar-left'],
+							value: 'with-sidebar-left',
+							label: __( 'Left Sidebar' ),
+						},
+					]
+				}
+			/>
+		);
+	}
+
+	render() {
+		const {
+			setAttributes,
+			attributes,
+			location,
+		} = this.props;
+
+		let {
+			className,
+		} = this.props;
+
+		const {
+			layout,
+			layoutAlign,
+			contentWidth,
+			sidebarSticky,
+			sidebarStickyMethod,
+			sidebarPosition,
+			textColor,
+			backgroundColor,
+			canvasClassName,
+		} = attributes;
+
+		const pageTemplate = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'template' );
+
+		className = classnames(
+			'cnvs-block-section',
+			{
+				[ `cnvs-block-section-fullwidth` ]: 'full' === layout,
+				[ `cnvs-block-section-layout-align-${ layoutAlign }` ]: 'full' === layout && layoutAlign,
+				[ `cnvs-block-section-sidebar-sticky-${ sidebarStickyMethod }` ]: 'with-sidebar' === layout && sidebarSticky,
+				[ `cnvs-block-section-sidebar-position-${ sidebarPosition }` ]: 'with-sidebar' === layout && sidebarPosition,
+				'cnvs-block-section-with-text-color': textColor,
+				'cnvs-block-section-with-background-color': backgroundColor,
+			},
+			canvasClassName,
+		);
+
+		// Page template is Canvas Full Width.
+		if ( 'template-canvas-fullwidth.php' !== pageTemplate ) {
+			return (
+				<Placeholder
+					icon={ Icon }
+					label={ __( 'Section' ) }
+					className="cnvs-block-section-notice"
+				>
+					<Notice status="warning" isDismissible={ false }>
+						{ __( 'To use this block, please select the page template - "Canvas Full Width".' ) }
+					</Notice>
+				</Placeholder>
+			);
+		}
+
+		// Block is not in root.
+		if ( 'root' !== location ) {
+			return (
+				<Placeholder
+					icon={ Icon }
+					label={ __( 'Section' ) }
+					className="cnvs-block-section-notice"
+				>
+					<Notice status="warning" isDismissible={ false }>
+						{ __( 'Sections are supported on root level only. You’ve added the section inside another block and layout will most likely break. Please add the section block as a parent block instead.' ) }
+					</Notice>
+				</Placeholder>
+			);
+		}
+
+		// Layout selector.
+		if ( ! layout ) {
+			return (
+				<Placeholder
+					className="canvas-component-custom-layouts-placeholder"
+					icon={ Icon }
+					label={ __( 'Section' ) }
+					instructions={ __( 'Select the section layout type.' ) }
+				>
+					{ this.getLayoutSelector() }
+				</Placeholder>
+			);
+		}
+
+		var sectionStyle = {};
+
+		if ( ! canvasBSLocalize.disableSectionResponsive ) {
+			sectionStyle = {
+				maxWidth: ( contentWidth || canvasBSLocalize.sectionResponsiveMaxWidth ) + 'px',
+			};
+		}
+
+		return (
+			<Fragment>
+				{ 'full' === layout ? (
+				<BlockControls key="controls">
+					<BlockAlignmentToolbar
+						value={ layoutAlign }
+						onChange={ ( val ) => {
+								setAttributes( { layoutAlign: val } );
+
+								window.dispatchEvent(new Event( 'resize' ) );
+							}
+						}
+						controls={ [ 'full' ] }
+					/>
+				</BlockControls>
+				) : '' }
+
+				<InspectorControls>
+					<PanelBody
+						title={ __( 'Layout' ) }
+					>
+						<BaseControl>
+							{ this.getLayoutSelector() }
+						</BaseControl>
+
+						{ ( ! canvasBSLocalize.disableSectionResponsive ) && ( ( 'full' === layout && ! layoutAlign ) || ( 'full' !== layout ) ) ? (
+						<Fragment>
+							<RangeControl
+								label={ __( 'Content Width (px.)' ) }
+								value={ contentWidth || canvasBSLocalize.sectionResponsiveMaxWidth }
+								min={ 320 }
+								max={ 2560 }
+								step={ 1 }
+								onChange={ ( val ) => {
+										setAttributes( { contentWidth: val } );
+
+										window.dispatchEvent(new Event( 'resize' ) );
+									}
+								}
+							/>
+						</Fragment>
+						) : '' }
+
+						{ 'with-sidebar' === layout ? (
+							<Fragment>
+								<ToggleControl
+									label={ __( 'Sticky Sidebar' ) }
+									checked={ !! sidebarSticky }
+									onChange={ () => { setAttributes( { sidebarSticky: ! sidebarSticky } ) } }
+								/>
+								{ sidebarSticky ? (
+									<SelectControl
+										label={ __( 'Sticky Method' ) }
+										value={ sidebarStickyMethod }
+										onChange={ ( val ) => { setAttributes( { sidebarStickyMethod: val } ) } }
+										options={ [
+											{
+												label: __( 'Top Edge' ),
+												value: 'top',
+											}, {
+												label: __( 'Bottom Edge' ),
+												value: 'bottom',
+											}, {
+												label: __( 'Top Edge of Last Block' ),
+												value: 'top-last-block',
+											}
+										] }
+									/>
+								) : '' }
+							</Fragment>
+						) : '' }
+					</PanelBody>
+				</InspectorControls>
+				<div className={ className }>
+					<div className="cnvs-block-section-inner" style={ sectionStyle }>
+						<InnerBlocks
+							template={ this.getLayoutTemplate() }
+							templateLock="all"
+							allowedBlocks={ [ 'canvas/section-content', 'canvas/section-sidebar' ] }
+						/>
+					</div>
+				</div>
+			</Fragment>
+		);
+	}
+}

wp-content/plugins/canvas/components/layout-blocks/block-section/icon-layouts.jsx

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+const { Path, Rect, SVG } = wp.components;
+
+export default {
+    'full': (
+        <SVG xmlns="http://www.w3.org/2000/svg" width="50" height="29" viewBox="0 0 50 29" fill="none">
+            <Rect x="3" y="3" width="44" height="23" rx="2" stroke="black" strokeWidth="2" />
+        </SVG>
+    ),
+    'with-sidebar': (
+        <SVG xmlns="http://www.w3.org/2000/svg" width="50" height="29" viewBox="0 0 50 29" fill="none">
+            <Rect x="3" y="3" width="44" height="23" rx="2" stroke="black" strokeWidth="2" />
+            <Path d="M33 3.5V26" stroke="black" strokeWidth="2" />
+        </SVG>
+    ),
+    'with-sidebar-left': (
+        <SVG xmlns="http://www.w3.org/2000/svg" width="50" height="29" viewBox="0 0 50 29" fill="none">
+            <Rect x="3" y="3" width="44" height="23" rx="2" stroke="black" strokeWidth="2"/>
+            <Path d="M17 3V25.5" stroke="black" strokeWidth="2"/>			
+        </SVG>
+    ),
+};

wp-content/plugins/canvas/components/layout-blocks/block-section/icon.jsx

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+const { Path, SVG } = wp.components;
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <Path d="M3 13h8v2H3zm0 4h8v2H3zm0-8h8v2H3zm0-4h8v2H3zm16 2v10h-4V7h4m2-2h-8v14h8V5z" />
+    </SVG>
+);

wp-content/plugins/canvas/components/layout-blocks/block-section/render.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * Section block template
+ *
+ * @var     $attributes - block attributes
+ * @var     $content - inner blocks
+ * @var     $options - layout options
+ *
+ * @package Canvas
+ */
+
+if ( 'full' === $attributes['layout'] ) {
+	$attributes['className'] .= ' cnvs-block-section-fullwidth';
+}
+if ( 'full' === $attributes['layout'] && 'full' === $attributes['layoutAlign'] ) {
+	$attributes['className'] .= ' cnvs-block-section-layout-align-full';
+}
+if ( 'with-sidebar' === $attributes['layout'] && $attributes['sidebarSticky'] ) {
+	$attributes['className'] .= ' cnvs-block-section-sidebar-sticky-' . $attributes['sidebarStickyMethod'];
+}
+if ( 'with-sidebar' === $attributes['layout'] && $attributes['sidebarPosition'] ) {
+	$attributes['className'] .= ' cnvs-block-section-sidebar-position-' . $attributes['sidebarPosition'];
+}
+if ( $attributes['textColor'] ) {
+	$attributes['className'] .= ' cnvs-block-section-with-text-color';
+}
+if ( $attributes['backgroundColor'] ) {
+	$attributes['className'] .= ' cnvs-block-section-with-background-color';
+}
+
+$section_style = null;
+
+// Set section style.
+if ( ! get_theme_support( 'canvas-disable-section-responsive' ) && ( ( 'full' === $attributes['layout'] && ! $attributes['layoutAlign'] ) || ( 'full' !== $attributes['layout'] ) ) ) {
+	if ( isset( $attributes['contentWidth'] ) && $attributes['contentWidth'] ) {
+		$section_style = sprintf( 'max-width: %spx;', $attributes['contentWidth'] );
+	} else {
+		$section_style = sprintf( 'max-width: %spx;', apply_filters( 'canvas_section_responsive_max_width', 1200 ) );
+	}
+}
+
+// Check page template.
+$object_id = get_queried_object_id();
+
+$page_template = apply_filters( 'canvas_block_section_page_template', get_page_template_slug( $object_id ) );
+
+if ( 'template-canvas-fullwidth.php' === $page_template ) {
+	?>
+	<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
+		<div class="cnvs-block-section-outer" style="<?php echo esc_attr( $section_style ); ?>">
+			<div class="cnvs-block-section-inner">
+				<?php echo (string) $content; // XSS. ?>
+			</div>
+		</div>
+	</div>
+
+	<?php
+} else {
+	cnvs_alert_warning( esc_html__( 'To use this block, please select the page template - "Canvas Full Width".', 'canvas' ) );
+}

wp-content/plugins/canvas/components/layout-blocks/block-section/save.jsx

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	Component,
+} = wp.element;
+
+const {
+    InnerBlocks,
+} = wp.blockEditor;
+
+/**
+ * Component
+ */
+export default class SectionBlockSave extends Component {
+	render() {
+		const className = 'cnvs-block-section-content';
+
+        return <InnerBlocks.Content />;
+    }
+}

wp-content/plugins/canvas/components/layout-blocks/class-block-row.php

@@ -0,0 +1,318 @@
+<?php
+/**
+ * Row Block.
+ *
+ * @package Canvas
+ */
+
+/**
+ * Initialize Row block.
+ */
+class CNVS_Block_Row {
+
+	/**
+	 * Initialize
+	 */
+	public function __construct() {
+		add_action( 'init', array( $this, 'init' ) );
+		add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
+		add_filter( 'canvas_blocks_dynamic_css_canvas/row', array( $this, 'row_dynamic_styles' ), 10, 2 );
+		add_filter( 'canvas_blocks_dynamic_css_canvas/column', array( $this, 'column_dynamic_styles' ), 10, 2 );
+		add_filter( 'canvas_blocks_dynamic_css_spacings_canvas/column', array( $this, 'spacings_dynamic_styles' ), 10, 4 );
+	}
+
+	/**
+	 * Enqueue the block's assets for the editor.
+	 */
+	public function init() {
+		// Editor Scripts.
+		wp_register_script(
+			'canvas-block-row-editor-script',
+			plugins_url( 'block-row/block.js', __FILE__ ),
+			array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-row/block.js' ),
+			true
+		);
+
+		wp_register_script(
+			'canvas-block-column-editor-script',
+			plugins_url( 'block-column/block.js', __FILE__ ),
+			array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-column/block.js' ),
+			true
+		);
+
+		// Editor Styles.
+		wp_register_style(
+			'canvas-block-row-editor-style',
+			plugins_url( 'block-row/block-row-editor.css', __FILE__ ),
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-row/block-row-editor.css' )
+		);
+
+		wp_style_add_data( 'canvas-block-row-editor-style', 'rtl', 'replace' );
+
+		// Styles.
+		wp_register_style(
+			'canvas-block-row-style',
+			plugins_url( 'block-row/block-row.css', __FILE__ ),
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-row/block-row.css' )
+		);
+
+		wp_style_add_data( 'canvas-block-row-style', 'rtl', 'replace' );
+	}
+
+	/**
+	 * Register block
+	 *
+	 * @param array $blocks all registered blocks.
+	 * @return array
+	 */
+	public function register_block_type( $blocks ) {
+		$blocks[] = array(
+			'name'          => 'canvas/row',
+			'title'         => esc_html__( 'Row', 'canvas' ),
+			'description'   => esc_html__( '12-columns system for your content.', 'canvas' ),
+			'category'      => 'canvas',
+			'keywords'      => array( 'row', 'grid', 'columns' ),
+			'icon'          => '
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+					<path d="M19.5 19.5L15.5 19.5L15.5 4.5L19.5 4.5L19.5 19.5ZM9.5 19.5L5.5 19.5L5.5 4.5L9.5 4.5L9.5 19.5ZM21.5 20.5L21.5 3.5C21.5 2.95 21.05 2.5 20.5 2.5L14.5 2.5C13.95 2.5 13.5 2.95 13.5 3.5L13.5 20.5C13.5 21.05 13.95 21.5 14.5 21.5L20.5 21.5C21.05 21.5 21.5 21.05 21.5 20.5ZM11.5 20.5L11.5 3.5C11.5 2.95 11.05 2.5 10.5 2.5L4.5 2.5C3.95 2.5 3.5 2.95 3.5 3.5L3.5 20.5C3.5 21.05 3.95 21.5 4.5 21.5L10.5 21.5C11.05 21.5 11.5 21.05 11.5 20.5Z" />
+				</svg>
+			',
+			'supports'      => array(
+				'className'             => true,
+				'anchor'                => true,
+				'html'                  => false,
+				'canvasBackgroundImage' => true,
+				'canvasSpacings'        => true,
+				'canvasBorder'          => true,
+				'canvasResponsive'      => true,
+			),
+			'styles'        => array(),
+			'location'      => array(),
+
+			'sections'      => array(),
+			'layouts'       => array(),
+			'fields'        => array(
+				array(
+					'key'     => 'verticalAlignment',
+					'type'    => 'type-string',
+					'default' => '',
+				),
+				array(
+					'key'     => 'columns',
+					'type'    => 'number',
+					'label'   => esc_html__( 'Columns', 'canvas' ),
+					'min'     => 1,
+					'max'     => 6,
+					'default' => 2,
+				),
+				array(
+					'key'        => 'gap',
+					'type'       => 'number',
+					'label'      => esc_html__( 'Gap', 'canvas' ),
+					'min'        => 0,
+					'max'        => 100,
+					'default'    => 30,
+					'responsive' => true,
+				),
+			),
+			'template'      => dirname( __FILE__ ) . '/block-row/render.php',
+
+			// enqueue registered scripts/styles.
+			'style'         => is_admin() ? '' : 'canvas-block-row-style',
+			'editor_script' => 'canvas-block-row-editor-script',
+			'editor_style'  => 'canvas-block-row-editor-style',
+		);
+
+		$blocks[] = array(
+			'name'          => 'canvas/column',
+			'title'         => esc_html__( 'Column', 'canvas' ),
+			'description'   => '',
+			'category'      => 'canvas',
+			'keywords'      => array(),
+			'icon'          => '
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+					<path d="M19.5 19.5L15.5 19.5L15.5 4.5L19.5 4.5L19.5 19.5ZM9.5 19.5L5.5 19.5L5.5 4.5L9.5 4.5L9.5 19.5ZM21.5 20.5L21.5 3.5C21.5 2.95 21.05 2.5 20.5 2.5L14.5 2.5C13.95 2.5 13.5 2.95 13.5 3.5L13.5 20.5C13.5 21.05 13.95 21.5 14.5 21.5L20.5 21.5C21.05 21.5 21.5 21.05 21.5 20.5ZM11.5 20.5L11.5 3.5C11.5 2.95 11.05 2.5 10.5 2.5L4.5 2.5C3.95 2.5 3.5 2.95 3.5 3.5L3.5 20.5C3.5 21.05 3.95 21.5 4.5 21.5L10.5 21.5C11.05 21.5 11.5 21.05 11.5 20.5Z" />
+				</svg>
+			',
+			'supports'      => array(
+				'inserter'              => false,
+				'reusable'              => false,
+				'className'             => true,
+				'anchor'                => true,
+				'canvasBackgroundImage' => true,
+				'canvasSpacings'        => true,
+				'canvasBorder'          => true,
+				'canvasResponsive'      => true,
+			),
+			'parent'        => array(
+				'canvas/row',
+			),
+			'styles'        => array(),
+			'location'      => array(),
+			'sections'      => array(),
+			'layouts'       => array(),
+			'fields'        => array(
+				array(
+					'key'              => 'size',
+					'label'            => esc_html__( 'Size', 'canvas' ),
+					'type'             => 'number',
+					'min'              => 1,
+					'max'              => 12,
+					'default'          => '',
+					'default_notebook' => 12,
+					'default_laptop'   => 12,
+					'default_tablet'   => 12,
+					'default_mobile'   => 12,
+					'responsive'       => true,
+				),
+				array(
+					'key'        => 'order',
+					'label'      => esc_html__( 'Order', 'canvas' ),
+					'type'       => 'number',
+					'min'        => 1,
+					'max'        => 12,
+					'default'    => '',
+					'responsive' => true,
+				),
+				array(
+					'key'        => 'minHeight',
+					'label'      => esc_html__( 'Minimum Height', 'canvas' ),
+					'type'       => 'dimension',
+					'default'    => '',
+					'responsive' => true,
+				),
+				array(
+					'key'        => 'verticalAlign',
+					'label'      => esc_html__( 'Vertical Align', 'canvas' ),
+					'type'       => 'icon-buttons',
+					'choices'    => array(
+						'top'    => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"></path></svg>',
+						'center' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z"></path></svg>',
+						'bottom' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"></path></svg>',
+					),
+					'default'    => '',
+					'responsive' => true,
+				),
+
+				// Colors.
+				array(
+					'key'     => 'textColor',
+					'label'   => esc_html__( 'Text Color', 'canvas' ),
+					'section' => esc_html__( 'Color Settings' ),
+					'type'    => 'color',
+					'default' => '',
+					'output'  => array(
+						array(
+							'element'  => '$ .cnvs-block-column-inner',
+							'property' => 'color',
+							'suffix'   => '!important',
+						),
+					),
+				),
+				array(
+					'key'     => 'backgroundColor',
+					'label'   => esc_html__( 'Background Color', 'canvas' ),
+					'section' => esc_html__( 'Color Settings' ),
+					'type'    => 'color',
+					'default' => '',
+					'output'  => array(
+						array(
+							'element'  => '$ .cnvs-block-column-inner',
+							'property' => 'background-color',
+							'suffix'   => '!important',
+						),
+					),
+				),
+			),
+			'template'      => dirname( __FILE__ ) . '/block-column/render.php',
+
+			// enqueue registered scripts/styles.
+			'editor_script' => 'canvas-block-column-editor-script',
+		);
+
+		return $blocks;
+	}
+
+	/**
+	 * Change row styles
+	 *
+	 * @param string $return   Current return.
+	 * @param string $block    Block data.
+	 * @return string
+	 */
+	public function row_dynamic_styles( $return, $block ) {
+		$attributes        = $block['attrs'];
+		$registered_blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
+
+		// prepare defaults.
+		if ( isset( $registered_blocks['canvas/row'] ) && isset( $registered_blocks['canvas/row']->attributes ) ) {
+			foreach ( $registered_blocks['canvas/row']->attributes as $k => $attrs ) {
+				if ( isset( $attrs['default'] ) && ! isset( $attributes[ $k ] ) ) {
+					$attributes[ $k ] = $attrs['default'];
+				}
+			}
+		}
+
+		if ( isset( $attributes['canvasClassName'] ) ) {
+			$class_name = $attributes['canvasClassName'];
+
+			ob_start();
+			require plugin_dir_path( __FILE__ ) . '/block-row/styles.php';
+			$return .= ob_get_clean();
+		}
+
+		return $return;
+	}
+
+	/**
+	 * Change column styles
+	 *
+	 * @param string $return   Current return.
+	 * @param string $block    Block data.
+	 * @return string
+	 */
+	public function column_dynamic_styles( $return, $block ) {
+		$attributes        = $block['attrs'];
+		$registered_blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
+
+		// prepare defaults.
+		if ( isset( $registered_blocks['canvas/column'] ) && isset( $registered_blocks['canvas/column']->attributes ) ) {
+			foreach ( $registered_blocks['canvas/column']->attributes as $k => $attrs ) {
+				if ( isset( $attrs['default'] ) && ! isset( $attributes[ $k ] ) ) {
+					$attributes[ $k ] = $attrs['default'];
+				}
+			}
+		}
+
+		if ( isset( $attributes['canvasClassName'] ) ) {
+			$class_name = $attributes['canvasClassName'];
+
+			ob_start();
+			require plugin_dir_path( __FILE__ ) . '/block-column/styles.php';
+			$return .= ob_get_clean();
+		}
+
+		return $return;
+	}
+
+	/**
+	 * Change spacings styles
+	 *
+	 * @param string $return   Current return.
+	 * @param string $selector Current selector.
+	 * @param string $styles   Current styles.
+	 * @param string $block    Block data.
+	 * @return string
+	 */
+	public function spacings_dynamic_styles( $return, $selector, $styles, $block ) {
+		$return = $selector . ' .cnvs-block-column-inner { ' . $styles . ' } ';
+
+		return $return;
+	}
+}
+
+new CNVS_Block_Row();

wp-content/plugins/canvas/components/layout-blocks/class-block-section.php

@@ -0,0 +1,262 @@
+<?php
+/**
+ * Section Block.
+ *
+ * @package Canvas
+ */
+
+/**
+ * Initialize Section block.
+ */
+class CNVS_Block_Section {
+
+	/**
+	 * Initialize
+	 */
+	public function __construct() {
+		add_action( 'init', array( $this, 'init' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ), 5 );
+		add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
+	}
+
+	/**
+	 * Enqueue the block's assets for the editor.
+	 */
+	public function init() {
+		// Editor Scripts.
+		wp_register_script(
+			'canvas-block-section-editor-script',
+			plugins_url( 'block-section/block.js', __FILE__ ),
+			array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-section/block.js' ),
+			true
+		);
+
+		wp_register_script(
+			'canvas-block-section-content-editor-script',
+			plugins_url( 'block-section-content/block.js', __FILE__ ),
+			array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-section-content/block.js' ),
+			true
+		);
+
+		wp_register_script(
+			'canvas-block-section-sidebar-editor-script',
+			plugins_url( 'block-section-sidebar/block.js', __FILE__ ),
+			array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-section-sidebar/block.js' ),
+			true
+		);
+
+		// Editor Styles.
+		wp_register_style(
+			'canvas-block-section-editor-style',
+			plugins_url( 'block-section/block-section-editor.css', __FILE__ ),
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-section/block-section-editor.css' )
+		);
+
+		wp_style_add_data( 'canvas-block-section-editor-style', 'rtl', 'replace' );
+
+		// Styles.
+		wp_register_style(
+			'canvas-block-section-style',
+			plugins_url( 'block-section/block-section.css', __FILE__ ),
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block-section/block-section.css' )
+		);
+
+		wp_style_add_data( 'canvas-block-section-style', 'rtl', 'replace' );
+	}
+
+	/**
+	 * This function will register scripts and styles for admin dashboard.
+	 *
+	 * @param string $page Current page.
+	 */
+	public function admin_enqueue_scripts( $page ) {
+		wp_localize_script( 'jquery-ui-core', 'canvasBSLocalize', array(
+			'sectionResponsiveMaxWidth' => apply_filters( 'canvas_section_responsive_max_width', 1200 ),
+			'disableSectionResponsive'  => get_theme_support( 'canvas-disable-section-responsive' ),
+		) );
+	}
+
+	/**
+	 * Register block
+	 *
+	 * @param array $blocks all registered blocks.
+	 * @return array
+	 */
+	public function register_block_type( $blocks ) {
+
+		$blocks[] = array(
+			'name'          => 'canvas/section',
+			'title'         => esc_html__( 'Section', 'canvas' ),
+			'description'   => esc_html__( 'Section block with optional sidebar.', 'canvas' ),
+			'category'      => 'canvas',
+			'keywords'      => array( 'section', 'sidebar', 'widgets' ),
+			'icon'          => '
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+					<path d="M3 13h8v2H3zm0 4h8v2H3zm0-8h8v2H3zm0-4h8v2H3zm16 2v10h-4V7h4m2-2h-8v14h8V5z" />
+				</svg>
+			',
+			'supports'      => array(
+				'className'             => true,
+				'anchor'                => true,
+				'html'                  => false,
+				'canvasBackgroundImage' => true,
+				'canvasSpacings'        => true,
+				'canvasBorder'          => true,
+				'canvasResponsive'      => true,
+			),
+			'styles'        => array(),
+			'location'      => array(),
+			'sections'      => array(),
+			'layouts'       => array(),
+
+			// Set fields just for add block attributes.
+			// Editor render for this block is custom JSX
+			// so we don't need to render fields automatically.
+			'fields'        => array(
+				array(
+					'key'     => 'layout',
+					'type'    => 'type-string',
+					'default' => '',
+				),
+				array(
+					'key'     => 'layoutAlign',
+					'type'    => 'type-string',
+					'default' => '',
+				),
+				array(
+					'key'     => 'contentWidth',
+					'type'    => 'type-number',
+					'default' => apply_filters( 'canvas_section_responsive_max_width', 1200 ),
+				),
+				array(
+					'key'     => 'sidebarPosition',
+					'type'    => 'type-string',
+					'default' => 'right',
+				),
+				array(
+					'key'     => 'sidebarSticky',
+					'type'    => 'type-boolean',
+					'default' => false,
+				),
+				array(
+					'key'     => 'sidebarStickyMethod',
+					'type'    => 'type-string',
+					'default' => 'top',
+				),
+				array(
+					'key'     => 'textColor',
+					'label'   => esc_html__( 'Text Color', 'canvas' ),
+					'section' => esc_html__( 'Color Settings' ),
+					'type'    => 'color',
+					'default' => '',
+					'output'  => array(
+						array(
+							'property' => 'color',
+							'suffix'   => '!important',
+						),
+					),
+				),
+				array(
+					'key'     => 'backgroundColor',
+					'label'   => esc_html__( 'Background Color', 'canvas' ),
+					'section' => esc_html__( 'Color Settings' ),
+					'type'    => 'color',
+					'default' => '',
+					'output'  => array(
+						array(
+							'property' => 'background-color',
+							'suffix'   => '!important',
+						),
+					),
+				),
+			),
+			'template'      => dirname( __FILE__ ) . '/block-section/render.php',
+
+			// enqueue registered scripts/styles.
+			'style'         => is_admin() ? '' : 'canvas-block-section-style',
+			'editor_script' => 'canvas-block-section-editor-script',
+			'editor_style'  => 'canvas-block-section-editor-style',
+		);
+
+		$blocks[] = array(
+			'name'          => 'canvas/section-content',
+			'title'         => esc_html__( 'Section Content', 'canvas' ),
+			'description'   => '',
+			'category'      => 'canvas',
+			'keywords'      => array(),
+			'icon'          => '
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+					<path d="M3 13h8v2H3zm0 4h8v2H3zm0-8h8v2H3zm0-4h8v2H3zm16 2v10h-4V7h4m2-2h-8v14h8V5z" />
+				</svg>
+			',
+			'supports'      => array(
+				'inserter'              => false,
+				'reusable'              => false,
+				'className'             => true,
+				'anchor'                => true,
+				'canvasBackgroundImage' => true,
+				'canvasSpacings'        => true,
+				'canvasBorder'          => true,
+				'canvasResponsive'      => true,
+			),
+			'parent'        => array(
+				'canvas/section',
+			),
+			'styles'        => array(),
+			'location'      => array(),
+
+			'sections'      => array(),
+			'layouts'       => array(),
+			'fields'        => array(),
+			'template'      => dirname( __FILE__ ) . '/block-section-content/render.php',
+
+			// enqueue registered scripts/styles.
+			'editor_script' => 'canvas-block-section-content-editor-script',
+		);
+
+		$blocks[] = array(
+			'name'          => 'canvas/section-sidebar',
+			'title'         => esc_html__( 'Section Sidebar', 'canvas' ),
+			'description'   => '',
+			'category'      => 'canvas',
+			'keywords'      => array(),
+			'icon'          => '
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+					<path d="M3 13h8v2H3zm0 4h8v2H3zm0-8h8v2H3zm0-4h8v2H3zm16 2v10h-4V7h4m2-2h-8v14h8V5z" />
+				</svg>
+			',
+			'supports'      => array(
+				'inserter'              => false,
+				'reusable'              => false,
+				'className'             => true,
+				'anchor'                => true,
+				'canvasBackgroundImage' => true,
+				'canvasSpacings'        => true,
+				'canvasBorder'          => true,
+				'canvasResponsive'      => true,
+			),
+			'parent'        => array(
+				'canvas/section',
+			),
+			'styles'        => array(),
+			'location'      => array(),
+
+			'sections'      => array(),
+			'layouts'       => array(),
+			'fields'        => array(),
+			'template'      => dirname( __FILE__ ) . '/block-section-sidebar/render.php',
+
+			// enqueue registered scripts/styles.
+			'editor_script' => 'canvas-block-section-sidebar-editor-script',
+		);
+
+		return $blocks;
+	}
+}
+
+new CNVS_Block_Section();