Add more

WordPress · Jun 9, 2020 · da056be · da056be
1 parent c307d41
commit da056be
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 35 deletions.
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -22,7 +22,7 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	__experimentalBlock as Block,
+	__experimentalUseBlockProps as useBlockProps,
 	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
@@ -171,7 +171,7 @@ function ButtonEdit( props ) {
 	return (
 		<>
 			<ColorEdit { ...props } />
-			<Block.div>
+			<div { ...useBlockProps() }>
 				<RichText
 					placeholder={ placeholder || __( 'Add text…' ) }
 					value={ text }
@@ -201,7 +201,7 @@ function ButtonEdit( props ) {
 					onMerge={ mergeBlocks }
 					identifier="text"
 				/>
-			</Block.div>
+			</div>
 			<URLPicker
 				url={ url }
 				setAttributes={ setAttributes }

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -4,7 +4,7 @@
 import {
 	__experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
 	InnerBlocks,
-	__experimentalBlock as Block,
+	__experimentalUseBlockProps as useBlockProps,
 } from '@wordpress/block-editor';
 
 /**
@@ -22,15 +22,15 @@ const alignmentHooksSetting = {
 
 function ButtonsEdit() {
 	return (
-		<Block.div>
+		<div { ...useBlockProps() }>
 			<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
 				<InnerBlocks
 					allowedBlocks={ ALLOWED_BLOCKS }
 					template={ BUTTONS_TEMPLATE }
 					__experimentalMoverDirection="horizontal"
 				/>
 			</AlignmentHookSettingsProvider>
-		</Block.div>
+		</div>
 	);
 }
 

diff --git a/packages/block-library/src/code/edit.js b/packages/block-library/src/code/edit.js
@@ -8,12 +8,12 @@ import { __ } from '@wordpress/i18n';
  */
 import {
 	PlainText,
-	__experimentalBlock as Block,
+	__experimentalUseBlockProps as useBlockProps,
 } from '@wordpress/block-editor';
 
 export default function CodeEdit( { attributes, setAttributes } ) {
 	return (
-		<Block.pre>
+		<pre { ...useBlockProps() }>
 			<PlainText
 				__experimentalVersion={ 2 }
 				tagName="code"
@@ -22,6 +22,6 @@ export default function CodeEdit( { attributes, setAttributes } ) {
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
 			/>
-		</Block.pre>
+		</pre>
 	);
 }
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -28,7 +28,7 @@ import {
 	InspectorControls,
 	RichText,
 	__experimentalLinkControl as LinkControl,
-	__experimentalBlock as Block,
+	__experimentalUseBlockProps as useBlockProps,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
@@ -198,21 +198,23 @@ function NavigationLinkEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<Block.li
-				className={ classnames( {
-					'is-editing': isSelected || isParentOfSelectedBlock,
-					'is-selected': isSelected,
-					'has-link': !! url,
-					'has-child': hasDescendants,
-					'has-text-color': rgbTextColor,
-					[ `has-${ textColor }-color` ]: !! textColor,
-					'has-background': rgbBackgroundColor,
-					[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
+			<li
+				{ ...useBlockProps( {
+					className: classnames( {
+						'is-editing': isSelected || isParentOfSelectedBlock,
+						'is-selected': isSelected,
+						'has-link': !! url,
+						'has-child': hasDescendants,
+						'has-text-color': rgbTextColor,
+						[ `has-${ textColor }-color` ]: !! textColor,
+						'has-background': rgbBackgroundColor,
+						[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
+					} ),
+					style: {
+						color: rgbTextColor,
+						backgroundColor: rgbBackgroundColor,
+					},
 				} ) }
-				style={ {
-					color: rgbTextColor,
-					backgroundColor: rgbBackgroundColor,
-				} }
 			>
 				<div className="wp-block-navigation-link__content">
 					<RichText
@@ -317,7 +319,7 @@ function NavigationLinkEdit( {
 						),
 					} }
 				/>
-			</Block.li>
+			</li>
 		</Fragment>
 	);
 }

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -15,7 +15,7 @@ import {
 	FontSizePicker,
 	withFontSizes,
 	__experimentalUseColors,
-	__experimentalBlock as Block,
+	__experimentalUseBlockProps as useBlockProps,
 } from '@wordpress/block-editor';
 
 import { createBlock } from '@wordpress/blocks';
@@ -67,6 +67,7 @@ function Navigation( {
 	//
 
 	const ref = useRef();
+	const blockProps = useBlockProps( { ref } );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 	const { TextColor, BackgroundColor, ColorPanel } = __experimentalUseColors(
 		[
@@ -151,7 +152,7 @@ function Navigation( {
 	// then show the Placeholder
 	if ( ! hasExistingNavItems ) {
 		return (
-			<Block.div>
+			<div { ...blockProps }>
 				<Placeholder
 					className="wp-block-navigation-placeholder"
 					icon={ icon }
@@ -182,7 +183,7 @@ function Navigation( {
 						</Button>
 					</div>
 				</Placeholder>
-			</Block.div>
+			</div>
 		);
 	}
 
@@ -266,9 +267,13 @@ function Navigation( {
 			</InspectorControls>
 			<TextColor>
 				<BackgroundColor>
-					<Block.nav
-						className={ blockClassNames }
-						style={ blockInlineStyles }
+					<nav
+						{ ...blockProps }
+						className={ classnames(
+							blockProps.className,
+							blockClassNames
+						) }
+						style={ { ...blockProps.style, ...blockInlineStyles } }
 					>
 						{ ! hasExistingNavItems && isRequestingPages && (
 							<>
@@ -300,7 +305,7 @@ function Navigation( {
 							// inherit templateLock={ 'all' }.
 							templateLock={ false }
 						/>
-					</Block.nav>
+					</nav>
 				</BackgroundColor>
 			</TextColor>
 		</Fragment>

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -10,7 +10,7 @@ import {
 	InspectorControls,
 	URLPopover,
 	URLInput,
-	__experimentalBlock as Block,
+	__experimentalUseBlockProps as useBlockProps,
 } from '@wordpress/block-editor';
 import { Fragment, useState } from '@wordpress/element';
 import {
@@ -62,7 +62,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
-			<Block.li className={ classes }>
+			<li { ...useBlockProps( { className: classes } ) }>
 				<Button onClick={ () => setPopover( true ) }>
 					<IconComponent />
 					{ isSelected && showURLPopover && (
@@ -93,7 +93,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 						</URLPopover>
 					) }
 				</Button>
-			</Block.li>
+			</li>
 		</Fragment>
 	);
 };