@wordpress/block-editor 12.14.0 → 12.16.0

package/src/components/inner-blocks/warning-max-depth-exceeded.native.js

@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback, View } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,54 +18,71 @@ import UnsupportedBlockDetails from '../unsupported-block-details';
 import { store as blockEditorStore } from '../../store';
 import { MAX_NESTING_DEPTH } from './constants';
 import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+import {
+	useConvertToGroupButtons,
+	useConvertToGroupButtonProps,
+} from '../convert-to-group-buttons';
+
+const EMPTY_ARRAY = [];
 
 const WarningMaxDepthExceeded = ( { clientId } ) => {
 	const [ showDetails, setShowDetails ] = useState( false );
 
-	const { isSelected, innerBlocks } = useSelect(
-		( select ) => {
-			const { getBlock, isBlockSelected } = select( blockEditorStore );
-			return {
-				innerBlocks: getBlock( clientId )?.innerBlocks || [],
-				isSelected: isBlockSelected( clientId ),
-			};
-		},
+	const isSelected = useSelect(
+		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
 		[ clientId ]
 	);
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	// We rely on the logic related to the Group/Ungroup buttons used in the block options to
+	// determine whether to use the Ungroup action.
+	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
+		clientId,
+	] );
+	const { isUngroupable } = convertToGroupButtonProps;
+	const convertToGroupButtons = useConvertToGroupButtons( {
+		...convertToGroupButtonProps,
+	} );
+	const onUngroup = convertToGroupButtons.ungroup.onSelect;
 
 	const {
 		isUnsupportedBlockEditorSupported,
 		canEnableUnsupportedBlockEditor,
 	} = useUnsupportedBlockEditor( clientId );
 
-	const onUngroup = () => {
-		if ( ! innerBlocks.length ) {
-			return;
-		}
-
-		replaceBlocks( clientId, innerBlocks );
-	};
-
-	let description;
-	// When UBE can't be used, the description mentions using the web browser to edit the block.
+	/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+	const descriptionFormat = __(
+		'Blocks nested deeper than %d levels may not render properly in the mobile editor.'
+	);
+	let description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
 	if (
 		! isUnsupportedBlockEditorSupported &&
 		! canEnableUnsupportedBlockEditor
 	) {
-		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-		const descriptionFormat = __(
-			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using your web browser.'
-		);
-		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+		// When UBE can't be used, the description mentions using the web browser to edit the block.
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using your web browser.'
+			);
 	}
 	// Otherwise, the description mentions using the web editor (i.e. UBE).
 	else {
-		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-		const descriptionFormat = __(
-			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using the web editor.'
-		);
-		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using the web editor.'
+			);
+	}
+	// If the block can be flattened, we also suggest to ungroup the block.
+	if ( isUngroupable ) {
+		description +=
+			' ' +
+			/* translators: Alternative option included in a warning related to having blocks deeply nested. */
+			__(
+				'Alternatively, you can flatten the content by ungrouping the block.'
+			);
 	}
 
 	return (
@@ -88,9 +105,16 @@ const WarningMaxDepthExceeded = ( { clientId } ) => {
 					onCloseSheet={ () => setShowDetails( false ) }
 					title={ __( 'Deeply nested block' ) }
 					description={ description }
-					customActions={ [
-						{ label: __( 'Ungroup block' ), onPress: onUngroup },
-					] }
+					customActions={
+						isUngroupable
+							? [
+									{
+										label: __( 'Ungroup block' ),
+										onPress: onUngroup,
+									},
+							  ]
+							: EMPTY_ARRAY
+					}
 				/>
 			</View>
 		</TouchableWithoutFeedback>

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -18,6 +18,7 @@ import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import {
+	PATTERN_TYPES,
 	allPatternsCategory,
 	myPatternsCategory,
 } from '../block-patterns-tab/utils';
@@ -70,7 +71,10 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 			if ( selectedCategory === allPatternsCategory.name ) {
 				return true;
 			}
-			if ( selectedCategory === myPatternsCategory.name && pattern.id ) {
+			if (
+				selectedCategory === myPatternsCategory.name &&
+				pattern.type === PATTERN_TYPES.user
+			) {
 				return true;
 			}
 			if ( selectedCategory === 'uncategorized' ) {

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -22,7 +22,7 @@ import {
  * Internal dependencies
  */
 import usePatternsState from '../hooks/use-patterns-state';
-import BlockPatternList from '../../block-patterns-list';
+import BlockPatternsList from '../../block-patterns-list';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import { PatternsFilter } from './patterns-filter';
 import { usePatternCategories } from './use-pattern-categories';
@@ -30,6 +30,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	PATTERN_TYPES,
 } from './utils';
 
 const noop = () => {};
@@ -69,7 +70,10 @@ export function PatternCategoryPreviews( {
 				if ( category.name === allPatternsCategory.name ) {
 					return true;
 				}
-				if ( category.name === myPatternsCategory.name && pattern.id ) {
+				if (
+					category.name === myPatternsCategory.name &&
+					pattern.type === PATTERN_TYPES.user
+				) {
 					return true;
 				}
 				if ( category.name !== 'uncategorized' ) {
@@ -155,7 +159,7 @@ export function PatternCategoryPreviews( {
 			</VStack>
 
 			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternList
+				<BlockPatternsList
 					ref={ scrollContainerRef }
 					shownPatterns={ pagingProps.categoryPatternsAsyncList }
 					blockPatterns={ pagingProps.categoryPatterns }

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -14,6 +14,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	PATTERN_TYPES,
 } from './utils';
 
 export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
@@ -69,7 +70,11 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
-		if ( filteredPatterns.some( ( pattern ) => pattern.id ) ) {
+		if (
+			filteredPatterns.some(
+				( pattern ) => pattern.type === PATTERN_TYPES.user
+			)
+		) {
 			categories.unshift( myPatternsCategory );
 		}
 		if ( filteredPatterns.length > 0 ) {

package/src/components/inserter/block-patterns-tab/utils.js

@@ -21,7 +21,7 @@ export const SYNC_TYPES = {
 
 export const allPatternsCategory = {
 	name: 'allPatterns',
-	label: __( 'All patterns' ),
+	label: __( 'All' ),
 };
 
 export const myPatternsCategory = {
@@ -53,9 +53,11 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 		return true;
 	}
 
-	// If user source selected, filter out theme patterns. Any pattern without
-	// an id wasn't created by a user.
-	if ( sourceFilter === PATTERN_TYPES.user && ! pattern.id ) {
+	// If user source selected, filter out theme patterns.
+	if (
+		sourceFilter === PATTERN_TYPES.user &&
+		pattern.type !== PATTERN_TYPES.user
+	) {
 		return true;
 	}
 

package/src/components/inserter/hooks/use-patterns-state.js

@@ -11,6 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { PATTERN_TYPES } from '../block-patterns-tab/utils';
 
 /**
  * Retrieves the block patterns inserter state.
@@ -57,7 +58,8 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const patternBlocks =
-				pattern.id && pattern.syncStatus !== 'unsynced'
+				pattern.type === PATTERN_TYPES.user &&
+				pattern.syncStatus !== 'unsynced'
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;
 			onInsert(

package/src/components/inserter/media-tab/media-panel.js

@@ -5,12 +5,12 @@ import { useRef, useEffect } from '@wordpress/element';
 import { Spinner, SearchControl } from '@wordpress/components';
 import { focus } from '@wordpress/dom';
 import { __ } from '@wordpress/i18n';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import MediaList from './media-list';
-import useDebouncedInput from '../hooks/use-debounced-input';
 import { useMediaResults } from './hooks';
 import InserterNoResults from '../no-results';
 

package/src/components/inserter/menu.js

@@ -14,13 +14,15 @@ import {
 	useImperativeHandle,
 	useRef,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl } from '@wordpress/components';
+import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
@@ -28,7 +30,6 @@ import BlockPatternsTab from './block-patterns-tab';
 import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel';
 import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
-import useDebouncedInput from './hooks/use-debounced-input';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
@@ -68,12 +69,11 @@ function InserterMenu(
 		} );
 	const { showPatterns, inserterItems } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getInserterItems } =
-				select( blockEditorStore );
+			const { hasAllowedPatterns, getInserterItems } = unlock(
+				select( blockEditorStore )
+			);
 			return {
-				showPatterns: !! __experimentalGetAllowedPatterns(
-					destinationRootClientId
-				).length,
+				showPatterns: hasAllowedPatterns( destinationRootClientId ),
 				inserterItems: getInserterItems( destinationRootClientId ),
 			};
 		},
@@ -293,7 +293,15 @@ function InserterMenu(
 				/>
 			) }
 			{ showInserterHelpPanel && hoveredItem && (
-				<InserterPreviewPanel item={ hoveredItem } />
+				<Popover
+					className="block-editor-inserter__preview-container__popover"
+					placement="right-start"
+					offset={ 16 }
+					focusOnMount={ false }
+					animate={ false }
+				>
+					<InserterPreviewPanel item={ hoveredItem } />
+				</Popover>
 			) }
 			{ showPatternPanel && (
 				<PatternCategoryPreviewPanel

package/src/components/inserter/preview-panel.js

@@ -40,13 +40,13 @@ function InserterPreviewPanel( { item } ) {
 							blocks={ blocks }
 							viewportWidth={ example?.viewportWidth ?? 500 }
 							additionalStyles={ [
-								{ css: 'body { padding: 16px; }' },
+								{ css: 'body { padding: 24px; }' },
 							] }
 						/>
 					</div>
 				) : (
 					<div className="block-editor-inserter__preview-content-missing">
-						{ __( 'No Preview Available.' ) }
+						{ __( 'No preview available.' ) }
 					</div>
 				) }
 			</div>

package/src/components/inserter/style.scss

@@ -214,15 +214,14 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__preview-container__popover {
+	top: $grid-unit-20 !important;
+}
+
 .block-editor-inserter__preview-container {
 	display: none;
-	width: 300px;
-	background: $white;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $gray-300;
-	position: absolute;
-	top: $grid-unit-20;
-	left: calc(100% + #{$grid-unit-20});
+	width: $sidebar-width;
+	padding: $grid-unit-20;
 	max-height: calc(100% - #{$grid-unit-40});
 	overflow-y: hidden;
 
@@ -230,12 +229,14 @@ $block-inserter-tabs-height: 44px;
 		display: block;
 	}
 
-	.block-editor-block-card {
-		padding: $grid-unit-20;
+	.block-editor-block-preview__container {
+		height: 100%;
 	}
 
-	.block-editor-block-card__title {
-		font-size: $default-font-size;
+	.block-editor-block-card {
+		padding-left: 0;
+		padding-right: 0;
+		padding-bottom: $grid-unit-05;
 	}
 }
 
@@ -271,15 +272,11 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__block-patterns-tabs-container,
-.block-editor-block-patterns-explorer__sidebar {
+.block-editor-inserter__block-patterns-tabs-container {
 	height: 100%;
 	nav {
 		height: 100%;
 	}
-	.block-editor-block-patterns__source-filter select.components-select-control__input {
-		height: 40px;
-	}
 }
 
 .block-editor-inserter__block-patterns-tabs {
@@ -366,6 +363,7 @@ $block-inserter-tabs-height: 44px;
 	min-height: $grid-unit-60 * 3;
 	color: $gray-700;
 	background: $gray-100;
+	border-radius: $radius-block-ui;
 }
 
 .block-editor-inserter__tips {
@@ -447,7 +445,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height + $grid-unit-20;
+		top: $header-height + $grid-unit-15;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;

package/src/components/inserter-button/README.md

@@ -0,0 +1,62 @@
+# InserterButton
+
+InserterButton is a type of button component.
+
+## Usage
+
+```jsx
+function render() {
+	return (
+		<View>
+			<Text>Some rendered content here</Text>
+			<InserterButton
+				item={ { title: 'Short Text', icon: <SVG></SVG> } }
+				onSelect={ function ( item ) {
+					console.log( 'selected' );
+				} }
+			/>
+		</View>
+	);
+}
+```
+
+_Note:_
+
+## Props
+
+### `maxWidth`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The max-width of the button.
+
+### `itemWidth`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The button width.
+
+### `onSelect`
+
+-   **Type:** `Function`
+-   **Required** `true`
+
+The function that is called once the InserterButton has been selected.
+
+### `item`
+
+-   **Type:** `Object`
+-   **Required** `true`
+
+The object that gets selected.
+
+## Examples
+
+<InserterButton
+item={ item }
+itemWidth={ itemWidth }
+maxWidth={ maxWidth }
+onSelect={ onSelect }
+/>

package/src/components/inserter-button/index.native.js

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { View, TouchableHighlight, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { BlockIcon } from '../block-icon';
+import styles from './style.scss';
+import sparkles from './sparkles';
+class MenuItem extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onPress = this.onPress.bind( this );
+	}
+
+	onPress() {
+		const { onSelect, item } = this.props;
+		onSelect( item );
+	}
+
+	render() {
+		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
+			this.props;
+
+		const modalIconWrapperStyle = getStylesFromColorScheme(
+			styles.modalIconWrapper,
+			styles.modalIconWrapperDark
+		);
+		const modalIconStyle = styles.modalIcon;
+		const modalItemLabelStyle = getStylesFromColorScheme(
+			styles.modalItemLabel,
+			styles.modalItemLabelDark
+		);
+
+		const clipboardBlockStyles = getStylesFromColorScheme(
+			styles.clipboardBlock,
+			styles.clipboardBlockDark
+		);
+
+		const isClipboardBlock = item.id === 'clipboard';
+		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
+		const blockIsNew = item.isNew === true;
+		const accessibilityLabelFormat = blockIsNew
+			? // translators: Newly available block name. %s: The localized block name
+			  __( '%s block, newly available' )
+			: // translators: Block name. %s: The localized block name
+			  __( '%s block' );
+		const accessibilityLabel = sprintf(
+			accessibilityLabelFormat,
+			item.title
+		);
+
+		return (
+			<TouchableHighlight
+				style={ [
+					styles.touchableArea,
+					item.isDisabled ? styles.disabled : null,
+				] }
+				underlayColor="transparent"
+				activeOpacity={ 0.5 }
+				accessibilityRole="button"
+				accessibilityLabel={ accessibilityLabel }
+				onPress={ this.onPress }
+				disabled={ item.isDisabled }
+			>
+				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
+					<View
+						style={ [
+							modalIconWrapperStyle,
+							itemWidth && {
+								width: itemWidth,
+							},
+							isClipboardBlock && clipboardBlockStyles,
+						] }
+					>
+						{ blockIsNew && (
+							<Icon
+								icon={ sparkles }
+								style={ styles.newIndicator }
+							/>
+						) }
+						<View style={ modalIconStyle }>
+							<BlockIcon
+								icon={ item.icon }
+								size={ modalIconStyle.width }
+							/>
+						</View>
+					</View>
+					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
+						{ blockTitle }
+					</Text>
+				</View>
+			</TouchableHighlight>
+		);
+	}
+}
+
+const InserterButton = withPreferredColorScheme( MenuItem );
+
+InserterButton.Styles = {
+	modalItem: styles.modalItem,
+	modalIconWrapper: styles.modalIconWrapper,
+};
+
+export default InserterButton;

package/src/components/inserter-button/sparkles.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+const sparkles = (
+	<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M10 11c-1.588-.479-4-.91-4-.91s2-.241 4-.454c1.8-.191 3.365-.502 4-3.181C14.635 3.775 15 1 15 1s.365 2.775 1 5.455c.635 2.679 2 2.969 4 3.181 2 .213 4 .455 4 .455s-2.412.43-4 .909c-1.588.479-3 1-4 4.546-.746 2.643-.893 4.948-1 5.454-.107-.506-.167-2.5-1-5.454C13 12 11.588 11.479 10 11zM7.333 3.5C6.803 3.333 6 3.182 6 3.182s.667-.085 1.333-.16c.6-.066 1.122-.175 1.334-1.113C8.878.971 9 0 9 0s.122.971.333 1.91c.212.937.667 1.038 1.334 1.113.666.074 1.333.159 1.333.159s-.804.15-1.333.318c-.53.167-1 .35-1.334 1.59C9.085 6.017 9.036 6.824 9 7c-.036-.177-.056-.875-.333-1.91-.334-1.24-.804-1.423-1.334-1.59zM2.444 18C1.474 17.713 0 17.454 0 17.454s1.222-.145 2.444-.272c1.1-.115 2.057-.302 2.445-1.91C5.277 13.666 5.5 12 5.5 12s.223 1.665.611 3.273c.388 1.607 1.222 1.781 2.445 1.909 1.222.127 2.444.273 2.444.273s-1.474.258-2.444.545c-.971.287-1.834.6-2.445 2.727-.456 1.586-.546 2.97-.611 3.273-.065-.304-.102-1.5-.611-3.273C4.278 18.6 3.415 18.287 2.444 18z"
+			fill="#F0C930"
+		/>
+	</SVG>
+);
+
+export default sparkles;

package/src/components/inserter-button/style.native.scss

@@ -0,0 +1,72 @@
+/** @format */
+.touchableArea {
+	border-radius: 8px 8px 8px 8px;
+}
+
+.disabled {
+	opacity: 0.3;
+}
+
+.modalIconWrapper {
+	width: 104px;
+	height: 64px;
+	background-color: $gray-light; //#f3f6f8
+	border-radius: 8px 8px 8px 8px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalIconWrapperDark {
+	background-color: rgba($white, 0.07);
+}
+
+.newIndicator {
+	height: 22;
+	left: 6;
+	position: absolute;
+	top: 6;
+	width: 22;
+}
+
+.modalIcon {
+	width: 32px;
+	height: 32px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalItemLabel {
+	background-color: transparent;
+	padding-left: 2;
+	padding-right: 2;
+	padding-top: 4;
+	padding-bottom: 0;
+	justify-content: center;
+	text-align: center;
+	font-size: 12;
+	color: $gray-dark;
+}
+
+.modalItemLabelDark {
+	color: $white;
+}
+
+.clipboardBlock {
+	background-color: transparent;
+	border-width: 1px;
+	border-color: $light-gray-400;
+}
+
+.clipboardBlockDark {
+	border-color: $gray-70;
+}
+
+.modalItem {
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	padding-left: $grid-unit-20 * 0.5;
+	padding-right: $grid-unit-20 * 0.5;
+	padding-top: 0;
+	padding-bottom: 0;
+}