fix: Enable access to block settings within UBE

The "Show more settings" menu item is no longer included in the block
toolbar after #46709 merged. Rather than relying upon that menu item,
this conditionally displays the sidebar toggle button whenever a block
is selected.

packages/react-native-bridge/common/gutenberg-web-single-block/content-functions.js

@@ -76,3 +76,49 @@ window.startObservingGutenberg = () => {
 		window.subscribed = true;
 	}
 };
+
+const editor = document.querySelector( '#editor' );
+
+function _toggleBlockSelectedClass( isBlockSelected ) {
+	if ( isBlockSelected ) {
+		editor.classList.add( 'is-block-selected' );
+	} else {
+		editor.classList.remove( 'is-block-selected' );
+	}
+}
+
+/** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
+
+/**
+ * Toggle the `is-block-selected` class on the editor container when a block is
+ * selected. This is used to hide the sidebar toggle button when a block is not
+ * selected.
+ *
+ * @param {WPDataRegistry} registry Data registry.
+ * @return {WPDataRegistry} Modified data registry.
+ */
+function toggleBlockSelectedStyles( registry ) {
+	return {
+		dispatch: ( namespace ) => {
+			const namespaceName =
+				typeof namespace === 'string' ? namespace : namespace.name;
+			const actions = { ...registry.dispatch( namespaceName ) };
+
+			const originalSelectBlockAction = actions.selectBlock;
+			actions.selectBlock = ( ...args ) => {
+				_toggleBlockSelectedClass( true );
+				return originalSelectBlockAction( ...args );
+			};
+
+			const originalClearSelectedBlockAction = actions.clearSelectedBlock;
+			actions.clearSelectedBlock = ( ...args ) => {
+				_toggleBlockSelectedClass( false );
+				return originalClearSelectedBlockAction( ...args );
+			};
+
+			return actions;
+		},
+	};
+}
+
+window.wp.data.use( toggleBlockSelectedStyles );

packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css

@@ -17,14 +17,22 @@
     display: none;
 }
 
-/*
- Hiddes the top bar header by setting its height to 0
- We can\'t remove it since the block toolbar is a child of it.
- */
+/* Right align post header children as we will only display one child */
 .edit-post-header {
-    height: 0px;
-    padding: 0px;
-    overflow: hidden;
+	justify-content: flex-end;
+}
+
+/* Hide post controls unrelated to editing a single block */
+.edit-post-header__toolbar,
+.edit-post-layout .edit-post-header .edit-post-header__settings > *,
+.interface-pinned-items > * {
+	display: none;
+}
+
+/* Display the sidebar toggle button whenever a block is selected */
+.edit-post-layout .edit-post-header .edit-post-header__settings .interface-pinned-items,
+.is-block-selected .edit-post-header__settings .interface-pinned-items > button:first-child {
+	display: flex;
 }
 
 /* Move the block toolbar to the top */
@@ -69,38 +77,6 @@
     display: none;
 }
 
-/* 
- Load second button in component menu group but hide it from view.
- This is to fix a Chrome-specific bug that occurs if this button is set to "display: none;" 
- For additional context, see: https://github.com/WordPress/gutenberg/pull/33740
-*/
-.components-dropdown-menu__menu
-	> .components-menu-group
-	> div
-	> button:nth-child( 2 ) {
-	display: block;
-	min-height: 0;
-	height: 0;
-	padding: 0;
-}
-
-.components-menu-group > div > button:nth-child( 2 ) > span {
-	display: none;
-}
-
-.components-button:focus:not( :disabled ) {
-	box-shadow: none;
-}
-
-/* Remove \'delete block\' button inside \'...\' button in block toolbar */
-.components-dropdown-menu__menu > div:not(:first-child) {
-    display: none;
-}
-
-.components-dropdown-menu__menu > div:first-child {
-	padding-bottom: 0;
-}
-
 /*
  Some Themes can overwrite values on \'editor-styles-wrapper\'.
  This will ensure that the top padding is correct on our single-block version of gutenberg web.