Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename section block to group #14920

Merged
merged 3 commits into from
Apr 11, 2019
Merged

Rename section block to group #14920

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
383a359
Rename section block to group
talldan Apr 11, 2019
79dda10
Update transforms test for rename of section block to group
talldan Apr 11, 2019
09f7956
Alphabeticalize
talldan Apr 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
@import "./quote/editor.scss";
@import "./rss/editor.scss";
@import "./search/editor.scss";
@import "./section/editor.scss";
@import "./group/editor.scss";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can it be moved to be sorted alphabetically?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 done

@import "./shortcode/editor.scss";
@import "./spacer/editor.scss";
@import "./subhead/editor.scss";
Expand Down
2 changes: 1 addition & 1 deletion ...ages/block-library/src/section/block.json → packages/block-library/src/group/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "core/section",
"name": "core/group",
"category": "layout",
"attributes": {
"backgroundColor": {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/section/edit.js → packages/block-library/src/group/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Expand Down Expand Up @@ -45,4 +45,4 @@ function SectionEdit( { className, setBackgroundColor, backgroundColor } ) {
);
}

export default withColors( 'backgroundColor' )( SectionEdit );
export default withColors( 'backgroundColor' )( GroupEdit );
28 changes: 14 additions & 14 deletions ...ges/block-library/src/section/editor.scss → packages/block-library/src/group/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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;
Expand All @@ -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`
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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);
}
}
6 changes: 3 additions & 3 deletions packages/block-library/src/section/index.js → packages/block-library/src/group/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ],
Expand Down
3 changes: 1 addition & 2 deletions ...ages/block-library/src/section/theme.scss → packages/block-library/src/group/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.wp-block-section {

.wp-block-group {
&.has-background {
// Matches paragraph Block padding
// Todo: normalise with variables
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can it be moved to be sorted alphabetically?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 done

import * as separator from './separator';
import * as shortcode from './shortcode';
import * as spacer from './spacer';
Expand Down Expand Up @@ -108,7 +108,7 @@ export const registerCoreBlocks = () => {
pullquote,
rss,
search,
section,
group,
separator,
reusableBlock,
spacer,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
4 changes: 2 additions & 2 deletions packages/e2e-tests/fixtures/block-transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,8 +303,8 @@ export const EXPECTED_TRANSFORMS = {
originalBlock: 'Search',
availableTransforms: [],
},
core__section: {
originalBlock: 'Section',
core__group: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can it be moved to be sorted alphabetically?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 done

originalBlock: 'Group',
availableTransforms: [],
},
core__separator: {
Expand Down
10 changes: 10 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
12 changes: 6 additions & 6 deletions ...-tests/fixtures/blocks/core__section.json → ...2e-tests/fixtures/blocks/core__group.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
[
{
"clientId": "_clientId_0",
"name": "core/section",
"name": "core/group",
"isValid": true,
"attributes": {
"backgroundColor": "secondary",
Expand All @@ -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>"
}
]
14 changes: 7 additions & 7 deletions ...fixtures/blocks/core__section.parsed.json → ...s/fixtures/blocks/core__group.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[
{
"blockName": "core/section",
"blockName": "core/group",
"attrs": {
"backgroundColor": "secondary",
"align": "full"
Expand All @@ -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,
Expand Down
9 changes: 9 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__group.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
10 changes: 0 additions & 10 deletions packages/e2e-tests/fixtures/blocks/core__section.html
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions packages/e2e-tests/fixtures/blocks/core__section.serialized.html
View file
Open in desktop

This file was deleted.

17 changes: 17 additions & 0 deletions packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->"
`;
17 changes: 0 additions & 17 deletions packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap
View file
Open in desktop

This file was deleted.

12 changes: 6 additions & 6 deletions ...es/e2e-tests/specs/blocks/section.test.js → ...ages/e2e-tests/specs/blocks/group.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
} );
Expand Down