@wordpress/block-editor 14.7.0 → 14.7.1-next.082ed6819.0

package/src/components/block-manager/index.js

@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { SearchControl, Button } from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import BlockManagerCategory from './category';
+
+/**
+ * Provides a list of blocks with checkboxes.
+ *
+ * @param {Object}   props                    Props.
+ * @param {Array}    props.blockTypes         An array of blocks.
+ * @param {Array}    props.selectedBlockTypes An array of selected blocks.
+ * @param {Function} props.onChange           Function to be called when the selected blocks change.
+ */
+export default function BlockManager( {
+	blockTypes,
+	selectedBlockTypes,
+	onChange,
+} ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const [ search, setSearch ] = useState( '' );
+	const { categories, isMatchingSearchTerm } = useSelect( ( select ) => {
+		return {
+			categories: select( blocksStore ).getCategories(),
+			isMatchingSearchTerm: select( blocksStore ).isMatchingSearchTerm,
+		};
+	}, [] );
+
+	function enableAllBlockTypes() {
+		onChange( blockTypes );
+	}
+
+	const filteredBlockTypes = blockTypes.filter( ( blockType ) => {
+		return ! search || isMatchingSearchTerm( blockType, search );
+	} );
+
+	const numberOfHiddenBlocks = blockTypes.length - selectedBlockTypes.length;
+
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! search ) {
+			return;
+		}
+		const count = filteredBlockTypes.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ filteredBlockTypes?.length, search, debouncedSpeak ] );
+
+	return (
+		<div className="block-editor-block-manager__content">
+			{ !! numberOfHiddenBlocks && (
+				<div className="block-editor-block-manager__disabled-blocks-count">
+					{ sprintf(
+						/* translators: %d: number of blocks. */
+						_n(
+							'%d block is hidden.',
+							'%d blocks are hidden.',
+							numberOfHiddenBlocks
+						),
+						numberOfHiddenBlocks
+					) }
+					<Button
+						__next40pxDefaultSize
+						variant="link"
+						onClick={ enableAllBlockTypes }
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</div>
+			) }
+			<SearchControl
+				__nextHasNoMarginBottom
+				label={ __( 'Search for a block' ) }
+				placeholder={ __( 'Search for a block' ) }
+				value={ search }
+				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
+				className="block-editor-block-manager__search"
+			/>
+			<div
+				tabIndex="0"
+				role="region"
+				aria-label={ __( 'Available block types' ) }
+				className="block-editor-block-manager__results"
+			>
+				{ filteredBlockTypes.length === 0 && (
+					<p className="block-editor-block-manager__no-results">
+						{ __( 'No blocks found.' ) }
+					</p>
+				) }
+				{ categories.map( ( category ) => (
+					<BlockManagerCategory
+						key={ category.slug }
+						title={ category.title }
+						blockTypes={ filteredBlockTypes.filter(
+							( blockType ) =>
+								blockType.category === category.slug
+						) }
+						selectedBlockTypes={ selectedBlockTypes }
+						onChange={ onChange }
+					/>
+				) ) }
+				<BlockManagerCategory
+					title={ __( 'Uncategorized' ) }
+					blockTypes={ filteredBlockTypes.filter(
+						( { category } ) => ! category
+					) }
+					selectedBlockTypes={ selectedBlockTypes }
+					onChange={ onChange }
+				/>
+			</div>
+		</div>
+	);
+}

package/src/components/block-manager/style.scss

@@ -0,0 +1,82 @@
+.block-editor-block-manager__no-results {
+	font-style: italic;
+	padding: $grid-unit-30 0;
+	text-align: center;
+}
+
+.block-editor-block-manager__search {
+	margin: $grid-unit-20 0;
+}
+
+.block-editor-block-manager__disabled-blocks-count {
+	border: $border-width solid $gray-300;
+	border-width: $border-width 0;
+	// Cover up horizontal areas off the sides of the box rectangle
+	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
+	padding: $grid-unit-10;
+	background-color: $white;
+	text-align: center;
+	position: sticky;
+	// When sticking, tuck the top border beneath the modal header border
+	top: ($grid-unit-05 + 1) * -1;
+	z-index: z-index(".block-editor-block-manager__disabled-blocks-count");
+
+	// Stick the category titles to the bottom
+	~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
+		top: $grid-unit-40 - 1;
+	}
+	.is-link {
+		margin-left: 12px;
+	}
+}
+
+.block-editor-block-manager__category {
+	margin: 0 0 $grid-unit-30 0;
+}
+
+.block-editor-block-manager__category-title {
+	position: sticky;
+	top: - $grid-unit-05; // Offsets the top padding on the modal content container
+	padding: $grid-unit-20 0;
+	background-color: $white;
+	z-index: z-index(".block-editor-block-manager__category-title");
+
+	.components-checkbox-control__label {
+		font-weight: 600;
+	}
+}
+
+.block-editor-block-manager__checklist {
+	margin-top: 0;
+}
+
+.block-editor-block-manager__category-title,
+.block-editor-block-manager__checklist-item {
+	border-bottom: 1px solid $gray-300;
+}
+
+.block-editor-block-manager__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
+
+	.components-modal__content &.components-checkbox-control__input-container {
+		margin: 0 $grid-unit-10;
+	}
+
+	.block-editor-block-icon {
+		margin-right: 10px;
+		fill: $gray-900;
+	}
+}
+
+.block-editor-block-manager__results {
+	border-top: $border-width solid $gray-300;
+}
+
+// Remove the top border from results when adjacent to the disabled block count
+.block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
+	border-top-width: 0;
+}

package/src/components/block-mover/README.md

@@ -1,12 +1,10 @@
-# Block mover
+# BlockMover
 
-Block movers allow moving blocks inside the editor using up and down buttons.
+BlockMover component allows moving blocks inside the editor using up and down buttons.
 
 ![Block mover screenshot](https://make.wordpress.org/core/files/2020/08/block-mover-screenshot.png)
 
-## Development guidelines
-
-### Usage
+## Usage
 
 Shows the block mover buttons in the block toolbar.
 
@@ -15,13 +13,22 @@ import { BlockMover } from '@wordpress/block-editor';
 const MyMover = () => <BlockMover clientIds={ [ clientId ] } />;
 ```
 
-### Props
+## Props
 
-#### clientIds
+### clientIds
 
-Blocks IDs
+The IDs of the blocks to move.
 
 -   Type: `Array`
+-   Required: Yes
+
+### hideDragHandle
+
+If this property is true, the drag handle is hidden.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
 
 ## Related components
 

package/src/components/block-mover/stories/index.story.js

@@ -14,6 +14,7 @@ import BlockMover from '../';
 import { ExperimentalBlockEditorProvider } from '../../provider';
 import { store as blockEditorStore } from '../../../store';
 
+// For the purpose of this story, we need to register the core blocks samples.
 registerCoreBlocks();
 const blocks = [
 	// vertical
@@ -30,81 +31,82 @@ const blocks = [
 	] ),
 ];
 
-function Provider( { children } ) {
-	const wrapperStyle = { margin: '24px', position: 'relative' };
-
-	return (
-		<div style={ wrapperStyle }>
+/**
+ * BlockMover component allows moving blocks inside the editor using up and down buttons.
+ */
+const meta = {
+	title: 'BlockEditor/BlockMover',
+	component: BlockMover,
+	parameters: {
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	decorators: [
+		( Story ) => (
 			<ExperimentalBlockEditorProvider value={ blocks }>
-				{ children }
+				<Toolbar label="Block Mover">
+					<Story />
+				</Toolbar>
 			</ExperimentalBlockEditorProvider>
-		</div>
-	);
-}
-
-function BlockMoverStory() {
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
-
-	useEffect( () => {
-		/**
-		 * This shouldn't be needed but unfortunatley
-		 * the layout orientation is not declarative, we need
-		 *  to render the blocks to update the block settings in the state.
-		 */
-		updateBlockListSettings( blocks[ 1 ].clientId, {
-			orientation: 'horizontal',
-		} );
-	}, [] );
-
-	return (
-		<div>
-			<p>The mover by default is vertical</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 0 ].innerBlocks[ 1 ].clientId ]
-							: []
-					}
-				/>
-			</Toolbar>
-
-			<p style={ { marginTop: 36 } }>
-				But it can also accommodate horizontal blocks.
-			</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ]
-							: []
-					}
-				/>
-			</Toolbar>
+		),
+	],
+	argTypes: {
+		clientIds: {
+			control: {
+				type: 'none',
+			},
+			description: 'The client IDs of the blocks to move.',
+		},
+		hideDragHandle: {
+			control: {
+				type: 'boolean',
+			},
+			description: 'If this property is true, the drag handle is hidden.',
+		},
+	},
+};
+export default meta;
 
-			<p style={ { marginTop: 36 } }>We can also hide the drag handle.</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 1 ].innerBlocks[ 0 ].clientId ]
-							: []
-					}
-					hideDragHandle
-				/>
-			</Toolbar>
-		</div>
-	);
-}
+export const Default = {
+	args: {
+		clientIds: [ blocks[ 0 ].innerBlocks[ 1 ].clientId ],
+	},
+};
 
-export default {
-	title: 'BlockEditor/BlockMover',
+/**
+ * This story shows the block mover with horizontal orientation.
+ * It is necessary to render the blocks to update the block settings in the state.
+ */
+export const Horizontal = {
+	decorators: [
+		( Story ) => {
+			const { updateBlockListSettings } = useDispatch( blockEditorStore );
+			useEffect( () => {
+				/**
+				 * This shouldn't be needed but unfortunately
+				 * the layout orientation is not declarative, we need
+				 * to render the blocks to update the block settings in the state.
+				 */
+				updateBlockListSettings( blocks[ 1 ].clientId, {
+					orientation: 'horizontal',
+				} );
+			}, [] );
+			return <Story />;
+		},
+	],
+	args: {
+		clientIds: [ blocks[ 1 ].innerBlocks[ 1 ].clientId ],
+	},
+	parameters: {
+		docs: { canvas: { sourceState: 'hidden' } },
+	},
 };
 
-export const _default = () => {
-	return (
-		<Provider>
-			<BlockMoverStory />
-		</Provider>
-	);
+/**
+ * You can hide the drag handle by `hideDragHandle` attribute.
+ */
+export const HideDragHandle = {
+	args: {
+		...Default.args,
+		hideDragHandle: true,
+	},
 };

package/src/components/block-mover/style.scss

@@ -71,6 +71,9 @@
 
 // Specificity is necessary to override block toolbar button styles.
 .components-button.block-editor-block-mover-button {
+	// Prevent the SVGs inside the button from overflowing the button.
+	overflow: hidden;
+
 	// Focus and toggle pseudo elements.
 	&::before {
 		content: "";

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -19,7 +19,7 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
-import __unstableCommentIconFill from '../../components/collab/block-comment-icon-slot';
+import CommentIconSlotFill from '../../components/collab/block-comment-icon-slot';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
@@ -295,7 +295,7 @@ export function BlockSettingsDropdown( {
 											</MenuItem>
 										</>
 									) }
-									<__unstableCommentIconFill.Slot
+									<CommentIconSlotFill.Slot
 										fillProps={ { onClose } }
 									/>
 								</MenuGroup>

package/src/components/block-settings-menu/index.js

@@ -7,12 +7,12 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
-import __unstableCommentIconToolbarFill from '../../components/collab/block-comment-icon-toolbar-slot';
+import CommentIconToolbarSlotFill from '../../components/collab/block-comment-icon-toolbar-slot';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
 		<ToolbarGroup>
-			<__unstableCommentIconToolbarFill.Slot />
+			<CommentIconToolbarSlotFill.Slot />
 
 			<ToolbarItem>
 				{ ( toggleProps ) => (

package/src/components/block-toolbar/index.js

@@ -36,6 +36,7 @@ import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import ChangeDesign from './change-design';
+import SwitchSectionStyle from './switch-section-style';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -72,6 +73,7 @@ export function PrivateBlockToolbar( {
 		showSlots,
 		showGroupButtons,
 		showLockButtons,
+		showSwitchSectionStyleButton,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -141,6 +143,7 @@ export function PrivateBlockToolbar( {
 			showSlots: ! isZoomOut(),
 			showGroupButtons: ! isZoomOut(),
 			showLockButtons: ! isZoomOut(),
+			showSwitchSectionStyleButton: isZoomOut(),
 		};
 	}, [] );
 
@@ -222,6 +225,9 @@ export function PrivateBlockToolbar( {
 				{ showShuffleButton && (
 					<ChangeDesign clientId={ blockClientIds[ 0 ] } />
 				) }
+				{ showSwitchSectionStyleButton && (
+					<SwitchSectionStyle clientId={ blockClientIds[ 0 ] } />
+				) }
 				{ shouldShowVisualToolbar && showSlots && (
 					<>
 						<BlockControls.Slot

package/src/components/block-toolbar/switch-section-style.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	Icon,
+	Path,
+	SVG,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useStylesForBlocks from '../block-styles/use-styles-for-block';
+import { replaceActiveStyle } from '../block-styles/utils';
+import { store as blockEditorStore } from '../../store';
+import { GlobalStylesContext } from '../global-styles';
+import { globalStylesDataKey } from '../../store/private-keys';
+import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
+
+const styleIcon = (
+	<SVG
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z" />
+		<Path
+			stroke="currentColor"
+			strokeWidth="1.5"
+			d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z"
+		/>
+	</SVG>
+);
+
+function SwitchSectionStyle( { clientId } ) {
+	const { stylesToRender, activeStyle, className } = useStylesForBlocks( {
+		clientId,
+	} );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// Get global styles data
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const { globalSettings, globalStyles, blockName } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				globalSettings: settings.__experimentalFeatures,
+				globalStyles: settings[ globalStylesDataKey ],
+				blockName: select( blockEditorStore ).getBlockName( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	// Get the background color for the active style
+	const activeStyleBackground = activeStyle?.name
+		? getVariationStylesWithRefValues(
+				{
+					settings: mergedConfig?.settings ?? globalSettings,
+					styles: mergedConfig?.styles ?? globalStyles,
+				},
+				blockName,
+				activeStyle.name
+		  )?.color?.background
+		: undefined;
+
+	if ( ! stylesToRender || stylesToRender.length === 0 ) {
+		return null;
+	}
+
+	const handleStyleSwitch = () => {
+		const currentIndex = stylesToRender.findIndex(
+			( style ) => style.name === activeStyle.name
+		);
+
+		const nextIndex = ( currentIndex + 1 ) % stylesToRender.length;
+		const nextStyle = stylesToRender[ nextIndex ];
+
+		const styleClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			nextStyle
+		);
+
+		updateBlockAttributes( clientId, {
+			className: styleClassName,
+		} );
+	};
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				onClick={ handleStyleSwitch }
+				label={ __( 'Shuffle styles' ) }
+			>
+				<Icon
+					icon={ styleIcon }
+					style={ {
+						fill: activeStyleBackground || 'transparent',
+					} }
+				/>
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}
+
+export default SwitchSectionStyle;

package/src/components/collab/block-comment-icon-slot.js

@@ -3,10 +3,6 @@
  */
 import { createSlotFill } from '@wordpress/components';
 
-const { Fill: __unstableCommentIconFill, Slot } = createSlotFill(
-	'__unstableCommentIconFill'
-);
+const CommentIconSlotFill = createSlotFill( Symbol( 'CommentIconSlotFill' ) );
 
-__unstableCommentIconFill.Slot = Slot;
-
-export default __unstableCommentIconFill;
+export default CommentIconSlotFill;

package/src/components/collab/block-comment-icon-toolbar-slot.js

@@ -3,10 +3,8 @@
  */
 import { createSlotFill } from '@wordpress/components';
 
-const { Fill: __unstableCommentIconToolbarFill, Slot } = createSlotFill(
-	'__unstableCommentIconToolbarFill'
+const CommentIconToolbarSlotFill = createSlotFill(
+	Symbol( 'CommentIconToolbarSlotFill' )
 );
 
-__unstableCommentIconToolbarFill.Slot = Slot;
-
-export default __unstableCommentIconToolbarFill;
+export default CommentIconToolbarSlotFill;

package/src/components/color-palette/with-color-context.js

@@ -10,14 +10,32 @@ import { useSettings } from '../use-settings';
 
 export default createHigherOrderComponent( ( WrappedComponent ) => {
 	return ( props ) => {
-		const [ colorsFeature, enableCustomColors ] = useSettings(
-			'color.palette',
-			'color.custom'
+		// Get the default colors, theme colors, and custom colors
+		const [
+			defaultColors,
+			themeColors,
+			customColors,
+			enableCustomColors,
+			enableDefaultColors,
+		] = useSettings(
+			'color.palette.default',
+			'color.palette.theme',
+			'color.palette.custom',
+			'color.custom',
+			'color.defaultPalette'
 		);
-		const {
-			colors = colorsFeature,
-			disableCustomColors = ! enableCustomColors,
-		} = props;
+
+		const _colors = enableDefaultColors
+			? [
+					...( themeColors || [] ),
+					...( defaultColors || [] ),
+					...( customColors || [] ),
+			  ]
+			: [ ...( themeColors || [] ), ...( customColors || [] ) ];
+
+		const { colors = _colors, disableCustomColors = ! enableCustomColors } =
+			props;
+
 		const hasColorsToChoose =
 			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (