@wordpress/block-library 7.19.0 → 8.1.0

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, filter, isEmpty, map, pick } from 'lodash';
+import { get, isEmpty, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -135,12 +135,16 @@ export default function Image( {
 				} = select( blockEditorStore );
 
 				const rootClientId = getBlockRootClientId( clientId );
-				const settings = pick( getSettings(), [
-					'imageEditing',
-					'imageSizes',
-					'maxWidth',
-					'mediaUpload',
-				] );
+				const settings = Object.fromEntries(
+					Object.entries( getSettings() ).filter( ( [ key ] ) =>
+						[
+							'imageEditing',
+							'imageSizes',
+							'maxWidth',
+							'mediaUpload',
+						].includes( key )
+					)
+				);
 
 				return {
 					...settings,
@@ -169,7 +173,7 @@ export default function Image( {
 		! isContentLocked &&
 		! ( isWideAligned && isLargeViewport );
 	const imageSizeOptions = map(
-		filter( imageSizes, ( { slug } ) =>
+		imageSizes.filter( ( { slug } ) =>
 			get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
 		),
 		( { name, slug } ) => ( { value: slug, label: name } )
@@ -409,6 +413,7 @@ export default function Image( {
 				<PanelBody title={ __( 'Settings' ) }>
 					{ ! multiImageSelection && (
 						<TextareaControl
+							__nextHasNoMarginBottom
 							label={ __( 'Alt text (alternative text)' ) }
 							value={ alt }
 							onChange={ updateAlt }
@@ -607,6 +612,7 @@ export default function Image( {
 						height: parseInt( currentHeight + delta.height, 10 ),
 					} );
 				} }
+				resizeRatio={ align === 'center' ? 2 : 1 }
 			>
 				{ img }
 			</ResizableBox>

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

@@ -81,7 +81,8 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -107,7 +108,8 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -133,7 +135,8 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -169,7 +172,8 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -177,7 +181,7 @@ describe( 'Image Block', () => {
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
-		await waitFor( () => screen.getByText( 'Custom URL' ) );
+		await screen.findByText( 'Custom URL' );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );
@@ -186,8 +190,7 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByLabelText( 'Apply' ) );
-		await waitFor( () => screen.getByText( 'Custom URL' ) );
-		fireEvent.press( screen.getByText( 'Custom URL' ) );
+		fireEvent.press( await screen.findByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );
 		fireEvent.press( screen.getByText( 'Media File' ) );
@@ -211,7 +214,8 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -235,7 +239,7 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		const imageBlock = screen.getByLabelText( /Image Block/ );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
 
 		const settingsButton = screen.getByLabelText( 'Open Settings' );
@@ -266,7 +270,7 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		const imageBlock = screen.getByLabelText( /Image Block/ );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
 
 		const settingsButton = screen.getByLabelText( 'Open Settings' );

package/src/index.js

@@ -67,6 +67,7 @@ import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
 import * as pageList from './page-list';
+import * as pageListItem from './page-list-item';
 import * as paragraph from './paragraph';
 import * as postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
@@ -155,6 +156,7 @@ const getAllBlocks = () =>
 		more,
 		nextpage,
 		pageList,
+		pageListItem,
 		pattern,
 		preformatted,
 		pullquote,

package/src/latest-comments/edit.js

@@ -56,6 +56,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Number of comments' ) }
 						value={ commentsToShow }
 						onChange={ ( value ) =>

package/src/latest-posts/edit.js

@@ -234,6 +234,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ displayPostContent &&
 					displayPostContentRadio === 'excerpt' && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Max number of words in excerpt' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -355,6 +356,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 				{ postLayout === 'grid' && (
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>

package/src/latest-posts/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Latest Posts block inserts block 1`] = `"<!-- wp:latest-posts /-->"`;

package/src/latest-posts/test/edit.native.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import apiFetch from '@wordpress/api-fetch';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Latest Posts block', () => {
+	afterEach( () => {
+		apiFetch.mockReset();
+	} );
+
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Mock return value for categories
+		apiFetch.mockReturnValueOnce( Promise.resolve( [] ) );
+
+		// Add block
+		await addBlock( screen, 'Latest Posts' );
+
+		// Get block
+		const latestPostsBlock = await getBlock( screen, 'Latest Posts' );
+		expect( latestPostsBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

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

@@ -63,16 +63,18 @@ describe( 'List block', () => {
 		<li></li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = getByLabelText( /List item Block\. Row 1/ );
+		const [ listItemBlock ] = screen.getAllByLabelText(
+			/List item Block\. Row 1/
+		);
 		fireEvent.press( listItemBlock );
 
 		const listItemField =
@@ -109,25 +111,25 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByLabelText(
+		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select second level list
-		const secondNestedLevelBlock = within(
+		const [ secondNestedLevelBlock ] = within(
 			firstNestedLevelBlock
-		).getByLabelText( /List Block\. Row 1/ );
+		).getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( secondNestedLevelBlock );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -143,20 +145,22 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select Secont List Item block
-		const listItemBlock = getByLabelText( /List item Block\. Row 2/ );
+		const [ listItemBlock ] = screen.getAllByLabelText(
+			/List item Block\. Row 2/
+		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const indentButton = getByLabelText( 'Indent' );
+		const indentButton = screen.getByLabelText( 'Indent' );
 		fireEvent.press( indentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -173,33 +177,33 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByLabelText(
+		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select Inner block List
-		const innerBlockList = within( firstNestedLevelBlock ).getByLabelText(
-			/List Block\. Row 1/
-		);
+		const [ innerBlockList ] = within(
+			firstNestedLevelBlock
+		).getAllByLabelText( /List Block\. Row 1/ );
 
 		// Select nested List Item block
-		const listItemBlock = within( innerBlockList ).getByLabelText(
+		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const outdentButton = getByLabelText( 'Outdent' );
+		const outdentButton = screen.getByLabelText( 'Outdent' );
 		fireEvent.press( outdentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -218,16 +222,16 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -246,27 +250,29 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const reverseButton = getByLabelText( /Reverse list numbering\. Off/ );
+		const reverseButton = screen.getByLabelText(
+			/Reverse list numbering\. Off/
+		);
 		fireEvent.press( reverseButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -285,27 +291,27 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const startValueButton = getByLabelText( /Start value\. Empty/ );
+		const startValueButton = screen.getByLabelText( /Start value\. Empty/ );
 		fireEvent.press( startValueButton );
 		const startValueInput =
 			within( startValueButton ).getByDisplayValue( '' );
@@ -328,11 +334,11 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByLabelText(
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -361,7 +367,7 @@ describe( 'List block', () => {
 		` );
 	} );
 
-	it( 'unwraps list items when attempting to merge with non-list block', async () => {
+	it( 'unwraps first item when attempting to merge with non-list block', async () => {
 		const initialHtml = `<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
@@ -376,11 +382,11 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByLabelText(
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -400,14 +406,16 @@ describe( 'List block', () => {
 		"<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
-
+		
 		<!-- wp:paragraph -->
 		<p>One</p>
 		<!-- /wp:paragraph -->
-
-		<!-- wp:paragraph -->
-		<p>Two</p>
-		<!-- /wp:paragraph -->"
+		
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
 	` );
 	} );
 } );

package/src/list/transforms.js

@@ -114,17 +114,6 @@ const transforms = {
 				);
 			},
 		} ) ),
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( _attributes, childBlocks ) => {
-				return getListContentFlat( childBlocks ).map( ( content ) =>
-					createBlock( 'core/paragraph', {
-						content,
-					} )
-				);
-			},
-		},
 	],
 };
 

package/src/list/utils.js

@@ -56,7 +56,8 @@ export function createListBlockFromDOMElement( listElement ) {
 }
 
 export function migrateToListV2( attributes ) {
-	const { values, start, reversed, ordered, type } = attributes;
+	const { values, start, reversed, ordered, type, ...otherAttributes } =
+		attributes;
 
 	const list = document.createElement( ordered ? 'ol' : 'ul' );
 	list.innerHTML = values;
@@ -72,5 +73,8 @@ export function migrateToListV2( attributes ) {
 
 	const [ listBlock ] = rawHandler( { HTML: list.outerHTML } );
 
-	return [ listBlock.attributes, listBlock.innerBlocks ];
+	return [
+		{ ...otherAttributes, ...listBlock.attributes },
+		listBlock.innerBlocks,
+	];
 }

package/src/list-item/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -25,6 +26,7 @@ export const settings = {
 			content: attributes.content + attributesToMerge.content,
 		};
 	},
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/list-item/transforms.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/paragraph', attributes ),
+		},
+	],
+};
+
+export default transforms;

package/src/list-item/utils.js

@@ -8,6 +8,7 @@ import { createBlock, switchToBlockType } from '@wordpress/blocks';
  */
 import { name as listItemName } from './block.json';
 import { name as listName } from '../list/block.json';
+import { name as paragraphName } from '../paragraph/block.json';
 
 export function createListItem( listItemAttributes, listAttributes, children ) {
 	return createBlock(
@@ -19,6 +20,14 @@ export function createListItem( listItemAttributes, listAttributes, children ) {
 	);
 }
 
+function convertBlockToList( block ) {
+	const list = switchToBlockType( block, listName );
+	if ( list ) return list;
+	const paragraph = switchToBlockType( block, paragraphName );
+	if ( paragraph ) return switchToBlockType( paragraph, listName );
+	return null;
+}
+
 export function convertToListItems( blocks ) {
 	const listItems = [];
 
@@ -27,7 +36,7 @@ export function convertToListItems( blocks ) {
 			listItems.push( block );
 		} else if ( block.name === listName ) {
 			listItems.push( ...block.innerBlocks );
-		} else if ( ( block = switchToBlockType( block, listName ) ) ) {
+		} else if ( ( block = convertBlockToList( block ) ) ) {
 			for ( const { innerBlocks } of block ) {
 				listItems.push( ...innerBlocks );
 			}

package/src/media-text/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map, filter } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -199,7 +199,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( {
 			mediaWidth: applyWidthConstraints( width ),
 		} );
-		setTemporaryMediaWidth( applyWidthConstraints( width ) );
+		setTemporaryMediaWidth( null );
 	};
 
 	const classNames = classnames( {
@@ -226,7 +226,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	};
 
 	const imageSizeOptions = map(
-		filter( imageSizes, ( { slug } ) =>
+		imageSizes.filter( ( { slug } ) =>
 			getImageSourceUrlBySizeSlug( image, slug )
 		),
 		( { name, slug } ) => ( { value: slug, label: name } )
@@ -268,6 +268,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ imageFill && mediaUrl && mediaType === 'image' && (
 				<FocalPointPicker
+					__nextHasNoMarginBottom
 					label={ __( 'Focal point picker' ) }
 					url={ mediaUrl }
 					value={ focalPoint }
@@ -280,6 +281,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ mediaType === 'image' && (
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Alt text (alternative text)' ) }
 					value={ mediaAlt }
 					onChange={ onMediaAltChange }
@@ -306,6 +308,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ mediaUrl && (
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Media width' ) }
 					value={ temporaryMediaWidth || mediaWidth }
 					onChange={ commitWidthChange }