@wordpress/block-library 7.19.0 → 8.1.0

package/src/buttons/test/edit.native.js

@@ -3,7 +3,6 @@
  */
 import {
 	fireEvent,
-	waitFor,
 	getEditorHtml,
 	within,
 	getBlock,
@@ -50,20 +49,20 @@ describe( 'Buttons block', () => {
 			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
-			const { getByLabelText } = await initializeEditor( {
+			const editor = await initializeEditor( {
 				initialHtml,
 			} );
 
-			const buttonsBlock = await waitFor( () =>
-				getByLabelText( /Buttons Block\. Row 1/ )
+			const [ buttonsBlock ] = await editor.findAllByLabelText(
+				/Buttons Block\. Row 1/
 			);
 			fireEvent.press( buttonsBlock );
 
 			// onLayout event has to be explicitly dispatched in BlockList component,
 			// otherwise the inner blocks are not rendered.
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -72,22 +71,22 @@ describe( 'Buttons block', () => {
 				},
 			} );
 
-			const buttonInnerBlock = await waitFor( () =>
-				within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ )
-			);
+			const [ buttonInnerBlock ] = await within(
+				buttonsBlock
+			).findAllByLabelText( /Button Block\. Row 1/ );
 			fireEvent.press( buttonInnerBlock );
 
-			const settingsButton = await waitFor( () =>
-				getByLabelText( 'Open Settings' )
+			const settingsButton = await editor.findByLabelText(
+				'Open Settings'
 			);
 			fireEvent.press( settingsButton );
 
-			const radiusStepper = await waitFor( () =>
-				getByLabelText( /Border Radius/ )
+			const radiusStepper = await editor.findByLabelText(
+				/Border Radius/
 			);
 
-			const incrementButton = await waitFor( () =>
-				within( radiusStepper ).getByTestId( 'Increment' )
+			const incrementButton = await within( radiusStepper ).findByTestId(
+				'Increment'
 			);
 			fireEvent( incrementButton, 'onPressIn' );
 
@@ -98,15 +97,14 @@ describe( 'Buttons block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const { getByLabelText } = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -125,14 +123,14 @@ describe( 'Buttons block', () => {
 			fireEvent.press( appenderButton );
 
 			// Check for new button
-			const secondButtonBlock = await waitFor( () =>
-				within( buttonsBlock ).getByLabelText( /Button Block\. Row 2/ )
-			);
+			const [ secondButtonBlock ] = await within(
+				buttonsBlock
+			).findAllByLabelText( /Button Block\. Row 2/ );
 			expect( secondButtonBlock ).toBeVisible();
 
 			// Add a Paragraph block using the empty placeholder at the bottom
-			const paragraphPlaceholder = await waitFor( () =>
-				getByLabelText( 'Add paragraph block' )
+			const paragraphPlaceholder = await screen.findByLabelText(
+				'Add paragraph block'
 			);
 			fireEvent.press( paragraphPlaceholder );
 
@@ -148,21 +146,15 @@ describe( 'Buttons block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const {
-				getByLabelText,
-				getByTestId,
-				queryAllByLabelText,
-				getByText,
-			} = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 			fireEvent.press( buttonsBlock );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -176,9 +168,9 @@ describe( 'Buttons block', () => {
 			fireEvent.press( buttonBlock );
 
 			// Open the block inserter
-			fireEvent.press( getByLabelText( 'Add block' ) );
+			fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-			const blockList = getByTestId( 'InserterUI-Blocks' );
+			const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 			// onScroll event used to force the FlatList to render all items
 			fireEvent.scroll( blockList, {
 				nativeEvent: {
@@ -190,11 +182,11 @@ describe( 'Buttons block', () => {
 
 			// Check the Add block here placeholder is not visible
 			const addBlockHerePlaceholders =
-				queryAllByLabelText( 'ADD BLOCK HERE' );
+				screen.queryAllByLabelText( 'ADD BLOCK HERE' );
 			expect( addBlockHerePlaceholders.length ).toBe( 0 );
 
 			// Add a new Button block
-			fireEvent.press( await waitFor( () => getByText( 'Button' ) ) );
+			fireEvent.press( await screen.findByText( 'Button' ) );
 
 			// Get new button
 			const secondButtonBlock = await getBlock( screen, 'Button', {
@@ -214,15 +206,14 @@ describe( 'Buttons block', () => {
 				const screen = await initializeEditor( {
 					initialHtml: BUTTONS_HTML,
 				} );
-				const { getByLabelText } = screen;
 
 				// Get block
 				const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 				// Trigger inner blocks layout
-				const innerBlockListWrapper = await waitFor( () =>
-					within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-				);
+				const innerBlockListWrapper = await within(
+					buttonsBlock
+				).findByTestId( 'block-list-wrapper' );
 				fireEvent( innerBlockListWrapper, 'layout', {
 					nativeEvent: {
 						layout: {
@@ -236,13 +227,13 @@ describe( 'Buttons block', () => {
 				fireEvent.press( buttonBlock );
 
 				// Open block actions menu
-				const blockActionsButton = getByLabelText(
+				const blockActionsButton = screen.getByLabelText(
 					/Open Block Actions Menu/
 				);
 				fireEvent.press( blockActionsButton );
 
 				// Delete block
-				const deleteButton = getByLabelText( /Remove block/ );
+				const deleteButton = screen.getByLabelText( /Remove block/ );
 				fireEvent.press( deleteButton );
 
 				expect( getEditorHtml() ).toMatchSnapshot();
@@ -260,22 +251,20 @@ describe( 'Buttons block', () => {
 				const initialHtml = `<!-- wp:buttons -->
 				<div class="wp-block-buttons"><!-- wp:button /--></div>
 				<!-- /wp:buttons -->`;
-				const { getByLabelText, getByText } = await initializeEditor( {
-					initialHtml,
-				} );
+				const screen = await initializeEditor( { initialHtml } );
 
-				const block = await waitFor( () =>
-					getByLabelText( /Buttons Block\. Row 1/ )
+				const [ block ] = await screen.findAllByLabelText(
+					/Buttons Block\. Row 1/
 				);
 				fireEvent.press( block );
 
 				fireEvent.press(
-					getByLabelText( 'Change items justification' )
+					screen.getByLabelText( 'Change items justification' )
 				);
 
 				// Select alignment option.
 				fireEvent.press(
-					await waitFor( () => getByText( justificationOption ) )
+					await screen.findByText( justificationOption )
 				);
 
 				expect( getEditorHtml() ).toMatchSnapshot();

package/src/categories/edit.js

@@ -63,7 +63,7 @@ export default function CategoriesEdit( {
 		const parentId = showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
 		return categoriesList.map( ( category ) =>
-			renderCategoryListItem( category, 0 )
+			renderCategoryListItem( category )
 		);
 	};
 

package/src/code/transforms.js

@@ -43,7 +43,9 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			transform: ( { content } ) => {
-				return createBlock( 'core/paragraph', { content } );
+				return createBlock( 'core/paragraph', {
+					content: content.replace( /\n/g, '<br>' ),
+				} );
 			},
 		},
 	],

package/src/columns/edit.js

@@ -95,6 +95,7 @@ function ColumnsEditContainer( {
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Columns' ) }
 						value={ count }
 						onChange={ ( value ) => updateColumns( count, value ) }

package/src/columns/edit.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -332,11 +332,6 @@ const ColumnsEditContainerWrapper = withDispatch(
 				width: value,
 			} );
 		},
-		updateBlockSettings( settings ) {
-			const { clientId } = ownProps;
-			const { updateBlockListSettings } = dispatch( blockEditorStore );
-			updateBlockListSettings( clientId, settings );
-		},
 		/**
 		 * Updates the column columnCount, including necessary revisions to child Column
 		 * blocks to grant required or redistribute available space.
@@ -450,7 +445,7 @@ const ColumnsEdit = ( props ) => {
 	const {
 		columnCount,
 		isDefaultColumns,
-		innerWidths = [],
+		innerBlocks,
 		hasParents,
 		parentBlockAlignment,
 		editorSidebarOpened,
@@ -463,24 +458,20 @@ const ColumnsEdit = ( props ) => {
 				getBlockAttributes,
 			} = select( blockEditorStore );
 			const { isEditorSidebarOpened } = select( 'core/edit-post' );
-			const innerBlocks = getBlocks( clientId );
 
-			const isContentEmpty = map(
-				innerBlocks,
-				( innerBlock ) => innerBlock.innerBlocks.length
+			const innerBlocksList = getBlocks( clientId );
+
+			const isContentEmpty = innerBlocksList.every(
+				( innerBlock ) => innerBlock.innerBlocks.length === 0
 			);
 
-			const innerColumnsWidths = innerBlocks.map( ( inn ) => ( {
-				clientId: inn.clientId,
-				attributes: { width: inn.attributes.width },
-			} ) );
 			const parents = getBlockParents( clientId, true );
 
 			return {
 				columnCount: getBlockCount( clientId ),
-				isDefaultColumns: ! isContentEmpty.filter( Boolean ).length,
-				innerWidths: innerColumnsWidths,
-				hasParents: !! parents.length,
+				isDefaultColumns: isContentEmpty,
+				innerBlocks: innerBlocksList,
+				hasParents: parents.length > 0,
 				parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
 				editorSidebarOpened: isSelected && isEditorSidebarOpened(),
 			};
@@ -488,13 +479,14 @@ const ColumnsEdit = ( props ) => {
 		[ clientId, isSelected ]
 	);
 
-	const memoizedInnerWidths = useMemo( () => {
-		return innerWidths;
-	}, [
-		// The JSON.stringify is used because innerWidth is always a new reference.
-		// The innerBlocks is a new reference after each attribute change of any nested block.
-		JSON.stringify( innerWidths ),
-	] );
+	const innerWidths = useMemo(
+		() =>
+			innerBlocks.map( ( inn ) => ( {
+				clientId: inn.clientId,
+				attributes: { width: inn.attributes.width },
+			} ) ),
+		[ innerBlocks ]
+	);
 
 	const [ isVisible, setIsVisible ] = useState( false );
 
@@ -514,7 +506,7 @@ const ColumnsEdit = ( props ) => {
 		<View style={ style }>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
-				innerWidths={ memoizedInnerWidths }
+				innerWidths={ innerWidths }
 				hasParents={ hasParents }
 				parentBlockAlignment={ parentBlockAlignment }
 				editorSidebarOpened={ editorSidebarOpened }

package/src/comment-author-avatar/edit.js

@@ -50,6 +50,7 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Avatar Settings' ) }>
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Image size' ) }
 					onChange={ ( newWidth ) =>
 						setAttributes( {

package/src/comments/index.php

@@ -202,7 +202,6 @@ function register_legacy_post_comments_block() {
 			'wp-block-buttons',
 			'wp-block-button',
 		),
-		'editorStyle'       => 'wp-block-post-comments-editor',
 		'render_callback'   => 'render_block_core_comments',
 		'skip_inner_blocks' => true,
 	);

package/src/cover/edit/inspector-controls.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Fragment, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	Button,
 	ExternalLink,
@@ -146,7 +146,7 @@ export default function CoverInspectorControls( {
 				{ !! url && (
 					<PanelBody title={ __( 'Media settings' ) }>
 						{ isImageBackground && (
-							<Fragment>
+							<>
 								<ToggleControl
 									label={ __( 'Fixed background' ) }
 									checked={ hasParallax }
@@ -158,10 +158,11 @@ export default function CoverInspectorControls( {
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }
 								/>
-							</Fragment>
+							</>
 						) }
 						{ showFocalPointPicker && (
 							<FocalPointPicker
+								__nextHasNoMarginBottom
 								label={ __( 'Focal point picker' ) }
 								url={ url }
 								value={ focalPoint }
@@ -179,6 +180,7 @@ export default function CoverInspectorControls( {
 							isImageBackground &&
 							isImgElement && (
 								<TextareaControl
+									__nextHasNoMarginBottom
 									label={ __(
 										'Alt text (alternative text)'
 									) }
@@ -225,7 +227,6 @@ export default function CoverInspectorControls( {
 			</InspectorControls>
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown
-					__experimentalHasMultipleOrigins
 					__experimentalIsRenderedInSidebar
 					settings={ [
 						{
@@ -265,6 +266,7 @@ export default function CoverInspectorControls( {
 					panelId={ clientId }
 				>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Overlay opacity' ) }
 						value={ dimRatio }
 						onChange={ ( newDimRation ) =>

package/src/cover/edit.native.js

@@ -58,6 +58,7 @@ import {
 } from '@wordpress/element';
 import { cover as icon, replace, image, warning } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
+// eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
@@ -87,6 +88,36 @@ const INNER_BLOCKS_TEMPLATE = [
 	],
 ];
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
 const Cover = ( {
 	attributes,
 	getStylesFromColorScheme,
@@ -117,29 +148,11 @@ const Cover = ( {
 		overlayColor,
 		isDark,
 	} = attributes;
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	useEffect( () => {
-		let isCurrent = true;
-
 		// Sync with local media store.
 		mediaUploadSync();
-		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			setIsScreenReaderEnabled
-		);
-
-		AccessibilityInfo.isScreenReaderEnabled().then( () => {
-			if ( isCurrent ) {
-				setIsScreenReaderEnabled();
-			}
-		} );
-
-		return () => {
-			isCurrent = false;
-			a11yInfoChangeSubscription.remove();
-		};
 	}, [] );
 
 	const convertedMinHeight = useConvertUnitToMobile(