Rename section block to group (WordPress#14920)

* Rename section block to group * Update transforms test for rename of section block to group * Alphabeticalize
mchowning · Apr 15, 2019 · 285cd07 · 285cd07
1 parent f59ac1f
commit 285cd07
Show file tree

Hide file tree

Showing 19 changed files with 86 additions and 87 deletions.
diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
@@ -58,8 +58,8 @@ $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: 28px; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
-$block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or section)
-$block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or section)
+$block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
+$block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
 
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -9,6 +9,7 @@
 @import "./file/editor.scss";
 @import "./classic/editor.scss";
 @import "./gallery/editor.scss";
+@import "./group/editor.scss";
 @import "./heading/editor.scss";
 @import "./html/editor.scss";
 @import "./image/editor.scss";
@@ -25,7 +26,6 @@
 @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/...ages/block-library/src/section/block.json → packages/block-library/src/group/block.json b/...ages/block-library/src/section/block.json → packages/block-library/src/group/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "core/section",
+	"name": "core/group",
 	"category": "layout",
 	"attributes": {
 		"backgroundColor": {

diff --git a/packages/block-library/src/section/edit.js → packages/block-library/src/group/edit.js b/packages/block-library/src/section/edit.js → packages/block-library/src/group/edit.js
@@ -15,7 +15,7 @@ import {
 	withColors,
 } from '@wordpress/block-editor';
 
-function SectionEdit( { className, setBackgroundColor, backgroundColor } ) {
+function GroupEdit( { className, setBackgroundColor, backgroundColor } ) {
 	const styles = {
 		backgroundColor: backgroundColor.color,
 	};
@@ -45,4 +45,4 @@ function SectionEdit( { className, setBackgroundColor, backgroundColor } ) {
 	);
 }
 
-export default withColors( 'backgroundColor' )( SectionEdit );
+export default withColors( 'backgroundColor' )( GroupEdit );
diff --git a/...ges/block-library/src/section/editor.scss → packages/block-library/src/group/editor.scss b/...ges/block-library/src/section/editor.scss → packages/block-library/src/group/editor.scss
@@ -1,7 +1,7 @@
 /**
- * Section: All Alignment Settings
+ * Group: All Alignment Settings
  */
-.wp-block[data-type="core/section"] {
+.wp-block[data-type="core/group"] {
 
 	// Ensure not rendering outside the element
 	// as -1px causes overflow-x scrollbars
@@ -11,14 +11,14 @@
 	}
 
 	// Only applied when background is added to cancel out padding
-	> .editor-block-list__block-edit > div > .wp-block-section.has-background > .editor-inner-blocks {
+	> .editor-block-list__block-edit > div > .wp-block-group.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"] {
+	// specificity required to only target immediate child Blocks of a Group
+	> .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 		margin-left: auto;
 		margin-right: auto;
 		padding-left: $block-padding*2;
@@ -31,7 +31,7 @@
 	}
 
 	// 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"] {
+	> .editor-block-list__block-edit > div > .wp-block-group.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`
@@ -40,18 +40,18 @@
 
 		// 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
+		// note: also duplicated below for full width Groups
 		width: calc(100% + 60px);
 	}
 }
 
 /**
- * Section: Full Width Alignment
+ * Group: Full Width Alignment
  */
-.wp-block[data-type="core/section"][data-align="full"] {
+.wp-block[data-type="core/group"][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 {
+	> .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks {
 		margin-left: auto;
 		margin-right: auto;
 		padding-left: 0;
@@ -64,8 +64,8 @@
 	}
 
 	// 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"] {
+	// specificity required to only target immediate child Blocks of Group
+	> .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 		padding-right: 0;
 		padding-left: 0;
 		left: 0;
@@ -80,8 +80,8 @@
 	}
 
 	// 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"] {
+	// note: also duplicated above for all Group widths
+	> .editor-block-list__block-edit > div > .wp-block-group.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 → packages/block-library/src/group/index.js b/packages/block-library/src/section/index.js → packages/block-library/src/group/index.js
@@ -21,13 +21,13 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	title: __( 'Section' ),
+	title: __( 'Group' ),
 
 	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>,
 
-	description: __( 'A wrapping section acting as a container for other blocks.' ),
+	description: __( 'A block that groups other blocks.' ),
 
-	keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ) ],
+	keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ), __( 'section' ) ],
 
 	supports: {
 		align: [ 'wide', 'full' ],

diff --git a/...ages/block-library/src/section/theme.scss → packages/block-library/src/group/theme.scss b/...ages/block-library/src/section/theme.scss → packages/block-library/src/group/theme.scss
@@ -1,5 +1,4 @@
-.wp-block-section {
-
+.wp-block-group {
 	&.has-background {
 		// Matches paragraph Block padding
 		// Todo: normalise with variables

diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
@@ -45,7 +45,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 group from './group';
 import * as separator from './separator';
 import * as shortcode from './shortcode';
 import * as spacer from './spacer';
@@ -95,6 +95,7 @@ export const registerCoreBlocks = () => {
 		...embed.common,
 		...embed.others,
 		file,
+		group,
 		window.wp && window.wp.oldEditor ? classic : null, // Only add the classic block in WP Context
 		html,
 		mediaText,
@@ -108,7 +109,6 @@ export const registerCoreBlocks = () => {
 		pullquote,
 		rss,
 		search,
-		section,
 		separator,
 		reusableBlock,
 		spacer,

diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
@@ -6,7 +6,7 @@
 @import "./pullquote/theme.scss";
 @import "./quote/theme.scss";
 @import "./search/theme.scss";
-@import "./section/theme.scss";
+@import "./group/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
@@ -129,6 +129,10 @@ export const EXPECTED_TRANSFORMS = {
 			'Image',
 		],
 	},
+	core__group: {
+		originalBlock: 'Group',
+		availableTransforms: [],
+	},
 	'core__heading__h2-em': {
 		originalBlock: 'Heading',
 		availableTransforms: [
@@ -303,10 +307,6 @@ 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__group.html b/packages/e2e-tests/fixtures/blocks/core__group.html
@@ -0,0 +1,10 @@
+<!-- wp:group {"backgroundColor":"secondary","align":"full"} -->
+<div class="wp-block-group alignfull has-secondary-background-color has-background">
+	<!-- wp:paragraph -->
+	<p>This is a group block.</p>
+	<!-- /wp:paragraph -->
+
+	<!-- wp:paragraph -->
+	<p>Group block content.</p>
+	<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
diff --git a/...-tests/fixtures/blocks/core__section.json → ...2e-tests/fixtures/blocks/core__group.json b/...-tests/fixtures/blocks/core__section.json → ...2e-tests/fixtures/blocks/core__group.json
@@ -1,7 +1,7 @@
 [
     {
         "clientId": "_clientId_0",
-        "name": "core/section",
+        "name": "core/group",
         "isValid": true,
         "attributes": {
             "backgroundColor": "secondary",
@@ -13,24 +13,24 @@
                 "name": "core/paragraph",
                 "isValid": true,
                 "attributes": {
-                    "content": "This is a section block.",
+                    "content": "This is a group block.",
                     "dropCap": false
                 },
                 "innerBlocks": [],
-                "originalContent": "<p>This is a section block.</p>"
+                "originalContent": "<p>This is a group block.</p>"
             },
             {
                 "clientId": "_clientId_1",
                 "name": "core/paragraph",
                 "isValid": true,
                 "attributes": {
-                    "content": "Section block content.",
+                    "content": "Group block content.",
                     "dropCap": false
                 },
                 "innerBlocks": [],
-                "originalContent": "<p>Section block content.</p>"
+                "originalContent": "<p>Group block content.</p>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-section alignfull has-secondary-background-color has-background\">\n\t\n\n\t</div>"
+        "originalContent": "<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t\n\n\t</div>"
     }
 ]
diff --git a/...fixtures/blocks/core__section.parsed.json → ...s/fixtures/blocks/core__group.parsed.json b/...fixtures/blocks/core__section.parsed.json → ...s/fixtures/blocks/core__group.parsed.json
@@ -1,6 +1,6 @@
 [
     {
-        "blockName": "core/section",
+        "blockName": "core/group",
         "attrs": {
             "backgroundColor": "secondary",
             "align": "full"
@@ -10,24 +10,24 @@
                 "blockName": "core/paragraph",
                 "attrs": {},
                 "innerBlocks": [],
-                "innerHTML": "\n\t<p>This is a section block.</p>\n\t",
+                "innerHTML": "\n\t<p>This is a group block.</p>\n\t",
                 "innerContent": [
-                    "\n\t<p>This is a section block.</p>\n\t"
+                    "\n\t<p>This is a group block.</p>\n\t"
                 ]
             },
             {
                 "blockName": "core/paragraph",
                 "attrs": {},
                 "innerBlocks": [],
-                "innerHTML": "\n\t<p>Section block content.</p>\n\t",
+                "innerHTML": "\n\t<p>Group block content.</p>\n\t",
                 "innerContent": [
-                    "\n\t<p>Section block content.</p>\n\t"
+                    "\n\t<p>Group 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",
+        "innerHTML": "\n<div class=\"wp-block-group 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",
+            "\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t",
             null,
             "\n\n\t",
             null,

diff --git a/packages/e2e-tests/fixtures/blocks/core__group.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
@@ -0,0 +1,9 @@
+<!-- wp:group {"backgroundColor":"secondary","align":"full"} -->
+<div class="wp-block-group alignfull has-secondary-background-color has-background"><!-- wp:paragraph -->
+<p>This is a group block.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Group block content.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__section.html b/packages/e2e-tests/fixtures/blocks/core__section.html
diff --git a/packages/e2e-tests/fixtures/blocks/core__section.serialized.html b/packages/e2e-tests/fixtures/blocks/core__section.serialized.html
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Group can be created using the block inserter 1`] = `
+"<!-- wp:group -->
+<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
+<p>Group block</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Group can be created using the slash inserter 1`] = `
+"<!-- wp:group -->
+<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
+<p>Group block</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap
diff --git a/...es/e2e-tests/specs/blocks/section.test.js → ...ages/e2e-tests/specs/blocks/group.test.js b/...es/e2e-tests/specs/blocks/section.test.js → ...ages/e2e-tests/specs/blocks/group.test.js
@@ -8,24 +8,24 @@ import {
 	createNewPost,
 } from '@wordpress/e2e-test-utils';
 
-describe( 'Section', () => {
+describe( 'Group', () => {
 	beforeEach( async () => {
 		await createNewPost();
 	} );
 
 	it( 'can be created using the block inserter', async () => {
-		await searchForBlock( 'Section' );
-		await page.click( '.editor-block-list-item-section' );
-		await page.keyboard.type( 'Section block' );
+		await searchForBlock( 'Group' );
+		await page.click( '.editor-block-list-item-group' );
+		await page.keyboard.type( 'Group block' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'can be created using the slash inserter', async () => {
 		await clickBlockAppender();
-		await page.keyboard.type( '/section' );
+		await page.keyboard.type( '/group' );
 		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Section block' );
+		await page.keyboard.type( 'Group block' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );