prep build 10/19

Author: bph

docs/explanations/architecture/styles.md

@@ -510,7 +510,7 @@ When a block that opts in to layout support is rendered, two things are processe
 
 There are currently four layout types in use:
 
--   Default/Flow: Items are stacked vertically. The parent container block is set to `display: flow` and the spacing between children is handled via vertical margins.
+-   Default/Flow: Items are stacked vertically. The parent container block's display value isn't specified, so that it may use the default value for that HTML element. For most elements that will usually be `block`. The spacing between children is handled via vertical margins.
 -   Constrained: Items are stacked vertically, using the same spacing logic as the Flow layout. Features constrained widths for child content, outputting widths for standard content size and wide size. Defaults to using global `contentSize` and `wideSize` values set in `settings.layout` in the `theme.json`.
 -   Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property.
 -   Grid: Items are displayed using a Grid layout. Defaults to an `auto-fill` approach to column generation but can also be set to a fixed number of columns. Spacing between children is handled via the `gap` CSS property.

docs/reference-guides/data/data-core-block-editor.md

@@ -738,6 +738,39 @@ _Returns_
 
 Returns the currently selected block, or null if there is no selected block.
 
+_Usage_
+
+```js
+import { select } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+// Set initial active block client ID
+let activeBlockClientId = null;
+
+const getActiveBlockData = () => {
+	const activeBlock = select( blockEditorStore ).getSelectedBlock();
+
+	if ( activeBlock && activeBlock.clientId !== activeBlockClientId ) {
+		activeBlockClientId = activeBlock.clientId;
+
+		// Get active block name and attributes
+		const activeBlockName = activeBlock.name;
+		const activeBlockAttributes = activeBlock.attributes;
+
+		// Log active block name and attributes
+		console.log( activeBlockName, activeBlockAttributes );
+	}
+};
+
+// Subscribe to changes in the editor
+// wp.data.subscribe(() => {
+// getActiveBlockData()
+// })
+
+// Update active block data on click
+// onclick="getActiveBlockData()"
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global application state.

package-lock.json

@@ -38,17 +38,7 @@
 
 	&.is-installing {
 		.block-directory-downloadable-block-list-item__author {
-			border: 0;
-			clip: rect(1px, 1px, 1px, 1px);
-			-webkit-clip-path: inset(50%);
-			clip-path: inset(50%);
-			height: 1px;
-			margin: -1px;
-			overflow: hidden;
-			padding: 0;
-			position: absolute;
-			width: 1px;
-			word-wrap: normal !important;
+			display: none;
 		}
 	}
 }

packages/block-directory/src/components/downloadable-block-list-item/style.scss

@@ -46,9 +46,3 @@
 .block-editor-block-inspector__no-block-tools {
 	border-top: $border-width solid $gray-300;
 }
-
-.block-editor-block-inspector__tab-item {
-	flex: 1 1 0px;
-	display: flex;
-	justify-content: center;
-}

packages/block-editor/src/components/block-inspector/style.scss

@@ -181,8 +181,8 @@ function Items( {
 				__unstableGetVisibleBlocks,
 				getTemplateLock,
 				getBlockEditingMode,
-				__unstableGetEditorMode,
 				isSectionBlock,
+				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
 			const _order = getBlockOrder( rootClientId );
@@ -200,13 +200,13 @@ function Items( {
 				order: _order,
 				selectedBlocks: getSelectedBlockClientIds(),
 				visibleBlocks: __unstableGetVisibleBlocks(),
-				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
+				isZoomOut: _isZoomOut(),
 				shouldRenderAppender:
 					! isSectionBlock( rootClientId ) &&
 					getBlockEditingMode( rootClientId ) !== 'disabled' &&
 					! getTemplateLock( rootClientId ) &&
 					hasAppender &&
-					__unstableGetEditorMode() !== 'zoom-out' &&
+					! _isZoomOut() &&
 					( hasCustomAppender ||
 						rootClientId === selectedBlockClientId ||
 						( ! rootClientId &&

packages/block-editor/src/components/block-list/index.js

@@ -15,6 +15,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
@@ -28,15 +29,16 @@ import { store as blockEditorStore } from '../../../store';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting, __unstableGetEditorMode } =
-		useSelect( blockEditorStore );
+	const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock(
+		useSelect( blockEditorStore )
+	);
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
 		if (
 			! isBlockSelected( clientId ) ||
 			isMultiSelecting() ||
-			__unstableGetEditorMode() === 'zoom-out'
+			isZoomOut()
 		) {
 			return;
 		}

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

@@ -21,18 +21,12 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const {
-		getBlockRootClientId,
-		getBlockIndex,
-		isZoomOut,
-		__unstableGetEditorMode,
-	} = unlock( useSelect( blockEditorStore ) );
-	const {
-		insertAfterBlock,
-		removeBlock,
-		__unstableSetEditorMode,
-		resetZoomLevel,
-	} = unlock( useDispatch( blockEditorStore ) );
+	const { getBlockRootClientId, getBlockIndex, isZoomOut } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { insertAfterBlock, removeBlock, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	return useRefEffect(
 		( node ) => {
@@ -66,12 +60,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				event.preventDefault();
 
-				if (
-					keyCode === ENTER &&
-					__unstableGetEditorMode() === 'zoom-out' &&
-					isZoomOut()
-				) {
-					__unstableSetEditorMode( 'edit' );
+				if ( keyCode === ENTER && isZoomOut() ) {
 					resetZoomLevel();
 				} else if ( keyCode === ENTER ) {
 					insertAfterBlock( clientId );
@@ -105,8 +94,6 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
-			__unstableGetEditorMode,
-			__unstableSetEditorMode,
 			isZoomOut,
 			resetZoomLevel,
 		]

packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -14,22 +14,13 @@ import { unlock } from '../../../lock-unlock';
  * Allows Zoom Out mode to be exited by double clicking in the selected block.
  */
 export function useZoomOutModeExit() {
-	const { getSettings, isZoomOut, __unstableGetEditorMode } = unlock(
-		useSelect( blockEditorStore )
-	);
-
-	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
 			function onDoubleClick( event ) {
-				// In "compose" mode.
-				const composeMode =
-					__unstableGetEditorMode() === 'zoom-out' && isZoomOut();
-
-				if ( ! composeMode ) {
+				if ( ! isZoomOut() ) {
 					return;
 				}
 
@@ -43,7 +34,6 @@ export function useZoomOutModeExit() {
 					) {
 						__experimentalSetIsInserterOpened( false );
 					}
-					__unstableSetEditorMode( 'edit' );
 					resetZoomLevel();
 				}
 			}
@@ -54,12 +44,6 @@ export function useZoomOutModeExit() {
 				node.removeEventListener( 'dblclick', onDoubleClick );
 			};
 		},
-		[
-			getSettings,
-			__unstableSetEditorMode,
-			__unstableGetEditorMode,
-			isZoomOut,
-			resetZoomLevel,
-		]
+		[ getSettings, isZoomOut, resetZoomLevel ]
 	);
 }

packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js

@@ -18,7 +18,7 @@ export function useInBetweenInserter() {
 	const isInBetweenInserterDisabled = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().isDistractionFree ||
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+			unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
 	const {

packages/block-editor/src/components/block-list/use-in-between-inserter.js

@@ -69,6 +69,9 @@ export function PrivateBlockToolbar( {
 		hasParentPattern,
 		hasContentOnlyLocking,
 		showShuffleButton,
+		showSlots,
+		showGroupButtons,
+		showLockButtons,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -81,7 +84,7 @@ export function PrivateBlockToolbar( {
 			getBlockParentsByBlockName,
 			getTemplateLock,
 			getParentSectionBlock,
-			isZoomOutMode,
+			isZoomOut,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -122,7 +125,7 @@ export function PrivateBlockToolbar( {
 			shouldShowVisualToolbar: isValid && isVisual,
 			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
-				! isZoomOutMode() &&
+				! isZoomOut() &&
 				parentBlockType &&
 				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
@@ -134,7 +137,10 @@ export function PrivateBlockToolbar( {
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
-			showShuffleButton: isZoomOutMode(),
+			showShuffleButton: isZoomOut(),
+			showSlots: ! isZoomOut(),
+			showGroupButtons: ! isZoomOut(),
+			showLockButtons: ! isZoomOut(),
 		};
 	}, [] );
 
@@ -195,11 +201,13 @@ export function PrivateBlockToolbar( {
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 								<BlockSwitcher clientIds={ blockClientIds } />
-								{ ! isMultiToolbar && isDefaultEditingMode && (
-									<BlockLockToolbar
-										clientId={ blockClientId }
-									/>
-								) }
+								{ ! isMultiToolbar &&
+									isDefaultEditingMode &&
+									showLockButtons && (
+										<BlockLockToolbar
+											clientId={ blockClientId }
+										/>
+									) }
 								<BlockMover
 									clientIds={ blockClientIds }
 									hideDragHandle={ hideDragHandle }
@@ -209,7 +217,8 @@ export function PrivateBlockToolbar( {
 					) }
 				{ ! hasContentOnlyLocking &&
 					shouldShowVisualToolbar &&
-					isMultiToolbar && <BlockGroupToolbar /> }
+					isMultiToolbar &&
+					showGroupButtons && <BlockGroupToolbar /> }
 				{ showShuffleButton && (
 					<ToolbarGroup>
 						<Shuffle
@@ -218,7 +227,7 @@ export function PrivateBlockToolbar( {
 						/>
 					</ToolbarGroup>
 				) }
-				{ shouldShowVisualToolbar && (
+				{ shouldShowVisualToolbar && showSlots && (
 					<>
 						<BlockControls.Slot
 							group="parent"

packages/block-editor/src/components/block-toolbar/index.js

@@ -30,21 +30,19 @@ function selector( select ) {
 		getSelectedBlockClientId,
 		getFirstMultiSelectedBlockClientId,
 		getSettings,
-		__unstableGetEditorMode,
 		isTyping,
 		isDragging,
+		isZoomOut,
 	} = unlock( select( blockEditorStore ) );
 
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-	const editorMode = __unstableGetEditorMode();
-
 	return {
 		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
-		isZoomOutMode: editorMode === 'zoom-out',
+		isZoomOutMode: isZoomOut(),
 		isDragging: isDragging(),
 	};
 }

packages/block-editor/src/components/block-tools/index.js

@@ -18,6 +18,7 @@ import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import BlockDropZonePopover from '../block-popover/drop-zone';
+import { unlock } from '../../lock-unlock';
 
 export const InsertionPointOpenRef = createContext();
 
@@ -47,8 +48,8 @@ function InbetweenInsertionPointPopover( {
 			getPreviousBlockClientId,
 			getNextBlockClientId,
 			getSettings,
-			__unstableGetEditorMode,
-		} = select( blockEditorStore );
+			isZoomOut,
+		} = unlock( select( blockEditorStore ) );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
 
@@ -78,7 +79,7 @@ function InbetweenInsertionPointPopover( {
 			rootClientId: insertionPoint.rootClientId,
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			isZoomOutMode: isZoomOut(),
 		};
 	}, [] );
 	const { getBlockEditingMode } = useSelect( blockEditorStore );