Add initial draft of container block

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

@@ -0,0 +1,5 @@
+.wp-block-container .editor-block-list__block {
+	// We need to enforce a cascade by telling nested blocks to inherit
+	// their text color from the container block.
+	color: inherit;
+}

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

@@ -0,0 +1,159 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { withFallbackStyles } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getColorClassName,
+	withColors,
+	ContrastChecker,
+	InnerBlocks,
+	InspectorControls,
+	PanelColorSettings,
+} from '@wordpress/editor';
+import { Fragment } from '@wordpress/element';
+
+const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
+	const { textColor, backgroundColor } = ownProps.attributes;
+
+	return {
+		fallbackBackgroundColor: backgroundColor,
+		fallbackTextColor: textColor,
+	};
+} );
+
+export const name = 'core/container';
+
+export const settings = {
+	title: sprintf(
+		/* translators: Block title modifier */
+		__( '%1$s (%2$s)' ),
+		__( 'Container' ),
+		__( 'beta' )
+	),
+
+	icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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',
+
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		customTextColor: {
+			type: 'string',
+		},
+	},
+
+	description: __( 'Group blocks into a container.' ),
+
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+	},
+
+	edit: compose( [
+		withColors( 'backgroundColor', { textColor: 'color' } ),
+		applyFallbackStyles,
+	] )( ( props ) => {
+		const {
+			backgroundColor,
+			className,
+			fallbackBackgroundColor,
+			fallbackTextColor,
+			setBackgroundColor,
+			setTextColor,
+			textColor,
+		} = props;
+
+		return (
+			<Fragment>
+				<InspectorControls>
+					<PanelColorSettings
+						title={ __( 'Color Settings' ) }
+						initialOpen={ false }
+						colorSettings={ [
+							{
+								value: backgroundColor.color,
+								onChange: setBackgroundColor,
+								label: __( 'Background Color' ),
+							},
+							{
+								value: textColor.color,
+								onChange: setTextColor,
+								label: __( 'Text Color' ),
+							},
+						] }
+					>
+						<ContrastChecker
+							{ ...{
+								textColor: textColor.color,
+								backgroundColor: backgroundColor.color,
+								fallbackTextColor,
+								fallbackBackgroundColor,
+							} }
+						/>
+					</PanelColorSettings>
+				</InspectorControls>
+				<div
+					className={ classnames( className, {
+						'has-background': backgroundColor.color,
+						'has-text-color': textColor.color,
+						[ backgroundColor.class ]: backgroundColor.class,
+						[ textColor.class ]: textColor.class,
+					} ) }
+					style={ {
+						backgroundColor: backgroundColor.color,
+						color: textColor.color,
+					} }
+				>
+					<InnerBlocks />
+				</div>
+			</Fragment>
+		);
+	} ),
+
+	save( { attributes } ) {
+		const {
+			backgroundColor,
+			customBackgroundColor,
+			customTextColor,
+			textColor,
+		} = attributes;
+
+		const backgroundColorClass = getColorClassName( 'background-color', backgroundColor );
+		const textColorClass = getColorClassName( 'color', textColor );
+
+		return (
+			<div
+				className={ classnames( {
+					'has-background': backgroundColor || customBackgroundColor,
+					'has-text-color': textColor || customTextColor,
+					[ backgroundColorClass ]: backgroundColorClass,
+					[ textColorClass ]: textColorClass,
+				} ) }
+				style={ {
+					backgroundColor: backgroundColorClass ? undefined : customBackgroundColor,
+					color: textColorClass ? undefined : customTextColor,
+				} }
+			>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};

packages/block-library/src/container/style.scss

@@ -0,0 +1,5 @@
+.wp-block-container {
+	// 1px top/bottom padding allows us to prevent margin collapsing while
+	// avoiding excessive top/bottom margins.
+	padding: 1px 1em;
+}

packages/block-library/src/editor.scss

@@ -4,6 +4,7 @@
 @import "./categories/editor.scss";
 @import "./code/editor.scss";
 @import "./columns/editor.scss";
+@import "./container/editor.scss";
 @import "./cover-image/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";

packages/block-library/src/index.js

@@ -24,6 +24,7 @@ import * as categories from './categories';
 import * as code from './code';
 import * as columns from './columns';
 import * as column from './columns/column';
+import * as container from './container';
 import * as coverImage from './cover-image';
 import * as embed from './embed';
 import * as file from './file';
@@ -69,6 +70,7 @@ export const registerCoreBlocks = () => {
 		code,
 		columns,
 		column,
+		container,
 		coverImage,
 		embed,
 		...embed.common,

packages/block-library/src/style.scss

@@ -4,6 +4,7 @@
 @import "./button/style.scss";
 @import "./categories/style.scss";
 @import "./columns/style.scss";
+@import "./container/style.scss";
 @import "./cover-image/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";