diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index 80f10dd9672bbf..ce5fe62b38c9f3 100644 --- a/packages/block-library/src/button/index.js +++ b/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, diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json new file mode 100644 index 00000000000000..c6fd753dba9322 --- /dev/null +++ b/packages/block-library/src/buttons/block.json @@ -0,0 +1,5 @@ +{ + "name": "core/buttons", + "category": "layout", + "attributes": {} +} diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js new file mode 100644 index 00000000000000..ba5f29595c5282 --- /dev/null +++ b/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 ( +
+ +
+ ); +}; + +export default ButtonsEdit; diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss new file mode 100644 index 00000000000000..c0bf40a42b9bd5 --- /dev/null +++ b/packages/block-library/src/buttons/editor.scss @@ -0,0 +1,6 @@ +.wp-block-buttons { + .editor-block-list__layout { + display: flex; + justify-content: flex-start; + } +} diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js new file mode 100644 index 00000000000000..42420e2330f7cc --- /dev/null +++ b/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, +}; diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js new file mode 100644 index 00000000000000..d21ee51216daa4 --- /dev/null +++ b/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 ( + + ); +} diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss new file mode 100644 index 00000000000000..098d6636bb0cb3 --- /dev/null +++ b/packages/block-library/src/buttons/style.scss @@ -0,0 +1,4 @@ +.wp-block-buttons { + display: flex; + justify-content: flex-start; +} diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 3b38a4e1366408..e6cd240f8482ab 100644 --- a/packages/block-library/src/editor.scss +++ b/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"; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index e05057a05ed100..daf2495bf6021d 100644 --- a/packages/block-library/src/index.js +++ b/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, diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 433ef8cb3aa2f3..06f337061f5ed4 100644 --- a/packages/block-library/src/style.scss +++ b/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";