Add a new buttons block

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

@@ -21,6 +21,7 @@ export const settings = {
 	description: __( 'Prompt visitors to take action with a button-style link.' ),
 	icon,
 	keywords: [ __( 'link' ) ],
+	parent: [ 'core/buttons' ],
 	supports: {
 		align: true,
 		alignWide: false,

packages/block-library/src/buttons/block.json

@@ -0,0 +1,5 @@
+{
+	"name": "core/buttons",
+	"category": "layout",
+	"attributes": {}
+}

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

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	InnerBlocks,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+const ALLOWED_BLOCKS = [ 'core/button' ];
+
+// Template contains the links that show when start.
+const TEMPLATE = [
+	[ 'core/button' ],
+];
+
+export const ButtonsEdit = function( { className } ) {
+	return (
+		<div className={ className }>
+			<InnerBlocks
+				allowedBlocks={ ALLOWED_BLOCKS }
+				templateLock={ false }
+				template={ TEMPLATE }
+			/>
+		</div>
+	);
+};
+
+export default ButtonsEdit;

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

@@ -0,0 +1,6 @@
+.wp-block-buttons {
+	.editor-block-list__layout {
+		display: flex;
+		justify-content: flex-start;
+	}
+}

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import icon from '../button/icon';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Buttons' ),
+	description: __( 'Create a block of buttons' ),
+	icon,
+	keywords: [ __( 'link' ) ],
+	supports: {
+		align: true,
+		alignWide: false,
+	},
+	styles: [
+		{ name: 'fill', label: __( 'Fill' ), isDefault: true },
+		{ name: 'outline', label: __( 'Outline' ) },
+	],
+	edit,
+	save,
+};

packages/block-library/src/buttons/save.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save( { className } ) {
+	return (
+		<ul className={ className }>
+			<InnerBlocks.Content />
+		</ul>
+	);
+}

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

@@ -0,0 +1,4 @@
+.wp-block-buttons {
+	display: flex;
+	justify-content: flex-start;
+}

packages/block-library/src/editor.scss

@@ -2,6 +2,7 @@
 @import "./audio/editor.scss";
 @import "./block/editor.scss";
 @import "./button/editor.scss";
+@import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./code/editor.scss";
 @import "./columns/editor.scss";

packages/block-library/src/index.js

@@ -24,6 +24,7 @@ import * as gallery from './gallery';
 import * as archives from './archives';
 import * as audio from './audio';
 import * as button from './button';
+import * as buttons from './buttons';
 import * as calendar from './calendar';
 import * as categories from './categories';
 import * as code from './code';
@@ -105,6 +106,7 @@ export const registerCoreBlocks = () => {
 		archives,
 		audio,
 		button,
+		buttons,
 		calendar,
 		categories,
 		code,

packages/block-library/src/style.scss

@@ -1,5 +1,6 @@
 @import "./audio/style.scss";
 @import "./button/style.scss";
+@import "./buttons/style.scss";
 @import "./calendar/style.scss";
 @import "./categories/style.scss";
 @import "./columns/style.scss";