diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 5c034cf7fb963c..ab3cad778bce93 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -74,7 +74,7 @@ $block-selected-child-border-width: 1px;
$block-selected-child-padding: 0;
$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
$block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width;
-$block-custom-appender-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-child-margin + $block-selected-border-width;
+$block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width;
$block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width;
// Buttons & UI Widgets
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index e5eec2effa8cce..52207023a13c54 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -14,7 +14,7 @@ import { Component } from '@wordpress/element';
import { ToolbarButton, Toolbar } from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
import { __, sprintf } from '@wordpress/i18n';
/**
@@ -188,6 +188,17 @@ class BlockListBlock extends Component {
];
}
+ applyToolbarStyle() {
+ const {
+ hasChildren,
+ isUnregisteredBlock,
+ } = this.props;
+
+ if ( ! hasChildren || isUnregisteredBlock ) {
+ return styles.neutralToolbar;
+ }
+ }
+
render() {
const {
clientId,
@@ -228,7 +239,7 @@ class BlockListBlock extends Component {
style={ this.applyBlockStyle() }
>
{ isValid ? this.getBlockForType() : }
- { isSelected && }
+ { isSelected && }
>
@@ -261,6 +272,8 @@ export default compose( [
const isLastBlock = order === getBlocks().length - 1;
const block = __unstableGetBlockWithoutInnerBlocks( clientId );
const { name, attributes, isValid } = block || {};
+
+ const isUnregisteredBlock = name === getUnregisteredTypeHandlerName();
const blockType = getBlockType( name || 'core/missing' );
const title = blockType.title;
const icon = blockType.icon;
@@ -281,7 +294,7 @@ export default compose( [
const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
const firstToSelectId = commonAncestor ? parents[ commonAncestorIndex ] : parents[ parents.length - 1 ];
- const hasChildren = !! getBlockCount( clientId );
+ const hasChildren = ! isUnregisteredBlock && !! getBlockCount( clientId );
const hasParent = !! parentId;
const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId;
const isAncestorSelected = selectedBlockClientId && parents.includes( selectedBlockClientId );
@@ -317,6 +330,7 @@ export default compose( [
isTouchable,
isDimmed,
isRootListInnerBlockHolder,
+ isUnregisteredBlock,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
index ff9cea835a83c9..3867b583105979 100644
--- a/packages/block-editor/src/components/block-list/block.native.scss
+++ b/packages/block-editor/src/components/block-list/block.native.scss
@@ -75,12 +75,16 @@
.selectedLeaf {
margin: $block-selected-margin;
- padding: $block-selected-to-content;
+ padding-left: $block-selected-to-content;
+ padding-right: $block-selected-to-content;
+ padding-top: $block-selected-to-content;
}
.selectedRootLeaf {
margin: 0;
- padding: $block-edge-to-content;
+ padding-left: $block-edge-to-content;
+ padding-right: $block-edge-to-content;
+ padding-top: $block-edge-to-content;
}
.selectedParent {
@@ -130,3 +134,8 @@
background-color: #e9eff3;
opacity: 0.4;
}
+
+.neutralToolbar {
+ margin-left: -$block-edge-to-content;
+ margin-right: -$block-edge-to-content;
+}
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.native.js b/packages/block-editor/src/components/block-list/breadcrumb.native.js
index 0bea56e4da6ddf..6e47499b350c8d 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.native.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.native.js
@@ -22,7 +22,11 @@ import styles from './breadcrumb.scss';
const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } ) => {
return (
- {/* Open BottomSheet with markup */} }>
+ {/* Open BottomSheet with markup */} }
+ disabled={ true } /* Disable temporarily since onPress function is empty */
+ >
{ rootClientId && rootBlockIcon && (
[ ,
,
diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js
index 301efedc3b8265..3b9f0c48c13956 100644
--- a/packages/block-library/src/missing/index.js
+++ b/packages/block-library/src/missing/index.js
@@ -16,7 +16,7 @@ export { metadata, name };
export const settings = {
name,
- title: __( 'Unrecognized Block' ),
+ title: __( 'Unsupported' ),
description: __( 'Your site doesn’t include support for this block.' ),
supports: {
className: false,