@wordpress/block-library 8.14.0 → 8.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.14.0",
+	"version": "8.15.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.37.0",
-		"@wordpress/api-fetch": "^6.34.0",
-		"@wordpress/autop": "^3.37.0",
-		"@wordpress/blob": "^3.37.0",
-		"@wordpress/block-editor": "^12.5.0",
-		"@wordpress/blocks": "^12.14.0",
-		"@wordpress/components": "^25.3.0",
-		"@wordpress/compose": "^6.14.0",
-		"@wordpress/core-data": "^6.14.0",
-		"@wordpress/data": "^9.7.0",
-		"@wordpress/date": "^4.37.0",
-		"@wordpress/deprecated": "^3.37.0",
-		"@wordpress/dom": "^3.37.0",
-		"@wordpress/element": "^5.14.0",
-		"@wordpress/escape-html": "^2.37.0",
-		"@wordpress/hooks": "^3.37.0",
-		"@wordpress/html-entities": "^3.37.0",
-		"@wordpress/i18n": "^4.37.0",
-		"@wordpress/icons": "^9.28.0",
-		"@wordpress/interactivity": "^1.1.0",
-		"@wordpress/keycodes": "^3.37.0",
-		"@wordpress/notices": "^4.5.0",
-		"@wordpress/primitives": "^3.35.0",
-		"@wordpress/private-apis": "^0.19.0",
-		"@wordpress/reusable-blocks": "^4.14.0",
-		"@wordpress/rich-text": "^6.14.0",
-		"@wordpress/server-side-render": "^4.14.0",
-		"@wordpress/url": "^3.38.0",
-		"@wordpress/viewport": "^5.14.0",
-		"@wordpress/wordcount": "^3.37.0",
+		"@wordpress/a11y": "^3.38.0",
+		"@wordpress/api-fetch": "^6.35.0",
+		"@wordpress/autop": "^3.38.0",
+		"@wordpress/blob": "^3.38.0",
+		"@wordpress/block-editor": "^12.6.0",
+		"@wordpress/blocks": "^12.15.0",
+		"@wordpress/components": "^25.4.0",
+		"@wordpress/compose": "^6.15.0",
+		"@wordpress/core-data": "^6.15.0",
+		"@wordpress/data": "^9.8.0",
+		"@wordpress/date": "^4.38.0",
+		"@wordpress/deprecated": "^3.38.0",
+		"@wordpress/dom": "^3.38.0",
+		"@wordpress/element": "^5.15.0",
+		"@wordpress/escape-html": "^2.38.0",
+		"@wordpress/hooks": "^3.38.0",
+		"@wordpress/html-entities": "^3.38.0",
+		"@wordpress/i18n": "^4.38.0",
+		"@wordpress/icons": "^9.29.0",
+		"@wordpress/interactivity": "^1.2.0",
+		"@wordpress/keycodes": "^3.38.0",
+		"@wordpress/notices": "^4.6.0",
+		"@wordpress/primitives": "^3.36.0",
+		"@wordpress/private-apis": "^0.20.0",
+		"@wordpress/reusable-blocks": "^4.15.0",
+		"@wordpress/rich-text": "^6.15.0",
+		"@wordpress/server-side-render": "^4.15.0",
+		"@wordpress/url": "^3.39.0",
+		"@wordpress/viewport": "^5.15.0",
+		"@wordpress/wordcount": "^3.38.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -68,6 +68,7 @@
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
+		"micromodal": "^0.4.10",
 		"remove-accents": "^0.4.2",
 		"uuid": "^8.3.0"
 	},
@@ -78,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bcd13d59b22553b3c9dc5869077bff1e864cf9f5"
+	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
 }

package/src/audio/test/__snapshots__/edit.native.js.snap

@@ -159,6 +159,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -358,6 +359,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -393,22 +395,13 @@ exports[`Audio block renders placeholder without crashing 1`] = `
     }
   >
     <View
-      accessibilityHint="Double tap to select an audio file"
-      accessibilityLabel="Audio block. Empty"
-      accessibilityRole="button"
-      accessible={true}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
       style={
         [
           [
-            undefined,
+            [
+              undefined,
+              undefined,
+            ],
             undefined,
             undefined,
           ],
@@ -416,33 +409,65 @@ exports[`Audio block renders placeholder without crashing 1`] = `
         ]
       }
     >
+      <View>
+        <View
+          style={
+            {
+              "fill": "black",
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <Svg
+              fill="black"
+              height={24}
+              style={{}}
+              viewBox="0 0 24 24"
+              width={24}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              Path
+            </Svg>
+          </View>
+        </View>
+        <Text>
+          Audio
+        </Text>
+      </View>
       <View
+        accessibilityHint="Double tap to select an audio file"
+        accessibilityLabel="Audio block. Empty"
+        accessibilityRole="button"
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 22,
+            "left": 22,
+            "right": 22,
+            "top": 22,
+          }
+        }
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           {
-            "fill": "gray",
+            "opacity": 1,
           }
         }
       >
-        <View
-          style={{}}
-        >
-          <Svg
-            height={24}
-            style={{}}
-            viewBox="0 0 24 24"
-            width={24}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            Path
-          </Svg>
-        </View>
+        <Text>
+          Add audio
+        </Text>
       </View>
-      <Text>
-        Audio
-      </Text>
-      <Text>
-        ADD AUDIO
-      </Text>
     </View>
   </View>
 </View>

package/src/avatar/edit.js

@@ -36,6 +36,7 @@ const AvatarInspectorControls = ( {
 		<PanelBody title={ __( 'Settings' ) }>
 			<RangeControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'Image size' ) }
 				onChange={ ( newSize ) =>
 					setAttributes( {

package/src/block/block.json

@@ -4,7 +4,8 @@
 	"name": "core/block",
 	"title": "Pattern",
 	"category": "reusable",
-	"description": "Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.",
+	"description": "Create and save content to reuse across your site. Update the pattern, and the changes apply everywhere it’s used.",
+	"keywords": [ "reusable" ],
 	"textdomain": "default",
 	"attributes": {
 		"ref": {

package/src/block/editor.native.scss

@@ -19,8 +19,8 @@
 	background-color: $light-gray-400;
 	height: 1px;
 	position: absolute;
-	left: -$block-selected-to-content + $block-selected-border-width;
-	right: -$block-selected-to-content + $block-selected-border-width;
+	left: -$grid-unit-05;
+	right: -$grid-unit-05;
 	bottom: 16;
 }
 

package/src/buttons/edit.js

@@ -51,8 +51,8 @@ function ButtonsEdit( { attributes, className } ) {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		template: [
 			[
 				buttonBlockName,

package/src/column/edit.native.js

@@ -42,7 +42,6 @@ function ColumnEdit( {
 	hasChildren,
 	isSelected,
 	getStylesFromColorScheme,
-	isParentSelected,
 	contentStyle,
 	columns,
 	selectedColumnIndex,
@@ -140,12 +139,10 @@ function ColumnEdit( {
 		return (
 			<View
 				style={ [
-					! isParentSelected &&
-						getStylesFromColorScheme(
-							styles.columnPlaceholder,
-							styles.columnPlaceholderDark
-						),
-					styles.columnPlaceholderNotSelected,
+					getStylesFromColorScheme(
+						styles.columnPlaceholder,
+						styles.columnPlaceholderDark
+					),
 					contentStyle[ clientId ],
 				] }
 			/>
@@ -258,8 +255,6 @@ export default compose( [
 
 		const parentId = getBlockRootClientId( clientId );
 		const hasChildren = !! getBlockCount( clientId );
-		const isParentSelected =
-			selectedBlockClientId && selectedBlockClientId === parentId;
 
 		const blockOrder = getBlockOrder( parentId );
 
@@ -271,7 +266,6 @@ export default compose( [
 
 		return {
 			hasChildren,
-			isParentSelected,
 			isSelected,
 			selectedColumnIndex,
 			columns,

package/src/column/editor.native.scss

@@ -1,7 +1,3 @@
-.columnPlaceholderNotSelected {
-	padding-top: $block-selected-to-content;
-}
-
 .columnPlaceholder {
 	flex: 1;
 	padding: $block-selected-to-content;

package/src/columns/edit.js

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

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

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

package/src/comment-template/index.php

@@ -35,8 +35,11 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 		 * We set commentId context through the `render_block_context` filter so
 		 * that dynamically inserted blocks (at `render_block` filter stage)
 		 * will also receive that context.
+		 *
+		 * Use an early priority to so that other 'render_block_context' filters
+		 * have access to the values.
 		 */
-		add_filter( 'render_block_context', $filter_block_context );
+		add_filter( 'render_block_context', $filter_block_context, 1 );
 
 		/*
 		 * We construct a new WP_Block instance from the parsed block so that
@@ -44,7 +47,7 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 		 */
 		$block_content = ( new WP_Block( $block->parsed_block ) )->render( array( 'dynamic' => false ) );
 
-		remove_filter( 'render_block_context', $filter_block_context );
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
 
 		$children = $comment->get_children();
 

package/src/cover/deprecated.js

@@ -329,6 +329,7 @@ const v11 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
@@ -465,6 +466,7 @@ const v10 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.

package/src/embed/embed-placeholder.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,8 @@ import { useRef } from '@wordpress/element';
 import styles from './styles.scss';
 import { noticeOutline } from '../../../components/src/mobile/gridicons';
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+
 const EmbedPlaceholder = ( {
 	icon,
 	isSelected,
@@ -28,10 +30,17 @@ const EmbedPlaceholder = ( {
 	tryAgain,
 	openEmbedLinkSettings,
 } ) => {
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles.embed__container,
-		styles[ 'embed__container--dark' ]
+	const containerSelectedStyle = usePreferredColorSchemeStyle(
+		styles[ 'embed__container-selected' ],
+		styles[ 'embed__container-selected--dark' ]
 	);
+	const containerStyle = [
+		usePreferredColorSchemeStyle(
+			styles.embed__container,
+			styles[ 'embed__container--dark' ]
+		),
+		isSelected && containerSelectedStyle,
+	];
 	const labelStyle = usePreferredColorSchemeStyle(
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
@@ -44,6 +53,15 @@ const EmbedPlaceholder = ( {
 	);
 	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
 
+	const buttonStyles = usePreferredColorSchemeStyle(
+		styles.embed__button,
+		styles[ 'embed__button--dark' ]
+	);
+	const iconStyles = usePreferredColorSchemeStyle(
+		styles.embed__icon,
+		styles[ 'embed__icon--dark' ]
+	);
+
 	const cannotEmbedMenuPickerRef = useRef();
 
 	const errorPickerOptions = {
@@ -89,55 +107,70 @@ const EmbedPlaceholder = ( {
 
 	return (
 		<>
-			<TouchableWithoutFeedback
-				accessibilityRole={ 'button' }
-				accessibilityHint={
-					cannotEmbed
-						? __( 'Double tap to view embed options.' )
-						: __( 'Double tap to add a link.' )
-				}
-				onPress={ resolveOnPressEvent }
-				disabled={ ! isSelected }
-			>
-				<View style={ containerStyle }>
-					{ cannotEmbed ? (
-						<>
-							<Icon
-								icon={ noticeOutline }
-								fill={ embedIconErrorStyle.fill }
-								style={ embedIconErrorStyle }
-							/>
-							<Text
-								style={ [
-									descriptionStyle,
-									descriptionErrorStyle,
-								] }
-							>
-								{ __( 'Unable to embed media' ) }
-							</Text>
+			<View style={ containerStyle }>
+				{ cannotEmbed ? (
+					<>
+						<Icon
+							icon={ noticeOutline }
+							fill={ embedIconErrorStyle.fill }
+							style={ embedIconErrorStyle }
+						/>
+						<Text
+							style={ [
+								descriptionStyle,
+								descriptionErrorStyle,
+							] }
+						>
+							{ __( 'Unable to embed media' ) }
+						</Text>
+						<TouchableOpacity
+							activeOpacity={ 0.5 }
+							accessibilityRole={ 'button' }
+							accessibilityHint={ __(
+								'Double tap to view embed options.'
+							) }
+							style={ buttonStyles }
+							hitSlop={ hitSlop }
+							onPress={ resolveOnPressEvent }
+							disabled={ ! isSelected }
+						>
 							<Text style={ actionStyle }>
 								{ __( 'More options' ) }
 							</Text>
-							<Picker
-								title={ __( 'Embed options' ) }
-								ref={ cannotEmbedMenuPickerRef }
-								options={ options }
-								onChange={ onPickerSelect }
-								hideCancelButton
-								leftAlign
-							/>
-						</>
-					) : (
-						<>
-							<BlockIcon icon={ icon } />
+						</TouchableOpacity>
+						<Picker
+							title={ __( 'Embed options' ) }
+							ref={ cannotEmbedMenuPickerRef }
+							options={ options }
+							onChange={ onPickerSelect }
+							hideCancelButton
+							leftAlign
+						/>
+					</>
+				) : (
+					<>
+						<View style={ styles[ 'embed__placeholder-header' ] }>
+							<BlockIcon icon={ icon } fill={ iconStyles.fill } />
 							<Text style={ labelStyle }>{ label }</Text>
+						</View>
+						<TouchableOpacity
+							activeOpacity={ 0.5 }
+							accessibilityRole={ 'button' }
+							accessibilityHint={ __(
+								'Double tap to add a link.'
+							) }
+							style={ buttonStyles }
+							hitSlop={ hitSlop }
+							onPress={ resolveOnPressEvent }
+							disabled={ ! isSelected }
+						>
 							<Text style={ actionStyle }>
-								{ __( 'ADD LINK' ) }
+								{ __( 'Add link' ) }
 							</Text>
-						</>
-					) }
-				</View>
-			</TouchableWithoutFeedback>
+						</TouchableOpacity>
+					</>
+				) }
+			</View>
 		</>
 	);
 };

package/src/embed/styles.native.scss

@@ -4,19 +4,28 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: $gray-lighten-30;
+	background-color: #e0e0e0; // $light-dim
 	padding-left: 12;
 	padding-right: 12;
 	padding-top: 12;
 	padding-bottom: 12;
-	border-top-left-radius: 4;
-	border-top-right-radius: 4;
-	border-bottom-left-radius: 4;
-	border-bottom-right-radius: 4;
+	border-top-left-radius: 2;
+	border-top-right-radius: 2;
+	border-bottom-left-radius: 2;
+	border-bottom-right-radius: 2;
 }
 
 .embed__container--dark {
-	background-color: $background-dark-secondary;
+	background-color: #1f1f1f; // $dark-dim
+}
+
+.embed__container-selected {
+	border-width: 2px;
+	border-color: $blue-40;
+}
+
+.embed__container-selected--dark {
+	border-color: $blue-50;
 }
 
 .embed__icon--error {
@@ -24,23 +33,38 @@
 	fill: $alert-red;
 }
 
+.embed__placeholder-header {
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4;
+	margin-bottom: 16;
+}
+
+.embed__icon {
+	fill: $light-secondary;
+}
+
+.embed__icon--dark {
+	fill: $dark-tertiary;
+}
+
 .embed__label {
 	text-align: center;
-	margin-top: 4;
-	margin-bottom: 4;
-	font-size: 14;
-	font-weight: 500;
-	color: $gray-90;
+	margin-left: $grid-unit;
+	font-size: 16;
+	font-weight: 400;
+	color: $light-secondary;
 }
 
 .embed__label--dark {
-	color: $gray-10;
+	color: $dark-tertiary;
 }
 
 .embed__description {
 	font-size: $default-font-size;
 	text-align: center;
-	margin-bottom: 4;
+	margin-top: 4;
+	margin-bottom: 16;
 	color: $light-secondary;
 }
 
@@ -53,12 +77,14 @@
 }
 
 .embed__action {
-	width: 100%;
 	text-align: center;
-	color: $blue-wordpress;
-	font-size: 14;
-	font-weight: 500;
-	margin-top: 4;
+	color: $white;
+	font-size: 16;
+	font-weight: 400;
+}
+
+.embed__action--dark {
+	color: $black;
 }
 
 .embed-preview__loading {
@@ -158,3 +184,13 @@
 .embed-no-preview__sheet-button--dark {
 	color: $blue-30;
 }
+
+.embed__button {
+	background-color: $light-primary;
+	border-radius: 3px;
+	padding: $grid-unit $grid-unit-20;
+}
+
+.embed__button--dark {
+	background-color: $dark-primary;
+}