Add container [Section] block (#13964)

* Add initial container block Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Add background color controls to the container block Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Add `anchor` support to container block Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Add option for editing container block padding Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Add padding with preset narrow and wide options Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Add padding toggle Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Ensure background color class name is set in block edit Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Switch padding option to disable padding instead of enabling Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Set a default background color Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Add e2e test for adding container block * Add e2e tests for the container block * updated the default toggle text and behaviour for the container's padding and fixed a class naming problem on the front end * removed the padding toogle and added default padding to the container block wrapper class * Remove container block margin when a background is set. Allows consecutive container blocks to have no gap between them * Adds keywords to aid in discoverability * Implement same padding rules as used in columns block for container block. Ensures block mover controls remain visible. * Removes default background As discussed this imposes on the Theme choices. We will make the Block more perceivable via: * #14241 * #14145 * Renames Block from Container to Section This is in response to the wealth of feedback (particularly from the Design team) that “Container” is not a good reflection of the purpose. Rather Section is the prefered option. See #13964 (comment) * Utilise correct spacing variable for consistency * Resolve block validation error when custom background color used. Caused by customBackgroundColor not being defined as an attribute. * Feature flag the section block * Update e2e tests with renamed section block * Add fixture for section block for full content test * Adds alignment for inner blocks that support alignment controls As per this comment #13964 (comment) the Block needs the ability to align the blocks within the Section. Currently only a few Blocks support this but a wider change can be added that will enable all inner blocks to be aligned. The alignment rules are tested against the [Gutenberg Starter Theme](https://github.com/WordPress/gutenberg-starter-theme) as this enqueues no editor styles and conforms to the guidlines laid out [here](#13964 (comment)). @kjell has noted that Twenty Nineteen will need a patch for this, the styles for which have already been scoped out. Note that this removes the previous fix for the block mover controls which are now (again) hidden when Blocks are full width. @kjell has confirmed this is a known issue that needs to be solved globally and should not be addressed in this PR. * Fixes width of wide Media text Block within full width Section Block * Removes Block default padding Remove padding to ensure alignment is consistent with canvas by default. Plan to introduce an attribute to control this later. * Fixes alignment layout within Seciton Blocks for all alignable Block types Previously alignment CSS was too focused on images and had too many edge cases. Refactor to cater for all Block types and in turn simplified the CSS. * Adds specificity required to only target immediate child Blocks of Section * Reintroduces padding on request * Adds fix to images as edge case Previously a 1px gap was seen on the sides of images nested within Section. * Removes unwanted whitespace top/bottom of Block * Fixes wide child Block alignment within full width Section Resolves issue reported at #13964 (comment) Also variablises the values. * Fixes full width image alignment within full width Section. Alters values required to ensure full width image Block meets edges of editor canvas when within a full width Section Block. This removes the need for the “edge case” hack in the Image Block CSS which is good as this was never a good idea. Resolves #13964 (comment) * Removes usage of Block name as Sass variable Not required. Resolves #13964 (comment) * Updates hard coded spacing to variables * Fixes excessive Section Block padding on tiny screens Resolves #13964 (comment) * Updates to add padding only when background is added to Block Addresses #13964 (comment) * Fixes Block overlap between adjacent Blocks when no background applied Resolves issue highlight at #13964 (comment) * Restores fix for Columns Block to ensure move/drag handles visible in full width Section Resolves #13964 (comment) * Fixes 1px of overflow on full width blocks Resolves #13964 (comment) * Applies another fix to 1px overflow issue Full width Blocks were causing a 1px overflow and thus a hoz scrollbar to appear. Required adjustments to margins and the “pull/push” values (left/width) appleid to full width child Blocks * Makes Block reusable Resolves part of #13964 (comment) * Removes feature flag Resolves #13964 (comment) * Fixes overflow issues Utilising width’s over 100% and negative left offsets were triggering hoz scrollbars. Also added a patch for the Block insertion point offsets which were triggering scrollbars due to their overhanging -1px indent. * Fix width of context toolbar causing overflow-x When the Section Block is highlighted so that the contextual toolbar is displayed it can cause hoz scrollbars to appear when the viewport becomes narrow. This is a very difficult bug to spot but careful testing will reveal it. The -1px compensates for the `left: 1px` value on the child element `.block-editor-block-toolbar`which is causing the scrollbar to appear. * Updates Section padding values to match paragraph Block Addresses #13964 (comment) * Fixes failing Block transforms e2e test * Fixes Block overflowing off screen on <600px full width Section This was due to negative margins being applied too early. Turns out these were mirroring a rule already in place within the editor and didn’t need to be there anyway. Removing fixes the issue as the core rules are applied at the correct media query. * Fix to make full width children full width when background padding added When Section has a background padding is added meaning that full width child Blocks no longer span edge-to-edge. This fix adds a compensating factor to ensure an edge-to-edge layout within the editor. * Remove superflous Section keyword Resolves #13964 (comment) * Removes superflous resuable setting It’s already the default! Resolves #13964 (comment) * Updates to use `block-editor` package and avoid proxy Resolves #13964 (comment)
WordPress · Apr 1, 2019 · ad7d183 · ad7d183
1 parent a61e351
commit ad7d183
Show file tree

Hide file tree

Showing 16 changed files with 373 additions and 7 deletions.
diff --git a/packages/block-library/src/columns/editor.scss b/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;
 	}
 }
 

diff --git a/packages/block-library/src/editor.scss b/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";

diff --git a/packages/block-library/src/index.js b/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,

diff --git a/packages/block-library/src/section/edit.js b/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 );
diff --git a/packages/block-library/src/section/editor.scss b/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);
+	}
+}
diff --git a/packages/block-library/src/section/index.js b/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>
+		);
+	},
+};
diff --git a/packages/block-library/src/section/theme.scss b/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;
+	}
+}
diff --git a/packages/block-library/src/theme.scss b/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";
diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/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: [],

diff --git a/packages/e2e-tests/fixtures/blocks/core__section.html b/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 -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__section.json b/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>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__section.parsed.json b/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"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__section.serialized.html b/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 -->
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap b/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 -->"
+`;