From 2d974f2f53f6fde94e578289f0f4e3fc9dc92691 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Thu, 19 Dec 2024 11:59:11 +0530 Subject: [PATCH 001/164] Storybook: Add BlockAlignmentMatrixControl Stories and update README (#68007) * Storybook: Add BlockAlignmentMatrixControl Stories and update README * Fix defaultValue summary quotes in BlockAlignmentMatrixControl storie * Add JSDoc for BlockAlignmentMatrixControl * Improve JSDoc block indentation * Update JSDoc block indentation * Improve BlockAlignmentMatrixControl story Co-authored-by: Sukhendu2002 Co-authored-by: t-hamano --- .../block-alignment-matrix-control/README.md | 35 +++++++-- .../block-alignment-matrix-control/index.js | 31 ++++++++ .../stories/index.story.js | 78 +++++++++++++++++++ 3 files changed, 138 insertions(+), 6 deletions(-) create mode 100644 packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/README.md b/packages/block-editor/src/components/block-alignment-matrix-control/README.md index dfb38e1596412..b4267d68fe1fd 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/README.md +++ b/packages/block-editor/src/components/block-alignment-matrix-control/README.md @@ -41,13 +41,36 @@ const controls = ( /> -} +); ``` ### 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. \ No newline at end of file diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js index cdec41dfc7b97..fef7b424fdc94 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/index.js +++ b/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 ( + * + * + * setAttributes( { contentPosition: nextPosition } ) + * } + * /> + * + * ); + * } + * ``` + * + * @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' ), diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js new file mode 100644 index 0000000000000..c2e1d27ea55b9 --- /dev/null +++ b/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 ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + /> + ); + }, +}; From 0c9da7c06e6bf7351c61d60f96d16e387f41f999 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 19 Dec 2024 18:06:02 +1100 Subject: [PATCH 002/164] Fix global styles updating in style book. (#68111) Co-authored-by: tellthemachines Co-authored-by: ramonjd --- packages/edit-site/src/components/style-book/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index ecbd729ee8a0a..4c93d2ed8db89 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -50,6 +50,7 @@ import { getExamples } from './examples'; import { store as siteEditorStore } from '../../store'; import { useSection } from '../sidebar-global-styles-wrapper'; import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; +import { GlobalStylesRenderer } from '../global-styles-renderer'; const { ExperimentalBlockEditorProvider, @@ -432,6 +433,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
{ resizeObserver } + Date: Thu, 19 Dec 2024 13:06:25 +0530 Subject: [PATCH 003/164] Storybook: Add stories for BlockTitle Component (#67234) * Doc: Add Storybook for BlockTitle * Refactor: Simplify Storybook for BlockTitle and add type summaries to controls * Refactor: Updated descriptions to match the JSDoc * Refactor: Remove comment from BlockTitle story * Storybook: Refactor BlockTitle story to use ExperimentalBlockEditorProvider - Replaced BlockEditorProvider with ExperimentalBlockEditorProvider. - Simplified blocks array to include a single paragraph block. - Removed unnecessary client ID mappings and control options. - Cleaned up redundant comments and controls. * Storybook: Set clientId control to null for BlockTitle Co-authored-by: SainathPoojary Co-authored-by: t-hamano Co-authored-by: swissspidy --- .../block-title/stories/index.story.js | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 packages/block-editor/src/components/block-title/stories/index.story.js diff --git a/packages/block-editor/src/components/block-title/stories/index.story.js b/packages/block-editor/src/components/block-title/stories/index.story.js new file mode 100644 index 0000000000000..dc66fc721e515 --- /dev/null +++ b/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 ) => ( + + + + ), + ], + 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, + }, +}; From 7edfd3c260404d4108b53d4f0ffb1385a469b663 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Thu, 19 Dec 2024 09:47:28 +0200 Subject: [PATCH 004/164] DataViews: Handle `grid` preview size based on container width (#68078) Co-authored-by: ntsekouras Co-authored-by: jameskoster --- .../src/components/dataviews-context/index.ts | 2 + .../src/components/dataviews/index.tsx | 13 ++++- .../grid/preview-size-picker.tsx | 55 +++++++++---------- .../src/dataviews-layouts/grid/style.scss | 30 +++++----- 4 files changed, 53 insertions(+), 47 deletions(-) diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts index bcacfe32d47bd..992048f909706 100644 --- a/packages/dataviews/src/components/dataviews-context/index.ts +++ b/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; diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx index 872703bc5e1e1..a0a8948813654 100644 --- a/packages/dataviews/src/components/dataviews/index.tsx +++ b/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, } } > -
+
=' ); - const isHuge = useViewportMatch( 'huge', '>=' ); - const isXlarge = useViewportMatch( 'xlarge', '>=' ); - const isLarge = useViewportMatch( 'large', '>=' ); - const isMobile = useViewportMatch( 'mobile', '>=' ); +/** + * Breakpoints were adjusted from media queries breakpoints to account for + * the sidebar width. This was done to match the existing styles we had. + */ +const BREAKPOINTS = { + xhuge: 1520, + huge: 1140, + xlarge: 780, + large: 480, + mobile: 0, +}; - if ( isXHuge ) { - return 'xhuge'; - } - if ( isHuge ) { - return 'huge'; - } - if ( isXlarge ) { - return 'xlarge'; - } - if ( isLarge ) { - return 'large'; - } - if ( isMobile ) { - return 'mobile'; +function useViewPortBreakpoint() { + const containerWidth = useContext( DataViewsContext ).containerWidth; + for ( const [ key, value ] of Object.entries( BREAKPOINTS ) ) { + if ( containerWidth >= value ) { + return key; + } } - return null; + return 'mobile'; } export function useUpdatedPreviewSizeOnViewportChange() { - const viewport = useViewPortBreakpoint(); const view = useContext( DataViewsContext ).view as ViewGrid; + const viewport = useViewPortBreakpoint(); return useMemo( () => { const previewSize = view.layout?.previewSize; let newPreviewSize; - if ( ! viewport || ! previewSize ) { + if ( ! previewSize ) { return; } const breakValues = viewportBreaks[ viewport ]; @@ -69,9 +67,8 @@ export default function PreviewSizePicker() { const viewport = useViewPortBreakpoint(); const context = useContext( DataViewsContext ); const view = context.view as ViewGrid; - const breakValues = viewportBreaks[ viewport || 'mobile' ]; + const breakValues = viewportBreaks[ viewport ]; const previewSizeToUse = view.layout?.previewSize || breakValues.default; - const marks = useMemo( () => Array.from( @@ -84,11 +81,9 @@ export default function PreviewSizePicker() { ), [ breakValues ] ); - - if ( ! viewport ) { + if ( viewport === 'mobile' ) { return null; } - return ( Date: Thu, 19 Dec 2024 14:20:11 +0530 Subject: [PATCH 005/164] Improve accessibility of the Warning component in the block editor (#67433) * Enhance accessibility of the Warning component * Fix: update test snapshot & optimize the useRef logic * Fix: use optional chaining Co-authored-by: sarthaknagoshe2002 Co-authored-by: afercia --- .../block-editor/src/components/warning/index.js | 14 +++++++++++++- .../warning/test/__snapshots__/index.js.snap | 2 ++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js index 17a014107b43a..628a17d4f4789 100644 --- a/packages/block-editor/src/components/warning/index.js +++ b/packages/block-editor/src/components/warning/index.js @@ -9,11 +9,23 @@ import clsx from 'clsx'; import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { moreVertical } from '@wordpress/icons'; +import { useEffect, useRef } from '@wordpress/element'; function Warning( { className, actions, children, secondaryActions } ) { + const alertRef = useRef(); + + useEffect( () => { + alertRef.current?.focus(); + }, [] ); + return (
-
+

{ children } diff --git a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap index dbaba10e18efe..57c384fab28ba 100644 --- a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap @@ -7,6 +7,8 @@ exports[`Warning should match snapshot 1`] = ` >