@wordpress/block-editor 11.4.0 → 11.5.0

package/src/components/global-styles/hooks.js

@@ -55,7 +55,7 @@ const VALID_SETTINGS = [
 	'spacing.margin',
 	'spacing.padding',
 	'spacing.units',
-	'typography.fuild',
+	'typography.fluid',
 	'typography.customFontSize',
 	'typography.dropCap',
 	'typography.fontFamilies',
@@ -204,62 +204,105 @@ export function useGlobalStyle(
 	return [ result, setStyle ];
 }
 
-export function useSupportedStyles( name, element ) {
-	const { supportedPanels } = useSelect(
+/**
+ * React hook that overrides a global settings object with block and element specific settings.
+ *
+ * @param {Object}     parentSettings Settings object.
+ * @param {blockName?} blockName      Block name.
+ * @param {element?}   element        Element name.
+ *
+ * @return {Object} Merge of settings and supports.
+ */
+export function useSettingsForBlockElement(
+	parentSettings,
+	blockName,
+	element
+) {
+	const { supportedStyles, supports } = useSelect(
 		( select ) => {
 			return {
-				supportedPanels: unlock(
+				supportedStyles: unlock(
 					select( blocksStore )
-				).getSupportedStyles( name, element ),
+				).getSupportedStyles( blockName, element ),
+				supports:
+					select( blocksStore ).getBlockType( blockName )?.supports,
 			};
 		},
-		[ name, element ]
+		[ blockName, element ]
 	);
 
-	return supportedPanels;
-}
-
-/**
- * Given a settings object and a list of supported panels,
- * returns a new settings object with the unsupported panels removed.
- *
- * @param {Object}   settings Settings object.
- * @param {string[]} supports Supported style panels.
- *
- * @return {Object} Merge of settings and supports.
- */
-export function overrideSettingsWithSupports( settings, supports ) {
-	const updatedSettings = { ...settings };
+	return useMemo( () => {
+		const updatedSettings = { ...parentSettings };
 
-	if ( ! supports.includes( 'fontSize' ) ) {
-		updatedSettings.typography = {
-			...updatedSettings.typography,
-			fontSizes: {},
-			customFontSize: false,
-		};
-	}
-
-	if ( ! supports.includes( 'fontFamily' ) ) {
-		updatedSettings.typography = {
-			...updatedSettings.typography,
-			fontFamilies: {},
-		};
-	}
+		if ( ! supportedStyles.includes( 'fontSize' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				fontSizes: {},
+				customFontSize: false,
+			};
+		}
 
-	[
-		'lineHeight',
-		'fontStyle',
-		'fontWeight',
-		'letterSpacing',
-		'textTransform',
-	].forEach( ( key ) => {
-		if ( ! supports.includes( key ) ) {
+		if ( ! supportedStyles.includes( 'fontFamily' ) ) {
 			updatedSettings.typography = {
 				...updatedSettings.typography,
-				[ key ]: false,
+				fontFamilies: {},
+			};
+		}
+
+		[
+			'lineHeight',
+			'fontStyle',
+			'fontWeight',
+			'letterSpacing',
+			'textTransform',
+			'textDecoration',
+		].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.typography = {
+					...updatedSettings.typography,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		[ 'contentSize', 'wideSize' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.layout = {
+					...updatedSettings.layout,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		[ 'padding', 'margin', 'blockGap' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.spacing = {
+					...updatedSettings.spacing,
+					[ key ]: false,
+				};
+			}
+
+			const sides = Array.isArray( supports?.spacing?.[ key ] )
+				? supports?.spacing?.[ key ]
+				: supports?.spacing?.[ key ]?.sides;
+			if ( sides?.length ) {
+				updatedSettings.spacing = {
+					...updatedSettings.spacing,
+					[ key ]: {
+						...updatedSettings.spacing?.[ key ],
+						sides,
+					},
+				};
+			}
+		} );
+
+		if ( ! supportedStyles.includes( 'minHeight' ) ) {
+			updatedSettings.dimensions = {
+				...updatedSettings.dimensions,
+				minHeight: false,
 			};
 		}
-	} );
 
-	return updatedSettings;
+		return updatedSettings;
+	}, [ parentSettings, supportedStyles, supports ] );
 }

package/src/components/global-styles/index.js

@@ -2,7 +2,7 @@ export {
 	useGlobalStylesReset,
 	useGlobalSetting,
 	useGlobalStyle,
-	overrideSettingsWithSupports,
+	useSettingsForBlockElement,
 } from './hooks';
 export { useGlobalStylesOutput } from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
@@ -10,3 +10,7 @@ export {
 	default as TypographyPanel,
 	useHasTypographyPanel,
 } from './typography-panel';
+export {
+	default as DimensionsPanel,
+	useHasDimensionsPanel,
+} from './dimensions-panel';

package/src/components/global-styles/typography-panel.js

@@ -7,6 +7,7 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -92,8 +93,27 @@ function useHasTextDecorationControl( settings ) {
 	return settings?.typography?.textDecoration;
 }
 
-function TypographyToolsPanel( { ...props } ) {
-	return <ToolsPanel label={ __( 'Typography' ) } { ...props } />;
+function TypographyToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Typography' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
 }
 
 const DEFAULT_CONTROLS = {
@@ -260,15 +280,20 @@ export default function TypographyPanel( {
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;
 	const resetTextDecoration = () => setTextDecoration( undefined );
 
-	const resetAll = () => {
-		onChange( {
-			...value,
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
 			typography: {},
-		} );
-	};
+		};
+	}, [] );
 
 	return (
-		<Wrapper resetAll={ resetAll }>
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
 			{ hasFontFamilyEnabled && (
 				<ToolsPanelItem
 					label={ __( 'Font family' ) }

package/src/components/global-styles/use-global-styles-output.js

@@ -790,9 +790,10 @@ export const toStyles = (
 				if ( duotoneDeclarations.length > 0 ) {
 					ruleset =
 						ruleset +
-						`${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
+						`${ scopeSelector(
+							selector,
+							duotoneSelector
+						) }{${ duotoneDeclarations.join( ';' ) };}`;
 				}
 			}
 

package/src/components/global-styles/utils.js

@@ -57,6 +57,7 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'color', 'duotone' ],
+		valueKey: 'colors',
 		cssVarInfix: 'duotone',
 		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
 		classes: [],
@@ -95,6 +96,7 @@ export const PRESET_METADATA = [
 export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
+	'filter.duotone': 'duotone',
 	'elements.link.color.text': 'color',
 	'elements.link.:hover.color.text': 'color',
 	'elements.link.typography.fontFamily': 'font-family',

package/src/components/index.native.js

@@ -74,6 +74,11 @@ export {
 } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
 
+export {
+	getSpacingPresetCssVar,
+	getCustomValueFromPreset,
+	isValueSpacingPreset,
+} from './spacing-sizes-control/utils';
 // Content Related Components.
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';

package/src/components/inner-blocks/test/__snapshots__/index.js.snap

@@ -9,7 +9,7 @@ exports[`InnerBlocks should force serialize for invalid block with inner blocks
 `;
 
 exports[`InnerBlocks should return element as string, with inner blocks 1`] = `
-"<div>Bananas<!-- wp:fruit {\\"fruit\\":\\"Apples\\"} -->
+"<div>Bananas<!-- wp:fruit {"fruit":"Apples"} -->
 <div>Apples</div>
 <!-- /wp:fruit --></div>"
 `;

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

@@ -98,13 +98,6 @@ function useInserterMediaCategories() {
 			) {
 				return false;
 			}
-			// When a category has set `isExternalResource` to `true`, we
-			// don't need to check for allowed mime types, as they are used
-			// for restricting uploads for this media type and not for
-			// inserting media from external sources.
-			if ( category.isExternalResource ) {
-				return true;
-			}
 			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
 				mimeType.startsWith( `${ category.mediaType }/` )
 			);
@@ -156,7 +149,15 @@ export function useMediaCategories( rootClientId ) {
 						if ( category.isExternalResource ) {
 							return [ category.name, true ];
 						}
-						const results = await category.fetch( { per_page: 1 } );
+						let results = [];
+						try {
+							results = await category.fetch( {
+								per_page: 1,
+							} );
+						} catch ( e ) {
+							// If the request fails, we shallow the error and just don't show
+							// the category, in order to not break the media tab.
+						}
 						return [ category.name, !! results.length ];
 					} )
 				)

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

@@ -1,129 +1,16 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
-	Tooltip,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useCallback, useState } from '@wordpress/element';
-import { cloneBlock } from '@wordpress/blocks';
-import { moreVertical, external } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import InserterDraggableBlocks from '../../inserter-draggable-blocks';
-import { getBlockAndPreviewFromMedia } from './utils';
-
-const MAXIMUM_TITLE_LENGTH = 25;
-const MEDIA_OPTIONS_POPOVER_PROPS = {
-	position: 'bottom left',
-	className:
-		'block-editor-inserter__media-list__item-preview-options__popover',
-};
-
-function MediaPreviewOptions( { category, media } ) {
-	if ( ! category.getReportUrl ) {
-		return null;
-	}
-	const reportUrl = category.getReportUrl( media );
-	return (
-		<DropdownMenu
-			className="block-editor-inserter__media-list__item-preview-options"
-			label={ __( 'Options' ) }
-			popoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }
-			icon={ moreVertical }
-		>
-			{ () => (
-				<MenuGroup>
-					<MenuItem
-						onClick={ () =>
-							window.open( reportUrl, '_blank' ).focus()
-						}
-						icon={ external }
-					>
-						{ sprintf(
-							/* translators: %s: The media type to report e.g: "image", "video", "audio" */
-							__( 'Report %s' ),
-							category.mediaType
-						) }
-					</MenuItem>
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}
-
-function MediaPreview( { media, onClick, composite, category } ) {
-	const [ isHovered, setIsHovered ] = useState( false );
-	const [ block, preview ] = useMemo(
-		() => getBlockAndPreviewFromMedia( media, category.mediaType ),
-		[ media, category.mediaType ]
-	);
-	const title = media.title?.rendered || media.title;
-	let truncatedTitle;
-	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
-		const omission = '...';
-		truncatedTitle =
-			title.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;
-	}
-	const onMouseEnter = useCallback( () => setIsHovered( true ), [] );
-	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
-	return (
-		<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
-			{ ( { draggable, onDragStart, onDragEnd } ) => (
-				<div
-					className={ classnames(
-						'block-editor-inserter__media-list__list-item',
-						{
-							'is-hovered': isHovered,
-						}
-					) }
-					draggable={ draggable }
-					onDragStart={ onDragStart }
-					onDragEnd={ onDragEnd }
-				>
-					<Tooltip text={ truncatedTitle || title }>
-						{ /* Adding `is-hovered` class to the wrapper element is needed
-							because the options Popover is rendered outside of this node. */ }
-						<div
-							onMouseEnter={ onMouseEnter }
-							onMouseLeave={ onMouseLeave }
-						>
-							<CompositeItem
-								role="option"
-								as="div"
-								{ ...composite }
-								className="block-editor-inserter__media-list__item"
-								onClick={ () => onClick( block ) }
-								aria-label={ title }
-							>
-								<div className="block-editor-inserter__media-list__item-preview">
-									{ preview }
-								</div>
-							</CompositeItem>
-							<MediaPreviewOptions
-								category={ category }
-								media={ media }
-							/>
-						</div>
-					</Tooltip>
-				</div>
-			) }
-		</InserterDraggableBlocks>
-	);
-}
+import { MediaPreview } from './media-preview';
 
 function MediaList( {
 	mediaList,
@@ -132,12 +19,6 @@ function MediaList( {
 	label = __( 'Media List' ),
 } ) {
 	const composite = useCompositeState();
-	const onPreviewClick = useCallback(
-		( block ) => {
-			onClick( cloneBlock( block ) );
-		},
-		[ onClick ]
-	);
 	return (
 		<Composite
 			{ ...composite }
@@ -150,7 +31,7 @@ function MediaList( {
 					key={ media.id || media.sourceId || index }
 					media={ media }
 					category={ category }
-					onClick={ onPreviewClick }
+					onClick={ onClick }
 					composite={ composite }
 				/>
 			) ) }