Add group block

packages/block-library/src/columns/editor.scss

@@ -21,15 +21,13 @@
 
 // Fullwide: show margin left/right to ensure there's room for the side UI.
 // This is not a 1:1 preview with the front-end where these margins would presumably be zero.
-// @todo This could be revisited, by for example showing this margin only when the parent block was selected first.
-// Then at least an unselected columns block would be an accurate preview.
-.editor-block-list__block[data-align="full"] .wp-block-columns > .editor-inner-blocks {
+.editor-block-list__block[data-align="full"] [data-type="core/columns"][data-align="full"] .wp-block-columns > .editor-inner-blocks {
 	padding-left: $block-padding;
 	padding-right: $block-padding;
 
 	@include break-small() {
-		padding-left: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance;
-		padding-right: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance;
+		padding-left: $block-container-side-padding;
+		padding-right: $block-container-side-padding;
 	}
 }
 

packages/block-library/src/editor.scss

@@ -25,6 +25,7 @@
 @import "./quote/editor.scss";
 @import "./rss/editor.scss";
 @import "./search/editor.scss";
+@import "./section/editor.scss";
 @import "./shortcode/editor.scss";
 @import "./spacer/editor.scss";
 @import "./subhead/editor.scss";

packages/block-library/src/index.js

@@ -44,6 +44,7 @@ import * as pullquote from './pullquote';
 import * as reusableBlock from './block';
 import * as rss from './rss';
 import * as search from './search';
+import * as section from './section';
 import * as separator from './separator';
 import * as shortcode from './shortcode';
 import * as spacer from './spacer';
@@ -106,6 +107,7 @@ export const registerCoreBlocks = () => {
 		pullquote,
 		rss,
 		search,
+		section,
 		separator,
 		reusableBlock,
 		spacer,

packages/block-library/src/section/edit.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	InnerBlocks,
+	PanelColorSettings,
+	withColors,
+} from '@wordpress/block-editor';
+
+function SectionEdit( { className, setBackgroundColor, backgroundColor } ) {
+	const styles = {
+		backgroundColor: backgroundColor.color,
+	};
+
+	const classes = classnames( className, backgroundColor.class, {
+		'has-background': !! backgroundColor.color,
+	} );
+
+	return (
+		<Fragment>
+			<InspectorControls>
+				<PanelColorSettings
+					title={ __( 'Color Settings' ) }
+					colorSettings={ [
+						{
+							value: backgroundColor.color,
+							onChange: setBackgroundColor,
+							label: __( 'Background Color' ),
+						},
+					] }
+				/>
+			</InspectorControls>
+			<div className={ classes } style={ styles }>
+				<InnerBlocks />
+			</div>
+		</Fragment>
+	);
+}
+
+export default withColors( 'backgroundColor' )( SectionEdit );

packages/block-library/src/section/editor.scss

@@ -0,0 +1,87 @@
+/**
+ * Section: All Alignment Settings
+ */
+.wp-block[data-type="core/section"] {
+
+	// Ensure not rendering outside the element
+	// as -1px causes overflow-x scrollbars
+	.editor-block-list__insertion-point {
+		left: 0;
+		right: 0;
+	}
+
+	// Only applied when background is added to cancel out padding
+	> .editor-block-list__block-edit > div > .wp-block-section.has-background > .editor-inner-blocks {
+		margin-top: -#{$block-padding*2 + $block-spacing};
+		margin-bottom: -#{$block-padding*2 + $block-spacing};
+	}
+
+	// Full Width Blocks
+	// specificity required to only target immediate child Blocks of Section
+	> .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+		margin-left: auto;
+		margin-right: auto;
+		padding-left: $block-padding*2;
+		padding-right: $block-padding*2;
+
+		@include break-small() {
+			padding-left: $block-padding*4 + $block-spacing/2; // 58px
+			padding-right: $block-padding*4 + $block-spacing/2; // 58px
+		}
+	}
+
+	// Full Width Blocks with a background (ie: has padding)
+	> .editor-block-list__block-edit > div > .wp-block-section.has-background > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+		// note: using position `left` causes hoz scrollbars so
+		// we opt to use margin instead
+		// the 30px matches the hoz padding applied in `theme.scss`
+		// added when the Block has a background set
+		margin-left: -30px;
+
+		// 60px here is x2 the hoz padding from `theme.scss` added when
+		// the Block has a background set
+		// note: also duplicated below for full width Sections
+		width: calc(100% + 60px);
+	}
+}
+
+/**
+ * Section: Full Width Alignment
+ */
+.wp-block[data-type="core/section"][data-align="full"] {
+
+	// First tier of InnerBlocks must act like the container of the standard canvas
+	> .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks {
+		margin-left: auto;
+		margin-right: auto;
+		padding-left: 0;
+		padding-right: 0;
+
+		> .editor-block-list__layout {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+
+	// Full Width Blocks
+	// specificity required to only target immediate child Blocks of Section
+	> .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+		padding-right: 0;
+		padding-left: 0;
+		left: 0;
+		width: 100%;
+		max-width: none;
+
+		// Allow to be flush with the edges of the canvas
+		> .editor-block-list__block-edit {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+
+	// Full Width Blocks with a background (ie: has padding)
+	// note: also duplicated above for all Section widths
+	> .editor-block-list__block-edit > div > .wp-block-section.has-background > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+		width: calc(100% + 60px);
+	}
+}

packages/block-library/src/section/index.js

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+export const name = 'core/section';
+
+export const settings = {
+	title: __( 'Section' ),
+
+	icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /><Path d="M0 0h24v24H0z" fill="none" /></SVG>,
+
+	category: 'layout',
+
+	description: __( 'A wrapping section acting as a container for other blocks.' ),
+
+	keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ) ],
+
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+	},
+
+	attributes: {
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+	},
+
+	edit,
+
+	save( { attributes } ) {
+		const { backgroundColor, customBackgroundColor } = attributes;
+
+		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+		const className = classnames( backgroundClass, {
+			'has-background': backgroundColor || customBackgroundColor,
+		} );
+
+		const styles = {
+			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		};
+
+		return (
+			<div className={ className } style={ styles }>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};

packages/block-library/src/section/theme.scss

@@ -0,0 +1,10 @@
+.wp-block-section {
+
+	&.has-background {
+		// Matches paragraph Block padding
+		// Todo: normalise with variables
+		padding: 20px 30px;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}

packages/block-library/src/theme.scss

@@ -6,6 +6,7 @@
 @import "./pullquote/theme.scss";
 @import "./quote/theme.scss";
 @import "./search/theme.scss";
+@import "./section/theme.scss";
 @import "./separator/theme.scss";
 @import "./table/theme.scss";
 @import "./video/theme.scss";

packages/e2e-tests/fixtures/block-transforms.js

@@ -144,6 +144,10 @@ export const EXPECTED_TRANSFORMS = {
 		originalBlock: 'Search',
 		availableTransforms: [],
 	},
+	core__section: {
+		originalBlock: 'Section',
+		availableTransforms: [],
+	},
 	core__separator: {
 		originalBlock: 'Separator',
 		availableTransforms: [],

packages/e2e-tests/fixtures/blocks/core__section.html

@@ -0,0 +1,10 @@
+<!-- wp:section {"backgroundColor":"secondary","align":"full"} -->
+<div class="wp-block-section alignfull has-secondary-background-color has-background">
+	<!-- wp:paragraph -->
+	<p>This is a section block.</p>
+	<!-- /wp:paragraph -->
+
+	<!-- wp:paragraph -->
+	<p>Section block content.</p>
+	<!-- /wp:paragraph --></div>
+<!-- /wp:section -->

packages/e2e-tests/fixtures/blocks/core__section.json

@@ -0,0 +1,36 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/section",
+        "isValid": true,
+        "attributes": {
+            "backgroundColor": "secondary",
+            "align": "full"
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": "This is a section block.",
+                    "dropCap": false
+                },
+                "innerBlocks": [],
+                "originalContent": "<p>This is a section block.</p>"
+            },
+            {
+                "clientId": "_clientId_1",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": "Section block content.",
+                    "dropCap": false
+                },
+                "innerBlocks": [],
+                "originalContent": "<p>Section block content.</p>"
+            }
+        ],
+        "originalContent": "<div class=\"wp-block-section alignfull has-secondary-background-color has-background\">\n\t\n\n\t</div>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__section.parsed.json

@@ -0,0 +1,46 @@
+[
+    {
+        "blockName": "core/section",
+        "attrs": {
+            "backgroundColor": "secondary",
+            "align": "full"
+        },
+        "innerBlocks": [
+            {
+                "blockName": "core/paragraph",
+                "attrs": {},
+                "innerBlocks": [],
+                "innerHTML": "\n\t<p>This is a section block.</p>\n\t",
+                "innerContent": [
+                    "\n\t<p>This is a section block.</p>\n\t"
+                ]
+            },
+            {
+                "blockName": "core/paragraph",
+                "attrs": {},
+                "innerBlocks": [],
+                "innerHTML": "\n\t<p>Section block content.</p>\n\t",
+                "innerContent": [
+                    "\n\t<p>Section block content.</p>\n\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-section alignfull has-secondary-background-color has-background\">\n\t\n\n\t</div>\n",
+        "innerContent": [
+            "\n<div class=\"wp-block-section alignfull has-secondary-background-color has-background\">\n\t",
+            null,
+            "\n\n\t",
+            null,
+            "</div>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__section.serialized.html

@@ -0,0 +1,9 @@
+<!-- wp:section {"backgroundColor":"secondary","align":"full"} -->
+<div class="wp-block-section alignfull has-secondary-background-color has-background"><!-- wp:paragraph -->
+<p>This is a section block.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Section block content.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:section -->

packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Section can be created using the block inserter 1`] = `
+"<!-- wp:section -->
+<div class=\\"wp-block-section\\"><!-- wp:paragraph -->
+<p>Section block</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:section -->"
+`;
+
+exports[`Section can be created using the slash inserter 1`] = `
+"<!-- wp:section -->
+<div class=\\"wp-block-section\\"><!-- wp:paragraph -->
+<p>Section block</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:section -->"
+`;