Add: Buttons block

packages/block-editor/src/components/block-alignment-toolbar/index.js

@@ -52,6 +52,7 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON
 
 	return (
 		<Toolbar
+			className="block-editor-block-alignment-toolbar"
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon }
 			label={ __( 'Change alignment' ) }

packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap

@@ -2,6 +2,7 @@
 
 exports[`BlockAlignmentToolbar should match snapshot 1`] = `
 <Toolbar
+  className="block-editor-block-alignment-toolbar"
   controls={
     Array [
       Object {

packages/block-library/src/button/edit-settings.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+} from '@wordpress/element';
+
+const ButtonEditSettings = createContext( {
+	urlInPopover: false,
+} );
+export { ButtonEditSettings };

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

@@ -10,6 +10,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	Component,
 	useCallback,
+	useContext,
+	useState,
 } from '@wordpress/element';
 import {
 	compose,
@@ -24,6 +26,7 @@ import {
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
+	URLPopover,
 	URLInput,
 	RichText,
 	ContrastChecker,
@@ -32,6 +35,11 @@ import {
 	PanelColorSettings,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { ButtonEditSettings } from './edit-settings';
+
 const { getComputedStyle } = window;
 
 const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
@@ -72,6 +80,79 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
 		</PanelBody>
 	);
 }
+const InlineURLPicker = withInstanceId(
+	function( { instanceId, isSelected, url, onChange } ) {
+		const linkId = `wp-block-button__inline-link-${ instanceId }`;
+		return (
+			<BaseControl
+				label={ __( 'Link' ) }
+				className="wp-block-button__inline-link"
+				id={ linkId }>
+				<URLInput
+					className="wp-block-button__inline-link-input"
+					value={ url }
+					/* eslint-disable jsx-a11y/no-autofocus */
+					// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
+					autoFocus={ false }
+					/* eslint-enable jsx-a11y/no-autofocus */
+					onChange={ onChange }
+					disableSuggestions={ ! isSelected }
+					id={ linkId }
+					isFullWidth
+					hasBorder
+				/>
+			</BaseControl>
+		);
+	}
+);
+
+function PopoverURLPicker( { url, onChange } ) {
+	const [ urlInput, setUrlInput ] = useState( url || '' );
+	const [ isPopoverEnable, setIsPopoverEnable ] = useState( true );
+	const onSubmit = useCallback(
+		() => {
+			onChange( urlInput );
+			setIsPopoverEnable( false );
+		},
+		[ urlInput, onChange ]
+	);
+	if ( ! isPopoverEnable ) {
+		return null;
+	}
+	return (
+		<URLPopover focusOnMount={ false }>
+			<URLPopover.LinkEditor
+				className="editor-format-toolbar__link-container-content block-editor-format-toolbar__link-container-content"
+				value={ urlInput }
+				onChangeInputValue={ setUrlInput }
+				onSubmit={ onSubmit }
+			/>
+		</URLPopover>
+	);
+}
+
+function URLPicker( { isSelected, url, setAttributes } ) {
+	const onChange = useCallback(
+		( value ) => setAttributes( { url: value } ),
+		[ setAttributes ]
+	);
+	const { urlInPopover } = useContext( ButtonEditSettings );
+	if ( urlInPopover ) {
+		return isSelected ? (
+			<PopoverURLPicker
+				url={ url }
+				onChange={ onChange }
+			/>
+		) : null;
+	}
+	return (
+		<InlineURLPicker
+			url={ url }
+			isSelected={ isSelected }
+			onChange={ onChange }
+		/>
+	);
+}
 
 class ButtonEdit extends Component {
 	constructor() {
@@ -121,7 +202,6 @@ class ButtonEdit extends Component {
 			fallbackTextColor,
 			setAttributes,
 			className,
-			instanceId,
 			isSelected,
 		} = this.props;
 
@@ -135,8 +215,6 @@ class ButtonEdit extends Component {
 			url,
 		} = attributes;
 
-		const linkId = `wp-block-button__inline-link-${ instanceId }`;
-
 		return (
 			<div className={ className } title={ title } ref={ this.bindRef }>
 				<RichText
@@ -159,24 +237,11 @@ class ButtonEdit extends Component {
 						borderRadius: borderRadius ? borderRadius + 'px' : undefined,
 					} }
 				/>
-				<BaseControl
-					label={ __( 'Link' ) }
-					className="wp-block-button__inline-link"
-					id={ linkId }>
-					<URLInput
-						className="wp-block-button__inline-link-input"
-						value={ url }
-						/* eslint-disable jsx-a11y/no-autofocus */
-						// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
-						autoFocus={ false }
-						/* eslint-enable jsx-a11y/no-autofocus */
-						onChange={ ( value ) => setAttributes( { url: value } ) }
-						disableSuggestions={ ! isSelected }
-						id={ linkId }
-						isFullWidth
-						hasBorder
-					/>
-				</BaseControl>
+				<URLPicker
+					url={ url }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+				/>
 				<InspectorControls>
 					<PanelColorSettings
 						title={ __( 'Color Settings' ) }
@@ -228,7 +293,6 @@ class ButtonEdit extends Component {
 }
 
 export default compose( [
-	withInstanceId,
 	withColors( 'backgroundColor', { textColor: 'color' } ),
 	applyFallbackStyles,
 ] )( ButtonEdit );

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

@@ -25,6 +25,7 @@ export const settings = {
 		align: true,
 		alignWide: false,
 	},
+	parent: [ 'core/buttons' ],
 	styles: [
 		{ name: 'fill', label: __( 'Fill' ), isDefault: true },
 		{ name: 'outline', label: __( 'Outline' ) },

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,60 @@
+/**
+ * WordPress dependencies
+ */
+import { IconButton } from '@wordpress/components';
+import { InnerBlocks } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { name as buttonBlockName } from '../button/';
+import { ButtonEditSettings } from '../button/edit-settings';
+
+const ALLOWED_BLOCKS = [ buttonBlockName ];
+const BUTTON_BLOCK_SETTINGS = { urlInPopover: true };
+const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
+
+function useInsertButton( clientId ) {
+	const { insertBlock } = useDispatch( 'core/block-editor' );
+	const insertButton = useCallback(
+		() => {
+			const buttonBlock = createBlock( buttonBlockName );
+			insertBlock( buttonBlock, undefined, clientId );
+		},
+		[ insertBlock, clientId ]
+	);
+	return useCallback(
+		() => {
+			return (
+				<IconButton
+					icon="insert"
+					label={ __( 'Add button' ) }
+					labelPosition="bottom"
+					onClick={ insertButton }
+				/>
+			);
+		},
+		[ insertButton ]
+	);
+}
+
+function ButtonsEdit( { clientId, className } ) {
+	const renderAppender = useInsertButton( clientId );
+	return (
+		<div className={ className }>
+			<ButtonEditSettings.Provider value={ BUTTON_BLOCK_SETTINGS }>
+				<InnerBlocks
+					allowedBlocks={ ALLOWED_BLOCKS }
+					renderAppender={ renderAppender }
+					template={ BUTTONS_TEMPLATE }
+				/>
+			</ButtonEditSettings.Provider>
+		</div>
+	);
+}
+
+export default ButtonsEdit;

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

@@ -0,0 +1,78 @@
+.wp-block-buttons .block-editor-block-list__block[data-type="core/button"] {
+	display: inline-block;
+}
+
+
+.wp-block-buttons {
+	// 1. Reset margins on immediate innerblocks container.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	// 2. Remove paddings on subsequent immediate children.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+		width: auto;
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	// 3. Remove margins on subsequent Edit container.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	// 4. Hide the block outlines.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit::before {
+		content: none;
+	}
+
+	// 5. Remove vertical margins on subsequent block container.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit > [data-block] {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	// Hide the breadcrumb.
+	// Hide the mover.
+	.block-editor-block-list__breadcrumb,
+	.block-editor-block-mover.block-editor-block-mover { // Needs specificity.
+		display: none;
+	}
+
+	.block-editor-inserter {
+		display: none;
+	}
+
+	.block-editor-block-list__block[data-type="core/button"] .block-editor-block-alignment-toolbar {
+		display: none;
+	}
+
+	.wp-block-button .wp-block-button__link {
+		margin-top: 0;
+	}
+}
+
+.block-editor-block-list__block[data-type="core/buttons"] {
+	div[data-type="core/button"] div[data-block] {
+		display: block;
+	}
+
+	&[data-align="center"] .block-editor-block-list__layout {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	&[data-align="right"] .block-editor-block-list__layout {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.block-list-appender {
+		display: inline-block !important;
+		margin: 0;
+	}
+}

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

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { G, Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z" /></G></SVG>
+);

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

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import icon from './icon';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Buttons' ),
+	description: __( 'Prompt visitors to take action with a  group of button-style links.' ),
+	icon,
+	keywords: [ __( 'link' ) ],
+	supports: {
+		align: true,
+		alignWide: false,
+	},
+	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() {
+	return (
+		<div>
+			<InnerBlocks.Content />
+		</div>
+	);
+}