[pull] trunk from WordPress:trunk

packages/block-editor/src/components/block-alignment-matrix-control/README.md

@@ -41,13 +41,36 @@ const controls = (
       />
     </BlockControls>
   </>
-}
+);
 ```
 
 ### Props
 
-| Name       | Type       | Default                   | Description                                                                                                                              |
-| ---------- | ---------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `label`    | `string`   | `Change matrix alignment` | concise description of tool's functionality.                                                                                             |
-| `onChange` | `function` | `noop`                    | the function to execute upon a user's change of the matrix state                                                                         |
-| `value`    | `string`   | `center`                  | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` |
+### `label`
+
+-   **Type:** `string`
+-   **Default:** `'Change matrix alignment'`
+
+Label for the control.
+
+### `onChange`
+
+-   **Type:** `Function`
+-   **Default:** `noop`
+
+Function to execute upon a user's change of the matrix state.
+
+### `value`
+
+-   **Type:** `string`
+-   **Default:** `'center'`
+-   **Options:** `'center'`, `'center center'`, `'center left'`, `'center right'`, `'top center'`, `'top left'`, `'top right'`, `'bottom center'`, `'bottom left'`, `'bottom right'`
+
+Content alignment location.
+
+### `isDisabled`
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+
+Whether the control should be disabled.

packages/block-editor/src/components/block-alignment-matrix-control/index.js

@@ -11,6 +11,37 @@ import {
 
 const noop = () => {};
 
+/**
+ * The alignment matrix control allows users to quickly adjust inner block alignment.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-matrix-control/README.md
+ *
+ * @example
+ * ```jsx
+ * function Example() {
+ *   return (
+ *     <BlockControls>
+ *       <BlockAlignmentMatrixControl
+ *         label={ __( 'Change content position' ) }
+ *         value="center"
+ *         onChange={ ( nextPosition ) =>
+ *           setAttributes( { contentPosition: nextPosition } )
+ *         }
+ *       />
+ *     </BlockControls>
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props            Component props.
+ * @param {string}   props.label      Label for the control. Defaults to 'Change matrix alignment'.
+ * @param {Function} props.onChange   Function to execute upon change of matrix state.
+ * @param {string}   props.value      Content alignment location. One of: 'center', 'center center',
+ *                                    'center left', 'center right', 'top center', 'top left',
+ *                                    'top right', 'bottom center', 'bottom left', 'bottom right'.
+ * @param {boolean}  props.isDisabled Whether the control should be disabled.
+ * @return {Element} The BlockAlignmentMatrixControl component.
+ */
 function BlockAlignmentMatrixControl( props ) {
 	const {
 		label = __( 'Change matrix alignment' ),

packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockAlignmentMatrixControl from '../';
+
+const meta = {
+	title: 'BlockEditor/BlockAlignmentMatrixControl',
+	component: BlockAlignmentMatrixControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Renders a control for selecting block alignment using a matrix of alignment options.',
+			},
+		},
+	},
+	argTypes: {
+		label: {
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: "'Change matrix alignment'" },
+			},
+			description: 'Label for the control.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+			description:
+				"Function to execute upon a user's change of the matrix state.",
+		},
+		isDisabled: {
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+			description: 'Whether the control should be disabled.',
+		},
+		value: {
+			control: { type: null },
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: "'center'" },
+			},
+			description: 'Content alignment location.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+
+		return (
+			<BlockAlignmentMatrixControl
+				{ ...args }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+			/>
+		);
+	},
+};

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

@@ -12,11 +12,7 @@ import {
 	useDispatch,
 	useRegistry,
 } from '@wordpress/data';
-import {
-	useViewportMatch,
-	useMergeRefs,
-	useDebounce,
-} from '@wordpress/compose';
+import { useMergeRefs, useDebounce } from '@wordpress/compose';
 import {
 	createContext,
 	useMemo,
@@ -46,7 +42,6 @@ export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
 		useSelect( ( select ) => {
 			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
@@ -105,7 +100,7 @@ function Root( { className, ...settings } ) {
 			] ),
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
-				'is-focus-mode': isFocusMode && isLargeViewport,
+				'is-focus-mode': isFocusMode,
 			} ),
 		},
 		settings

packages/block-editor/src/components/block-title/stories/index.story.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { ExperimentalBlockEditorProvider } from '../../provider';
+import BlockTitle from '../';
+
+// Register core blocks for the story environment
+registerCoreBlocks();
+
+// Sample blocks for testing
+const blocks = [ createBlock( 'core/paragraph' ) ];
+
+const meta = {
+	title: 'BlockEditor/BlockTitle',
+	component: BlockTitle,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					"Renders the block's configured title as a string, or empty if the title cannot be determined.",
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<ExperimentalBlockEditorProvider value={ blocks }>
+				<Story />
+			</ExperimentalBlockEditorProvider>
+		),
+	],
+	argTypes: {
+		clientId: {
+			control: { type: null },
+			description: 'Client ID of block.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		maximumLength: {
+			control: { type: 'number' },
+			description:
+				'The maximum length that the block title string may be before truncated.',
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+		},
+		context: {
+			control: { type: 'text' },
+			description: 'The context to pass to `getBlockLabel`.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		clientId: blocks[ 0 ].clientId,
+	},
+};

packages/dataviews/src/components/dataviews-context/index.ts

@@ -29,6 +29,7 @@ type DataViewsContextType< Item > = {
 	getItemLevel?: ( item: Item ) => number;
 	onClickItem?: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
+	containerWidth: number;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -46,6 +47,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
 	isItemClickable: () => true,
+	containerWidth: 0,
 } );
 
 export default DataViewsContext;

packages/dataviews/src/components/dataviews/index.tsx

@@ -8,6 +8,7 @@ import type { ReactNode } from 'react';
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useMemo, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -75,6 +76,15 @@ export default function DataViews< Item >( {
 	isItemClickable = defaultIsItemClickable,
 	header,
 }: DataViewsProps< Item > ) {
+	const [ containerWidth, setContainerWidth ] = useState( 0 );
+	const containerRef = useResizeObserver(
+		( resizeObserverEntries: any ) => {
+			setContainerWidth(
+				resizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize
+			);
+		},
+		{ box: 'border-box' }
+	);
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
@@ -120,9 +130,10 @@ export default function DataViews< Item >( {
 				getItemLevel,
 				isItemClickable,
 				onClickItem,
+				containerWidth,
 			} }
 		>
-			<div className="dataviews-wrapper">
+			<div className="dataviews-wrapper" ref={ containerRef }>
 				<HStack
 					alignment="top"
 					justify="space-between"