Update all blocks to API v2

packages/block-library/src/archives/block.json

@@ -1,4 +1,5 @@
 {
+	"apiVersion": 2,
 	"name": "core/archives",
 	"category": "widgets",
 	"attributes": {

packages/block-library/src/archives/edit.js

@@ -3,7 +3,7 @@
  */
 import { PanelBody, ToggleControl, Disabled } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 
 export default function ArchivesEdit( { attributes, setAttributes } ) {
@@ -33,12 +33,14 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<Disabled>
-				<ServerSideRender
-					block="core/archives"
-					attributes={ attributes }
-				/>
-			</Disabled>
+			<div { ...useBlockProps() }>
+				<Disabled>
+					<ServerSideRender
+						block="core/archives"
+						attributes={ attributes }
+					/>
+				</Disabled>
+			</div>
 		</>
 	);
 }

packages/block-library/src/calendar/block.json

@@ -1,4 +1,5 @@
 {
+	"apiVersion": 2,
 	"name": "core/calendar",
 	"category": "widgets",
 	"attributes": {

packages/block-library/src/calendar/edit.js

@@ -10,6 +10,7 @@ import memoize from 'memize';
 import { Disabled } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import ServerSideRender from '@wordpress/server-side-render';
+import { useBlockProps } from '@wordpress/block-editor';
 
 const getYearMonth = memoize( ( date ) => {
 	if ( ! date ) {
@@ -36,11 +37,13 @@ export default function CalendarEdit( { attributes } ) {
 	}, [] );
 
 	return (
-		<Disabled>
-			<ServerSideRender
-				block="core/calendar"
-				attributes={ { ...attributes, ...getYearMonth( date ) } }
-			/>
-		</Disabled>
+		<div { ...useBlockProps() }>
+			<Disabled>
+				<ServerSideRender
+					block="core/calendar"
+					attributes={ { ...attributes, ...getYearMonth( date ) } }
+				/>
+			</Disabled>
+		</div>
 	);
 }

packages/block-library/src/classic/block.json

@@ -1,4 +1,5 @@
 {
+	"apiVersion": 2,
 	"name": "core/freeform",
 	"category": "text",
 	"attributes": {

packages/block-library/src/classic/edit.js

@@ -6,7 +6,7 @@ import { debounce } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { BlockControls } from '@wordpress/block-editor';
+import { BlockControls, useBlockProps } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -220,19 +220,21 @@ export default function ClassicEdit( {
 					<ConvertToBlocksButton clientId={ clientId } />
 				</ToolbarGroup>
 			</BlockControls>
-			<div
-				key="toolbar"
-				id={ `toolbar-${ clientId }` }
-				className="block-library-classic__toolbar"
-				onClick={ focus }
-				data-placeholder={ __( 'Classic' ) }
-				onKeyDown={ onToolbarKeyDown }
-			/>
-			<div
-				key="editor"
-				id={ `editor-${ clientId }` }
-				className="wp-block-freeform block-library-rich-text__tinymce"
-			/>
+			<div { ...useBlockProps() }>
+				<div
+					key="toolbar"
+					id={ `toolbar-${ clientId }` }
+					className="block-library-classic__toolbar"
+					onClick={ focus }
+					data-placeholder={ __( 'Classic' ) }
+					onKeyDown={ onToolbarKeyDown }
+				/>
+				<div
+					key="editor"
+					id={ `editor-${ clientId }` }
+					className="wp-block-freeform block-library-rich-text__tinymce"
+				/>
+			</div>
 		</>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions */

packages/block-library/src/embed/block.json

@@ -1,4 +1,5 @@
 {
+	"apiVersion": 2,
 	"name": "core/embed",
 	"category": "embed",
 	"attributes": {

packages/block-library/src/embed/edit.js

@@ -25,6 +25,7 @@ import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useBlockProps } from '@wordpress/block-editor';
 
 function getResponsiveHelp( checked ) {
 	return checked
@@ -173,8 +174,14 @@ const EmbedEdit = ( props ) => {
 		}
 	}, [ preview, isEditingURL ] );
 
+	const blockProps = useBlockProps();
+
 	if ( fetching ) {
-		return <EmbedLoading />;
+		return (
+			<div { ...blockProps }>
+				<EmbedLoading />
+			</div>
+		);
 	}
 
 	// translators: %s: type of embed e.g: "YouTube", "Twitter", etc. "Embed" is used when no specific type exists
@@ -184,25 +191,29 @@ const EmbedEdit = ( props ) => {
 	const showEmbedPlaceholder = ! preview || cannotEmbed || isEditingURL;
 	if ( showEmbedPlaceholder ) {
 		return (
-			<EmbedPlaceholder
-				icon={ icon }
-				label={ label }
-				onSubmit={ ( event ) => {
-					if ( event ) {
-						event.preventDefault();
-					}
+			<div { ...blockProps }>
+				<EmbedPlaceholder
+					icon={ icon }
+					label={ label }
+					onSubmit={ ( event ) => {
+						if ( event ) {
+							event.preventDefault();
+						}
 
-					setIsEditingURL( false );
-					setAttributes( { url } );
-				} }
-				value={ url }
-				cannotEmbed={ cannotEmbed }
-				onChange={ ( event ) => setURL( event.target.value ) }
-				fallback={ () => fallback( url, onReplace ) }
-				tryAgain={ () => {
-					invalidateResolution( 'core', 'getEmbedPreview', [ url ] );
-				} }
-			/>
+						setIsEditingURL( false );
+						setAttributes( { url } );
+					} }
+					value={ url }
+					cannotEmbed={ cannotEmbed }
+					onChange={ ( event ) => setURL( event.target.value ) }
+					fallback={ () => fallback( url, onReplace ) }
+					tryAgain={ () => {
+						invalidateResolution( 'core', 'getEmbedPreview', [
+							url,
+						] );
+					} }
+				/>
+			</div>
 		);
 	}
 
@@ -232,21 +243,23 @@ const EmbedEdit = ( props ) => {
 				toggleResponsive={ toggleResponsive }
 				switchBackToURLInput={ () => setIsEditingURL( true ) }
 			/>
-			<EmbedPreview
-				preview={ preview }
-				previewable={ previewable }
-				className={ className }
-				url={ url }
-				type={ type }
-				caption={ caption }
-				onCaptionChange={ ( value ) =>
-					setAttributes( { caption: value } )
-				}
-				isSelected={ isSelected }
-				icon={ icon }
-				label={ label }
-				insertBlocksAfter={ insertBlocksAfter }
-			/>
+			<div { ...blockProps }>
+				<EmbedPreview
+					preview={ preview }
+					previewable={ previewable }
+					className={ className }
+					url={ url }
+					type={ type }
+					caption={ caption }
+					onCaptionChange={ ( value ) =>
+						setAttributes( { caption: value } )
+					}
+					isSelected={ isSelected }
+					icon={ icon }
+					label={ label }
+					insertBlocksAfter={ insertBlocksAfter }
+				/>
+			</div>
 		</>
 	);
 };

packages/block-library/src/embed/save.js

@@ -6,7 +6,7 @@ import classnames from 'classnames/dedupe';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { url, caption, type, providerNameSlug } = attributes;
@@ -15,14 +15,14 @@ export default function save( { attributes } ) {
 		return null;
 	}
 
-	const embedClassName = classnames( 'wp-block-embed', {
+	const className = classnames( 'wp-block-embed', {
 		[ `is-type-${ type }` ]: type,
 		[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 		[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
 	} );
 
 	return (
-		<figure className={ embedClassName }>
+		<figure { ...useBlockProps.save( { className } ) }>
 			<div className="wp-block-embed__wrapper">
 				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
 			</div>

packages/block-library/src/embed/test/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { render } from 'enzyme';
-
 /**
  * WordPress dependencies
  */
@@ -16,7 +11,6 @@ import {
 /**
  * Internal dependencies
  */
-import EmbedEdit from '../edit';
 import {
 	findMoreSuitableBlock,
 	getClassNames,
@@ -32,12 +26,6 @@ const { name: DEFAULT_EMBED_BLOCK, attributes } = metadata;
 
 jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {} ) );
 
-describe( 'core/embed', () => {
-	test( 'block edit matches snapshot', () => {
-		const wrapper = render( <EmbedEdit attributes={ {} } /> );
-		expect( wrapper ).toMatchSnapshot();
-	} );
-} );
 describe( 'utils', () => {
 	beforeAll( () => {
 		registerBlockType( DEFAULT_EMBED_BLOCK, {

packages/block-library/src/missing/block.json

@@ -1,4 +1,5 @@
 {
+	"apiVersion": 2,
 	"name": "core/missing",
 	"category": "text",
 	"attributes": {