@wordpress/block-editor 8.3.1 → 8.4.0

package/build-style/style-rtl.css

@@ -737,6 +737,69 @@
   display: none;
 }
 
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group {
+  padding-right: 6px;
+  padding-left: 6px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button {
+  min-width: 36px;
+  padding-right: 6px;
+  padding-left: 6px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button svg,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button svg,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button svg,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button svg,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button svg,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button svg,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button svg,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button svg {
+  min-width: 24px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button::before,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button::before,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button::before,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button::before,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button::before,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button::before,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button::before,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button::before {
+  right: 2px;
+  left: 2px;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-left: auto;
@@ -753,6 +816,66 @@
   transform: scale(0);
 }
 
+.block-editor-block-lock-modal {
+  z-index: 1000001;
+}
+@media (min-width: 600px) {
+  .block-editor-block-lock-modal .components-modal__frame {
+    max-width: 480px;
+  }
+}
+
+.block-editor-block-lock-modal__checklist {
+  margin: 0;
+}
+
+.block-editor-block-lock-modal__options-title {
+  border-bottom: 1px solid #ddd;
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__options-title .components-checkbox-control__label {
+  font-weight: 600;
+}
+.block-editor-block-lock-modal__options-title .components-base-control__field {
+  align-items: center;
+  display: flex;
+  margin: 0;
+}
+
+.block-editor-block-lock-modal__checklist-item {
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 0;
+  padding: 12px 12px 12px 0;
+}
+.block-editor-block-lock-modal__checklist-item .components-base-control__field {
+  align-items: center;
+  display: flex;
+  margin: 0;
+}
+.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg {
+  margin-left: 12px;
+  fill: #1e1e1e;
+}
+
+.block-editor-block-lock-modal__actions {
+  margin-top: 24px;
+}
+
+.block-editor-block-lock-toolbar .components-button.has-icon {
+  min-width: 36px !important;
+  padding-right: 0 !important;
+}
+.block-editor-block-lock-toolbar .components-button.has-icon:focus::before {
+  right: 0 !important;
+  left: 12px !important;
+}
+
 .block-editor-block-breadcrumb {
   list-style: none;
   padding: 0;
@@ -1768,6 +1891,10 @@
   margin-bottom: 12px;
 }
 
+.block-editor-color-gradient-control__fieldset {
+  min-width: 0;
+}
+
 .block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
   display: flex;
   gap: 8px;
@@ -1932,6 +2059,33 @@
   cursor: text;
 }
 
+.block-editor-date-format-picker {
+  margin-bottom: 16px;
+}
+
+.block-editor-date-format-picker__default-format-toggle-control__hint {
+  color: #757575;
+  display: block;
+}
+
+.block-editor-date-format-picker__custom-format-select-control.components-base-control {
+  margin-bottom: 0;
+}
+.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
+  width: 100%;
+}
+
+.block-editor-date-format-picker__custom-format-select-control__custom-option {
+  border-top: 1px solid #ddd;
+}
+.block-editor-date-format-picker__custom-format-select-control__custom-option.has-hint {
+  grid-template-columns: auto 30px;
+}
+.block-editor-date-format-picker__custom-format-select-control__custom-option .components-custom-select-control__item-hint {
+  grid-row: 2;
+  text-align: right;
+}
+
 .block-editor-duotone-control__popover > .components-popover__content > div {
   padding: 16px;
   width: 280px;
@@ -3732,6 +3886,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   margin-right: -6px;
 }
+.block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
+  margin-right: -6px !important;
+}
 
 .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-toolbar .components-toolbar,

package/build-style/style.css

@@ -737,6 +737,69 @@
   display: none;
 }
 
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button {
+  min-width: 36px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button svg,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button svg,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button svg,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button svg,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button svg,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button svg,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button svg,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button svg {
+  min-width: 24px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button::before,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button::before,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button::before,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button::before,
+.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button::before,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button::before,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button::before,
+.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button::before {
+  left: 2px;
+  right: 2px;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-right: auto;
@@ -753,6 +816,66 @@
   transform: scale(0);
 }
 
+.block-editor-block-lock-modal {
+  z-index: 1000001;
+}
+@media (min-width: 600px) {
+  .block-editor-block-lock-modal .components-modal__frame {
+    max-width: 480px;
+  }
+}
+
+.block-editor-block-lock-modal__checklist {
+  margin: 0;
+}
+
+.block-editor-block-lock-modal__options-title {
+  border-bottom: 1px solid #ddd;
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__options-title .components-checkbox-control__label {
+  font-weight: 600;
+}
+.block-editor-block-lock-modal__options-title .components-base-control__field {
+  align-items: center;
+  display: flex;
+  margin: 0;
+}
+
+.block-editor-block-lock-modal__checklist-item {
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 0;
+  padding: 12px 0 12px 12px;
+}
+.block-editor-block-lock-modal__checklist-item .components-base-control__field {
+  align-items: center;
+  display: flex;
+  margin: 0;
+}
+.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg {
+  margin-right: 12px;
+  fill: #1e1e1e;
+}
+
+.block-editor-block-lock-modal__actions {
+  margin-top: 24px;
+}
+
+.block-editor-block-lock-toolbar .components-button.has-icon {
+  min-width: 36px !important;
+  padding-left: 0 !important;
+}
+.block-editor-block-lock-toolbar .components-button.has-icon:focus::before {
+  left: 0 !important;
+  right: 12px !important;
+}
+
 .block-editor-block-breadcrumb {
   list-style: none;
   padding: 0;
@@ -1768,6 +1891,10 @@
   margin-bottom: 12px;
 }
 
+.block-editor-color-gradient-control__fieldset {
+  min-width: 0;
+}
+
 .block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
   display: flex;
   gap: 8px;
@@ -1932,6 +2059,33 @@
   cursor: text;
 }
 
+.block-editor-date-format-picker {
+  margin-bottom: 16px;
+}
+
+.block-editor-date-format-picker__default-format-toggle-control__hint {
+  color: #757575;
+  display: block;
+}
+
+.block-editor-date-format-picker__custom-format-select-control.components-base-control {
+  margin-bottom: 0;
+}
+.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
+  width: 100%;
+}
+
+.block-editor-date-format-picker__custom-format-select-control__custom-option {
+  border-top: 1px solid #ddd;
+}
+.block-editor-date-format-picker__custom-format-select-control__custom-option.has-hint {
+  grid-template-columns: auto 30px;
+}
+.block-editor-date-format-picker__custom-format-select-control__custom-option .components-custom-select-control__item-hint {
+  grid-row: 2;
+  text-align: left;
+}
+
 .block-editor-duotone-control__popover > .components-popover__content > div {
   padding: 16px;
   width: 280px;
@@ -3732,6 +3886,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   margin-left: -6px;
 }
+.block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
+  margin-left: -6px !important;
+}
 
 .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-toolbar .components-toolbar,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.3.1",
+	"version": "8.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,31 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.4.1",
-		"@wordpress/api-fetch": "^6.1.1",
-		"@wordpress/blob": "^3.4.1",
-		"@wordpress/blocks": "^11.3.1",
-		"@wordpress/components": "^19.6.1",
-		"@wordpress/compose": "^5.2.1",
-		"@wordpress/data": "^6.4.1",
-		"@wordpress/deprecated": "^3.4.1",
-		"@wordpress/dom": "^3.4.1",
-		"@wordpress/element": "^4.2.1",
-		"@wordpress/hooks": "^3.4.1",
-		"@wordpress/html-entities": "^3.4.1",
-		"@wordpress/i18n": "^4.4.1",
-		"@wordpress/icons": "^8.0.1",
-		"@wordpress/is-shallow-equal": "^4.4.1",
-		"@wordpress/keyboard-shortcuts": "^3.2.1",
-		"@wordpress/keycodes": "^3.4.1",
-		"@wordpress/notices": "^3.4.1",
-		"@wordpress/rich-text": "^5.2.1",
-		"@wordpress/shortcode": "^3.4.1",
-		"@wordpress/style-engine": "^0.3.1",
-		"@wordpress/token-list": "^2.4.1",
-		"@wordpress/url": "^3.5.1",
-		"@wordpress/warning": "^2.4.1",
-		"@wordpress/wordcount": "^3.4.1",
+		"@wordpress/a11y": "^3.5.0",
+		"@wordpress/api-fetch": "^6.2.0",
+		"@wordpress/blob": "^3.5.0",
+		"@wordpress/blocks": "^11.4.0",
+		"@wordpress/components": "^19.7.0",
+		"@wordpress/compose": "^5.3.0",
+		"@wordpress/data": "^6.5.0",
+		"@wordpress/date": "^4.5.0",
+		"@wordpress/deprecated": "^3.5.0",
+		"@wordpress/dom": "^3.5.0",
+		"@wordpress/element": "^4.3.0",
+		"@wordpress/hooks": "^3.5.0",
+		"@wordpress/html-entities": "^3.5.0",
+		"@wordpress/i18n": "^4.5.0",
+		"@wordpress/icons": "^8.1.0",
+		"@wordpress/is-shallow-equal": "^4.5.0",
+		"@wordpress/keyboard-shortcuts": "^3.3.0",
+		"@wordpress/keycodes": "^3.5.0",
+		"@wordpress/notices": "^3.5.0",
+		"@wordpress/rich-text": "^5.3.0",
+		"@wordpress/shortcode": "^3.5.0",
+		"@wordpress/style-engine": "^0.4.0",
+		"@wordpress/token-list": "^2.5.0",
+		"@wordpress/url": "^3.6.0",
+		"@wordpress/warning": "^2.5.0",
+		"@wordpress/wordcount": "^3.5.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -76,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3494eafea7cb345728166c902b3d1223c4a8db6f"
+	"gitHead": "aa003c3634016cc4ab6348b2106907e371c648e1"
 }

package/src/components/block-list/block-html.js

@@ -12,8 +12,8 @@ import {
 	getBlockAttributes,
 	getBlockContent,
 	getBlockType,
-	isValidBlockContent,
 	getSaveContent,
+	validateBlock,
 } from '@wordpress/blocks';
 
 /**
@@ -43,9 +43,13 @@ function BlockHTML( { clientId } ) {
 
 		// If html is empty  we reset the block to the default HTML and mark it as valid to avoid triggering an error
 		const content = html ? html : getSaveContent( blockType, attributes );
-		const isValid = html
-			? isValidBlockContent( blockType, attributes, content )
-			: true;
+		const [ isValid ] = html
+			? validateBlock( {
+					...block,
+					attributes,
+					originalContent: content,
+			  } )
+			: [ true ];
 
 		updateBlock( clientId, {
 			attributes,

package/src/components/block-list/block.js

@@ -17,6 +17,7 @@ import {
 	getBlockType,
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
+	serializeRawBlock,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -74,6 +75,7 @@ function Block( { children, isHtml, ...props } ) {
 }
 
 function BlockListBlock( {
+	block: { __unstableBlockSource },
 	mode,
 	isLocked,
 	canRemove,
@@ -155,7 +157,9 @@ function BlockListBlock( {
 	let block;
 
 	if ( ! isValid ) {
-		const saveContent = getSaveContent( blockType, attributes );
+		const saveContent = __unstableBlockSource
+			? serializeRawBlock( __unstableBlockSource )
+			: getSaveContent( blockType, attributes );
 
 		block = (
 			<Block className="has-warning">

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -52,6 +52,16 @@ function useInitialPosition( clientId ) {
 	);
 }
 
+function isFormElement( element ) {
+	const { tagName } = element;
+	return (
+		tagName === 'INPUT' ||
+		tagName === 'BUTTON' ||
+		tagName === 'SELECT' ||
+		tagName === 'TEXTAREA'
+	);
+}
+
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
  * selected and an initial position is set.
@@ -96,6 +106,24 @@ export function useFocusFirstElement( clientId ) {
 			return;
 		}
 
+		// Check to see if element is focussable before a generic caret insert.
+		if ( ! target.getAttribute( 'contenteditable' ) ) {
+			const focusElement = focus.tabbable.findNext( target );
+			// Make sure focusElement is valid, form field, and within the current target element.
+			// Ensure is not block inserter trigger, don't want to focus that in the event of the group block which doesn't contain any other focussable elements.
+			if (
+				focusElement &&
+				isFormElement( focusElement ) &&
+				target.contains( focusElement ) &&
+				! focusElement.classList.contains(
+					'block-editor-button-block-appender'
+				)
+			) {
+				focusElement.focus();
+				return;
+			}
+		}
+
 		setContentEditableWrapper( ref.current, false );
 
 		placeCaretAtHorizontalEdge( target, isReverse );

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

@@ -0,0 +1,3 @@
+export { default as BlockLockMenuItem } from './menu-item';
+export { default as BlockLockModal } from './modal';
+export { default as BlockLockToolbar } from './toolbar';

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

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useReducer } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { lock, unlock } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockLockModal from './modal';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockLockMenuItem( { clientId } ) {
+	const { isLocked } = useSelect(
+		( select ) => {
+			const {
+				canMoveBlock,
+				canRemoveBlock,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				isLocked:
+					! canMoveBlock( clientId, rootClientId ) ||
+					! canRemoveBlock( clientId, rootClientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const [ isModalOpen, toggleModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
+	const label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
+
+	return (
+		<>
+			<MenuItem icon={ isLocked ? unlock : lock } onClick={ toggleModal }>
+				{ label }
+			</MenuItem>
+			{ isModalOpen && (
+				<BlockLockModal clientId={ clientId } onClose={ toggleModal } />
+			) }
+		</>
+	);
+}