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

@@ -2,13 +2,17 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { compact, partial } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import {
 	useCallback,
+	useContext,
+	useMemo,
+	useState,
 } from '@wordpress/element';
 import {
 	compose,
@@ -20,18 +24,27 @@ import {
 	RangeControl,
 	TextControl,
 	ToggleControl,
+	Toolbar,
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
 	__experimentalGradientPickerPanel,
 	__experimentalUseGradient,
+	BlockControls,
 	ContrastChecker,
 	InspectorControls,
 	PanelColorSettings,
 	RichText,
 	URLInput,
+	URLPopover,
 	withColors,
 } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { ButtonEditSettings } from './edit-settings';
 
 const { getComputedStyle } = window;
 
@@ -74,17 +87,146 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
 	);
 }
 
+function ToolbarMovers( { clientId } ) {
+	const {
+		parentID,
+		isFirst,
+		isLast,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockIndex,
+				getBlockOrder,
+				getBlockRootClientId,
+			} = select( 'core/block-editor' );
+			const rootClientId = getBlockRootClientId( clientId );
+			const numberOfSiblings = getBlockOrder( rootClientId ).length;
+			const buttonIndex = getBlockIndex( clientId, rootClientId );
+			return {
+				parentID: rootClientId,
+				isFirst: buttonIndex === 0,
+				isLast: buttonIndex === ( numberOfSiblings - 1 ),
+			};
+		},
+		clientId
+	);
+	const { moveBlocksUp, moveBlocksDown } = useDispatch( 'core/block-editor' );
+	const moveUp = useCallback(
+		partial( moveBlocksUp, [ clientId ], parentID ),
+		[ moveBlocksUp, clientId, parentID ]
+	);
+	const moveDown = useCallback(
+		partial( moveBlocksDown, [ clientId ], parentID ),
+		[ moveBlocksDown, clientId, parentID ]
+	);
+	const toolbarControls = useMemo(
+		() => ( compact( [
+			isFirst ? null : {
+				icon: 'arrow-left-alt2',
+				title: __( 'Move left' ),
+				onClick: moveUp,
+			},
+			isLast ? null : {
+				icon: 'arrow-right-alt2',
+				title: __( 'Move right' ),
+				onClick: moveDown,
+			},
+		] ) ),
+		[ moveUp, moveDown, isFirst, isLast ]
+	);
+
+	return (
+		<BlockControls>
+			<Toolbar controls={ toolbarControls } />
+		</BlockControls>
+	);
+}
+
+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 }
+		/>
+	);
+}
+
 function ButtonEdit( {
 	attributes,
 	backgroundColor,
+	clientId,
 	textColor,
 	setBackgroundColor,
 	setTextColor,
 	fallbackBackgroundColor,
 	fallbackTextColor,
 	setAttributes,
 	className,
-	instanceId,
 	isSelected,
 } ) {
 	const {
@@ -127,7 +269,6 @@ function ButtonEdit( {
 		setGradient,
 	} = __experimentalUseGradient();
 
-	const linkId = `wp-block-button__inline-link-${ instanceId }`;
 	return (
 		<div className={ className } title={ title }>
 			<RichText
@@ -154,24 +295,11 @@ function ButtonEdit( {
 					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' ) }
@@ -229,12 +357,12 @@ function ButtonEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
+			<ToolbarMovers clientId={ clientId } />
 		</div>
 	);
 }
 
 export default compose( [
-	withInstanceId,
 	withColors( 'backgroundColor', { textColor: 'color' } ),
 	applyFallbackStyles,
 ] )( ButtonEdit );

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

@@ -32,6 +32,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,70 @@
+/**
+ * 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' ] ];
+const UI_PARTS = {
+	hasSelectedUI: false,
+	hasFocusedUI: false,
+	hasHoveredUI: false,
+	hasBreadcrumbs: false,
+	hasMovers: false,
+	hasSpacing: false,
+	hasSideInserter: false,
+};
+
+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 }
+					__experimentalUIParts={ UI_PARTS }
+				/>
+			</ButtonEditSettings.Provider>
+		</div>
+	);
+}
+
+export default ButtonsEdit;

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

@@ -0,0 +1,37 @@
+.wp-block-buttons .wp-block.block-editor-block-list__block[data-type="core/button"] {
+	display: inline-block;
+	width: auto;
+}
+
+.wp-block-buttons {
+	.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;
+	}
+}