@wordpress/block-editor 12.8.0 → 12.8.1

package/build-style/style-rtl.css

@@ -1072,9 +1072,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 
 .block-editor-block-styles__preview-panel {
   display: none;
-  position: absolute;
-  left: 16px;
-  right: auto;
   z-index: 90;
 }
 @media (min-width: 782px) {

package/build-style/style.css

@@ -1072,9 +1072,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 
 .block-editor-block-styles__preview-panel {
   display: none;
-  position: absolute;
-  right: 16px;
-  left: auto;
   z-index: 90;
 }
 @media (min-width: 782px) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.8.0",
+	"version": "12.8.1",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.40.0",
-		"@wordpress/api-fetch": "^6.37.0",
-		"@wordpress/blob": "^3.40.0",
-		"@wordpress/blocks": "^12.17.0",
-		"@wordpress/commands": "^0.11.0",
-		"@wordpress/components": "^25.6.0",
-		"@wordpress/compose": "^6.17.0",
-		"@wordpress/data": "^9.10.0",
-		"@wordpress/date": "^4.40.0",
-		"@wordpress/deprecated": "^3.40.0",
-		"@wordpress/dom": "^3.40.0",
-		"@wordpress/element": "^5.17.0",
-		"@wordpress/escape-html": "^2.40.0",
-		"@wordpress/hooks": "^3.40.0",
-		"@wordpress/html-entities": "^3.40.0",
-		"@wordpress/i18n": "^4.40.0",
-		"@wordpress/icons": "^9.31.0",
-		"@wordpress/is-shallow-equal": "^4.40.0",
-		"@wordpress/keyboard-shortcuts": "^4.17.0",
-		"@wordpress/keycodes": "^3.40.0",
-		"@wordpress/notices": "^4.8.0",
-		"@wordpress/preferences": "^3.17.0",
-		"@wordpress/private-apis": "^0.22.0",
-		"@wordpress/rich-text": "^6.17.0",
-		"@wordpress/shortcode": "^3.40.0",
-		"@wordpress/style-engine": "^1.23.0",
-		"@wordpress/token-list": "^2.40.0",
-		"@wordpress/url": "^3.41.0",
-		"@wordpress/warning": "^2.40.0",
-		"@wordpress/wordcount": "^3.40.0",
+		"@wordpress/a11y": "^3.40.1",
+		"@wordpress/api-fetch": "^6.37.1",
+		"@wordpress/blob": "^3.40.1",
+		"@wordpress/blocks": "^12.17.1",
+		"@wordpress/commands": "^0.11.1",
+		"@wordpress/components": "^25.6.1",
+		"@wordpress/compose": "^6.17.1",
+		"@wordpress/data": "^9.10.1",
+		"@wordpress/date": "^4.40.1",
+		"@wordpress/deprecated": "^3.40.1",
+		"@wordpress/dom": "^3.40.1",
+		"@wordpress/element": "^5.17.1",
+		"@wordpress/escape-html": "^2.40.1",
+		"@wordpress/hooks": "^3.40.1",
+		"@wordpress/html-entities": "^3.40.1",
+		"@wordpress/i18n": "^4.40.1",
+		"@wordpress/icons": "^9.31.1",
+		"@wordpress/is-shallow-equal": "^4.40.1",
+		"@wordpress/keyboard-shortcuts": "^4.17.1",
+		"@wordpress/keycodes": "^3.40.1",
+		"@wordpress/notices": "^4.8.1",
+		"@wordpress/preferences": "^3.17.1",
+		"@wordpress/private-apis": "^0.22.1",
+		"@wordpress/rich-text": "^6.17.1",
+		"@wordpress/shortcode": "^3.40.1",
+		"@wordpress/style-engine": "^1.23.1",
+		"@wordpress/token-list": "^2.40.1",
+		"@wordpress/url": "^3.41.1",
+		"@wordpress/warning": "^2.40.1",
+		"@wordpress/wordcount": "^3.40.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "78a288d55b83a713b2f7d98d5a855c0771a2afc6"
+	"gitHead": "bb1fbf87bb0f451744530fc6a85de2dff1263bed"
 }

package/src/components/block-icon/test/index.js

@@ -71,8 +71,8 @@ describe( 'BlockIcon', () => {
 		);
 
 		expect( getIconWrapper( container ) ).toHaveStyle( {
-			backgroundColor: 'white',
-			color: 'black',
+			backgroundColor: 'rgb(255, 255, 255)',
+			color: 'rgb(0, 0, 0)',
 		} );
 	} );
 } );

package/src/components/block-list/use-block-props/index.js

@@ -53,6 +53,32 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * also pass any other props through this hook, and they will be merged and
  * returned.
  *
+ * Use of this hook on the outermost element of a block is required if using API >= v2.
+ *
+ * @example
+ * ```js
+ * import { useBlockProps } from '@wordpress/block-editor';
+ *
+ * export default function Edit() {
+ *
+ *   const blockProps = useBlockProps(
+ *     className: 'my-custom-class',
+ *     style: {
+ *       color: '#222222',
+ *       backgroundColor: '#eeeeee'
+ *     }
+ *   )
+ *
+ *   return (
+ *	    <div { ...blockProps }>
+ *
+ *     </div>
+ *   )
+ * }
+ *
+ * ```
+ *
+ *
  * @param {Object}  props                    Optional. Props to pass to the element. Must contain
  *                                           the ref if one is defined.
  * @param {Object}  options                  Options for internal use only.

package/src/components/block-list/use-block-props/use-nav-mode-exit.js

@@ -38,7 +38,7 @@ export function useNavModeExit( clientId ) {
 			node.addEventListener( 'mousedown', onMouseDown );
 
 			return () => {
-				node.addEventListener( 'mousedown', onMouseDown );
+				node.removeEventListener( 'mousedown', onMouseDown );
 			};
 		},
 		[ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]

package/src/components/block-lock/menu-item.js

@@ -31,6 +31,8 @@ export default function BlockLockMenuItem( { clientId } ) {
 			<MenuItem
 				icon={ isLocked ? unlock : lockOutline }
 				onClick={ toggleModal }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
 			>
 				{ label }
 			</MenuItem>

package/src/components/block-lock/toolbar.js

@@ -59,10 +59,12 @@ export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
+					ref={ lockButtonRef }
 					icon={ lock }
 					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
-					ref={ lockButtonRef }
+					aria-expanded={ isModalOpen }
+					aria-haspopup="dialog"
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

package/src/components/block-styles/style.scss

@@ -4,9 +4,6 @@
 
 .block-editor-block-styles__preview-panel {
 	display: none;
-	position: absolute;
-	right: $grid-unit-20;
-	left: auto;
 	// Same layer as the sidebar from which it's triggered.
 	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 

package/src/components/iframe/index.js

@@ -194,6 +194,7 @@ function Iframe( {
 	const html = `<!doctype html>
 <html>
 	<head>
+		<meta charset="utf-8">
 		<script>window.frameElement._load()</script>
 		<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
 		${ styles }

package/src/components/rich-text/use-remove-browser-shortcuts.js

@@ -23,7 +23,7 @@ export function useRemoveBrowserShortcuts() {
 		}
 		node.addEventListener( 'keydown', onKeydown );
 		return () => {
-			node.addEventListener( 'keydown', onKeydown );
+			node.removeEventListener( 'keydown', onKeydown );
 		};
 	}, [] );
 }

package/src/store/selectors.js

@@ -1978,7 +1978,7 @@ export const getInserterItems = createSelector(
 				id,
 				name: 'core/block',
 				initialAttributes: { ref: reusableBlock.id },
-				title: reusableBlock.title.raw,
+				title: reusableBlock.title?.raw,
 				icon,
 				category: 'reusable',
 				keywords: [ 'reusable' ],