Customizable content testing PR

packages/block-editor/package.json

@@ -50,6 +50,7 @@
 		"@wordpress/token-list": "file:../token-list",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
+		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
 		"css-mediaquery": "^0.1.2",
@@ -60,6 +61,7 @@
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^3.0.2",
 		"react-spring": "^8.0.19",
+		"react-transition-group": "^2.9.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0",

packages/block-editor/src/components/block-controls/index.js

@@ -20,18 +20,24 @@ import useDisplayBlockControls from '../use-display-block-controls';
 
 const { Fill, Slot } = createSlotFill( 'BlockControls' );
 
-function BlockControlsSlot( props ) {
+function BlockControlsSlot( { __experimentalIsExpanded = false, ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
-	return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+	return (
+		<Slot
+			name={ buildSlotName( __experimentalIsExpanded ) }
+			{ ...props }
+			fillProps={ accessibleToolbarState }
+		/>
+	);
 }
 
-function BlockControlsFill( { controls, children } ) {
+function BlockControlsFill( { controls, __experimentalIsExpanded, children } ) {
 	if ( ! useDisplayBlockControls() ) {
 		return null;
 	}
 
 	return (
-		<Fill>
+		<Fill name={ buildSlotName( __experimentalIsExpanded ) }>
 			{ ( fillProps ) => {
 				// Children passed to BlockControlsFill will not have access to any
 				// React Context whose Provider is part of the BlockControlsSlot tree.
@@ -48,6 +54,9 @@ function BlockControlsFill( { controls, children } ) {
 	);
 }
 
+const buildSlotName = ( isExpanded ) =>
+	`BlockControls${ isExpanded ? '-expanded' : '' }`;
+
 const BlockControls = BlockControlsFill;
 
 BlockControls.Slot = BlockControlsSlot;

packages/block-editor/src/components/block-toolbar/customizable-content.js

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { throttle } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import BlockControls from '../block-controls';
+
+export default function CustomizableBlockToolbarContent( {
+	children,
+	className,
+} ) {
+	return (
+		<BlockControls.Slot __experimentalIsExpanded>
+			{ ( fills ) => {
+				return (
+					<CustomizableBlockToolbarContentChildren
+						className={ className }
+						fills={ fills }
+					>
+						{ children }
+					</CustomizableBlockToolbarContentChildren>
+				);
+			} }
+		</BlockControls.Slot>
+	);
+}
+
+function CustomizableBlockToolbarContentChildren( {
+	fills,
+	className = '',
+	children,
+} ) {
+	const containerRef = useRef();
+	const fillsRef = useRef();
+	const toolbarRef = useRef();
+	const [ dimensions, setDimensions ] = useState( {} );
+
+	const fillsPropRef = useRef();
+	fillsPropRef.current = fills;
+	const resize = useCallback(
+		throttle( ( elem ) => {
+			if ( ! elem ) {
+				elem = fillsPropRef.current.length
+					? fillsRef.current
+					: toolbarRef.current;
+			}
+			if ( ! elem ) {
+				return;
+			}
+			elem.style.position = 'absolute';
+			elem.style.width = 'auto';
+			const css = window.getComputedStyle( elem, null );
+			setDimensions( {
+				width: css.getPropertyValue( 'width' ),
+				height: css.getPropertyValue( 'height' ),
+			} );
+			elem.style.position = '';
+			elem.style.width = '';
+		}, 100 ),
+		[]
+	);
+
+	useEffect( () => {
+		// Create an observer instance linked to the callback function
+		const observer = new window.MutationObserver( function (
+			mutationsList
+		) {
+			const hasChildList = mutationsList.find(
+				( { type } ) => type === 'childList'
+			);
+			if ( hasChildList ) {
+				resize();
+			}
+		} );
+
+		// Start observing the target node for configured mutations
+		observer.observe( containerRef.current, {
+			childList: true,
+			subtree: true,
+		} );
+
+		return () => observer.disconnect();
+	}, [] );
+
+	useEffect( () => {
+		if ( fills.length > 1 ) {
+			warning(
+				`${ fills.length } <BlockControls isExpanded> slots were registered but only one may be displayed.`
+			);
+		}
+	}, [ fills.length ] );
+
+	return (
+		<div
+			className="block-editor-block-toolbar-width-container"
+			ref={ containerRef }
+			style={ dimensions }
+		>
+			<TransitionGroup>
+				{ fills.length ? (
+					<CSSTransition
+						key="fills"
+						timeout={ 300 }
+						classNames="block-editor-block-toolbar-content"
+					>
+						<div className={ className } ref={ fillsRef }>
+							{ fills[ 0 ] }
+						</div>
+					</CSSTransition>
+				) : (
+					<CSSTransition
+						key="default"
+						timeout={ 300 }
+						classNames="block-editor-block-toolbar-content"
+					>
+						<div className={ className } ref={ toolbarRef }>
+							{ children }
+						</div>
+					</CSSTransition>
+				) }
+			</TransitionGroup>
+		</div>
+	);
+}

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

@@ -22,8 +22,12 @@ import BlockFormatControls from '../block-format-controls';
 import BlockSettingsMenu from '../block-settings-menu';
 import BlockDraggable from '../block-draggable';
 import { useShowMoversGestures, useToggleBlockHighlight } from './utils';
+import CustomizableBlockToolbarContent from './customizable-content';
 
-export default function BlockToolbar( { hideDragHandle } ) {
+export default function BlockToolbar( {
+	hideDragHandle,
+	__experimentalCustomizableContent = false,
+} ) {
 	const {
 		blockClientIds,
 		blockClientId,
@@ -100,8 +104,12 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		shouldShowMovers && 'is-showing-movers'
 	);
 
+	const Wrapper = __experimentalCustomizableContent
+		? CustomizableBlockToolbarContent
+		: 'div';
+
 	return (
-		<div className={ classes }>
+		<Wrapper className={ classes }>
 			<div
 				className="block-editor-block-toolbar__mover-switcher-container"
 				ref={ nodeRef }
@@ -152,6 +160,6 @@ export default function BlockToolbar( { hideDragHandle } ) {
 				</>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />
-		</div>
+		</Wrapper>
 	);
 }

packages/block-editor/src/components/block-toolbar/style.scss

@@ -103,3 +103,31 @@
 		display: block;
 	}
 }
+
+.block-editor-block-toolbar-width-container {
+	position: relative;
+	overflow: hidden;
+	transition: width 300ms;
+}
+
+.block-editor-block-toolbar-content-enter {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: auto;
+	opacity: 0;
+}
+.block-editor-block-toolbar-content-enter-active {
+	position: absolute;
+	opacity: 1;
+	transition: opacity 300ms;
+}
+.block-editor-block-toolbar-content-exit {
+	width: auto;
+	opacity: 1;
+	pointer-events: none;
+}
+.block-editor-block-toolbar-content-exit-active {
+	opacity: 0;
+	transition: opacity 300ms;
+}