From f88ec2b59fbe1dcfc9b56b3ccbc2e0a8c9cf48c6 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:57:39 +0000 Subject: [PATCH 01/18] WIP: wp-env: add multisite support (#67845) --- packages/env/CHANGELOG.md | 1 + packages/env/lib/config/parse-config.js | 6 ++++ .../__snapshots__/config-integration.js.snap | 8 +++++ packages/env/lib/config/test/parse-config.js | 1 + packages/env/lib/wordpress.js | 31 ++++++++++++++++++- schemas/json/wp-env.json | 7 ++++- 6 files changed, 52 insertions(+), 2 deletions(-) diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md index 0298e21c81000..252e1e65dae87 100644 --- a/packages/env/CHANGELOG.md +++ b/packages/env/CHANGELOG.md @@ -7,6 +7,7 @@ ### Enhancements - Add phpMyAdmin as an optional service. Enabled via the new `phpmyadminPort` environment config, as well as env vars `WP_ENV_PHPMYADMIN_PORT` and `WP_ENV_TESTS_PHPMYADMIN_PORT`. +- Add support for WordPress multisite installations. Enabled via the new `multisite` environment config. ### Internal diff --git a/packages/env/lib/config/parse-config.js b/packages/env/lib/config/parse-config.js index bddd7bc72aaee..d5e06c5bb9bee 100644 --- a/packages/env/lib/config/parse-config.js +++ b/packages/env/lib/config/parse-config.js @@ -52,6 +52,7 @@ const mergeConfigs = require( './merge-configs' ); * @property {number} port The port to use. * @property {number} mysqlPort The port to use for MySQL. Random if empty. * @property {number} phpmyadminPort The port to use for phpMyAdmin. If empty, disabled phpMyAdmin. + * @property {boolean} multisite Whether to set up a multisite installation. * @property {Object} config Mapping of wp-config.php constants to their desired values. * @property {Object.} mappings Mapping of WordPress directories to local directories which should be mounted. * @property {string|null} phpVersion Version of PHP to use in the environments, of the format 0.0. @@ -89,6 +90,7 @@ const DEFAULT_ENVIRONMENT_CONFIG = { testsPort: 8889, mysqlPort: null, phpmyadminPort: null, + multisite: false, mappings: {}, config: { FS_METHOD: 'direct', @@ -466,6 +468,10 @@ async function parseEnvironmentConfig( parsedConfig.phpmyadminPort = config.phpmyadminPort; } + if ( config.multisite !== undefined ) { + parsedConfig.multisite = config.multisite; + } + if ( config.phpVersion !== undefined ) { // Support null as a valid input. if ( config.phpVersion !== null ) { diff --git a/packages/env/lib/config/test/__snapshots__/config-integration.js.snap b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap index 6b671a6bc858e..833a8a54d7749 100644 --- a/packages/env/lib/config/test/__snapshots__/config-integration.js.snap +++ b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap @@ -29,6 +29,7 @@ exports[`Config Integration should load local and override configuration files 1 "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23306, "phpVersion": null, "phpmyadminPort": null, @@ -59,6 +60,7 @@ exports[`Config Integration should load local and override configuration files 1 "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23307, "phpVersion": null, "phpmyadminPort": null, @@ -106,6 +108,7 @@ exports[`Config Integration should load local configuration file 1`] = ` "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 13306, "phpVersion": null, "phpmyadminPort": null, @@ -136,6 +139,7 @@ exports[`Config Integration should load local configuration file 1`] = ` "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23307, "phpVersion": null, "phpmyadminPort": null, @@ -183,6 +187,7 @@ exports[`Config Integration should use default configuration 1`] = ` "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": null, "phpVersion": null, "phpmyadminPort": null, @@ -213,6 +218,7 @@ exports[`Config Integration should use default configuration 1`] = ` "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": null, "phpVersion": null, "phpmyadminPort": null, @@ -260,6 +266,7 @@ exports[`Config Integration should use environment variables over local and over "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23306, "phpVersion": null, "phpmyadminPort": null, @@ -291,6 +298,7 @@ exports[`Config Integration should use environment variables over local and over "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23307, "phpVersion": null, "phpmyadminPort": null, diff --git a/packages/env/lib/config/test/parse-config.js b/packages/env/lib/config/test/parse-config.js index cc6e2c7a96bbc..968c8b66a4ec1 100644 --- a/packages/env/lib/config/test/parse-config.js +++ b/packages/env/lib/config/test/parse-config.js @@ -23,6 +23,7 @@ const DEFAULT_CONFIG = { testsPort: 8889, mysqlPort: null, phpmyadminPort: null, + multisite: false, phpVersion: null, coreSource: { type: 'git', diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js index bd3c4a23f8ff5..8c08fb1f20ec7 100644 --- a/packages/env/lib/wordpress.js +++ b/packages/env/lib/wordpress.js @@ -86,11 +86,40 @@ async function configureWordPress( environment, config, spinner ) { // Ignore error. } - const installCommand = `wp core install --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`; + const isMultisite = config.env[ environment ].multisite; + + const installMethod = isMultisite ? 'multisite-install' : 'install'; + const installCommand = `wp core ${ installMethod } --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`; // -eo pipefail exits the command as soon as anything fails in bash. const setupCommands = [ 'set -eo pipefail', installCommand ]; + // Bootstrap .htaccess for multisite + if ( isMultisite ) { + // Using a subshell with `exec` was the best tradeoff I could come up + // with between readability of this source and compatibility with the + // way that all strings in `setupCommands` are later joined with '&&'. + setupCommands.push( + `( +exec > /var/www/html/.htaccess +echo 'RewriteEngine On' +echo 'RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]' +echo 'RewriteBase /' +echo 'RewriteRule ^index\.php$ - [L]' +echo '' +echo '# add a trailing slash to /wp-admin' +echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]' +echo '' +echo 'RewriteCond %{REQUEST_FILENAME} -f [OR]' +echo 'RewriteCond %{REQUEST_FILENAME} -d' +echo 'RewriteRule ^ - [L]' +echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]' +echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]' +echo 'RewriteRule . index.php [L]' +)` + ); + } + // WordPress versions below 5.1 didn't use proper spacing in wp-config. const configAnchor = wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' ) diff --git a/schemas/json/wp-env.json b/schemas/json/wp-env.json index 8aa604ed41ed1..3958818714e4e 100644 --- a/schemas/json/wp-env.json +++ b/schemas/json/wp-env.json @@ -66,6 +66,10 @@ "phpmyadminPort": { "description": "The port number to access phpMyAdmin.", "type": "integer" + }, + "multisite": { + "description": "Whether to set up a multisite installation.", + "type": "boolean" } } }, @@ -78,7 +82,8 @@ "port", "config", "mappings", - "phpmyadminPort" + "phpmyadminPort", + "multisite" ] } }, From 9437f7e73f9c6c9f831f2a26a555dfa8fddb3d61 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 12 Dec 2024 18:47:35 +0100 Subject: [PATCH 02/18] RangeControl: animate thumb and track only when using marks (#67836) Co-authored-by: ciampo Co-authored-by: jameskoster Co-authored-by: youknowriad Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- .../src/range-control/styles/range-control-styles.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index d943ca472911e..c86c57800cac4 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -130,8 +130,10 @@ export const Track = styled.span` margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px; top: 0; - @media not ( prefers-reduced-motion ) { - transition: width ease 0.1s; + .is-marked & { + @media not ( prefers-reduced-motion ) { + transition: width ease 0.1s; + } } ${ trackBackgroundColor }; @@ -203,8 +205,10 @@ export const ThumbWrapper = styled.span` border-radius: ${ CONFIG.radiusRound }; z-index: 3; - @media not ( prefers-reduced-motion ) { - transition: left ease 0.1s; + .is-marked & { + @media not ( prefers-reduced-motion ) { + transition: left ease 0.1s; + } } ${ thumbColor }; From b74283b82cf1cae766f3982f158a004eaf115d46 Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Fri, 13 Dec 2024 00:12:59 +0530 Subject: [PATCH 03/18] Refactor "Settings" panel of Archives block to use ToolsPanel instead of PanelBody (#67841) Co-authored-by: im3dabasia Co-authored-by: fabiankaegy < fabiankaegy@git.wordpress.org> --- packages/block-library/src/archives/edit.js | 122 ++++++++++++++------ 1 file changed, 86 insertions(+), 36 deletions(-) diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js index 60b8715988ed9..b51bd9a4fe1e6 100644 --- a/packages/block-library/src/archives/edit.js +++ b/packages/block-library/src/archives/edit.js @@ -2,10 +2,11 @@ * WordPress dependencies */ import { - PanelBody, ToggleControl, SelectControl, Disabled, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; @@ -17,55 +18,104 @@ export default function ArchivesEdit( { attributes, setAttributes } ) { return ( <> - - { + setAttributes( { + displayAsDropdown: false, + showLabel: false, + showPostCounts: false, + type: 'monthly', + } ); + } } + > + - setAttributes( { - displayAsDropdown: ! displayAsDropdown, - } ) + isShownByDefault + hasValue={ () => displayAsDropdown } + onDeselect={ () => + setAttributes( { displayAsDropdown: false } ) } - /> - { displayAsDropdown && ( + > setAttributes( { - showLabel: ! showLabel, + displayAsDropdown: ! displayAsDropdown, } ) } /> + + + { displayAsDropdown && ( + showLabel } + onDeselect={ () => + setAttributes( { showLabel: false } ) + } + > + + setAttributes( { + showLabel: ! showLabel, + } ) + } + /> + ) } - - setAttributes( { - showPostCounts: ! showPostCounts, - } ) + isShownByDefault + hasValue={ () => showPostCounts } + onDeselect={ () => + setAttributes( { showPostCounts: false } ) } - /> - + + setAttributes( { + showPostCounts: ! showPostCounts, + } ) + } + /> + + + - setAttributes( { type: value } ) + isShownByDefault + hasValue={ () => !! type } + onDeselect={ () => + setAttributes( { type: 'monthly' } ) } - /> - + > + + setAttributes( { type: value } ) + } + /> + +
From 70c6cb796896e99157fe5adc8d09f64e0da35b15 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 13 Dec 2024 04:13:31 +0900 Subject: [PATCH 04/18] LineHeightControl: Deprecate 36px default size (#67850) Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- .../src/components/line-height-control/README.md | 1 + .../src/components/line-height-control/index.js | 12 ++++++++++++ .../line-height-control/stories/index.story.js | 1 + .../src/components/line-height-control/test/index.js | 8 +++++++- 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md index 89bcc69622367..2f719b5a7210e 100644 --- a/packages/block-editor/src/components/line-height-control/README.md +++ b/packages/block-editor/src/components/line-height-control/README.md @@ -18,6 +18,7 @@ const MyLineHeightControl = () => ( ); ``` diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index e6af602c2875a..ea692ceb452e3 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -89,6 +90,17 @@ const LineHeightControl = ( { onChange( `${ nextValue }` ); }; + if ( + ! __next40pxDefaultSize && + ( otherProps.size === undefined || otherProps.size === 'default' ) + ) { + deprecated( `36px default size for wp.blockEditor.LineHeightControl`, { + since: '6.8', + version: '7.1', + hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.', + } ); + } + return (
{ export const Default = Template.bind( {} ); Default.args = { + __next40pxDefaultSize: true, __unstableInputWidth: '100px', }; diff --git a/packages/block-editor/src/components/line-height-control/test/index.js b/packages/block-editor/src/components/line-height-control/test/index.js index b98bc93c48a83..488d22b768114 100644 --- a/packages/block-editor/src/components/line-height-control/test/index.js +++ b/packages/block-editor/src/components/line-height-control/test/index.js @@ -19,7 +19,13 @@ const SPIN = STEP * SPIN_FACTOR; const ControlledLineHeightControl = () => { const [ value, setValue ] = useState(); - return ; + return ( + + ); }; describe( 'LineHeightControl', () => { From 75713215b3562a6a61986641f1f42a12bde7c643 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 13 Dec 2024 04:14:12 +0900 Subject: [PATCH 05/18] FontAppearanceControl: Deprecate 36px default size (#67854) Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- .../components/font-appearance-control/index.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js index f9e8023f93ec6..62396c2dc7bd6 100644 --- a/packages/block-editor/src/components/font-appearance-control/index.js +++ b/packages/block-editor/src/components/font-appearance-control/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { CustomSelectControl } from '@wordpress/components'; +import deprecated from '@wordpress/deprecated'; import { useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; @@ -147,6 +148,20 @@ export default function FontAppearanceControl( props ) { ); }; + if ( + ! __next40pxDefaultSize && + ( otherProps.size === undefined || otherProps.size === 'default' ) + ) { + deprecated( + `36px default size for wp.blockEditor.__experimentalFontAppearanceControl`, + { + since: '6.8', + version: '7.1', + hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.', + } + ); + } + return ( hasStylesOrWeights && ( Date: Fri, 13 Dec 2024 04:14:37 +0900 Subject: [PATCH 06/18] FontFamilyControl: Deprecate 36px default size (#67853) Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- .../src/components/font-family/README.md | 1 + .../src/components/font-family/index.js | 14 ++++++++++++++ .../components/font-family/stories/index.story.js | 1 + 3 files changed, 16 insertions(+) diff --git a/packages/block-editor/src/components/font-family/README.md b/packages/block-editor/src/components/font-family/README.md index 57697f595cc80..25190802e5d0b 100644 --- a/packages/block-editor/src/components/font-family/README.md +++ b/packages/block-editor/src/components/font-family/README.md @@ -29,6 +29,7 @@ const MyFontFamilyControl = () => { setFontFamily( newFontFamily ); } } __nextHasNoMarginBottom + __next40pxDefaultSize /> ); }; diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index e8d0d7ed2dd80..6a723bb24c48e 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -58,6 +58,20 @@ export default function FontFamilyControl( { ); } + if ( + ! __next40pxDefaultSize && + ( props.size === undefined || props.size === 'default' ) + ) { + deprecated( + `36px default size for wp.blockEditor.__experimentalFontFamilyControl`, + { + since: '6.8', + version: '7.1', + hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.', + } + ); + } + return ( Date: Fri, 13 Dec 2024 00:52:00 +0530 Subject: [PATCH 07/18] Refactor "Settings" panel of Button block to use ToolsPanel instead of PanelBody (#67887) Co-authored-by: Mayank-Tripathi32 Co-authored-by: fabiankaegy --- packages/block-library/src/button/edit.js | 56 ++++++++++++++--------- 1 file changed, 35 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 2106c2031491f..9f2a9048af4c0 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -18,10 +18,11 @@ import { useEffect, useState, useRef, useMemo } from '@wordpress/element'; import { Button, ButtonGroup, - PanelBody, TextControl, ToolbarButton, Popover, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { AlignmentControl, @@ -123,26 +124,39 @@ function WidthPanel( { selectedWidth, setAttributes } ) { } return ( - - - { [ 25, 50, 75, 100 ].map( ( widthValue ) => { - return ( - - ); - } ) } - - + { + handleChange( undefined ); + } } + > + !! selectedWidth } + onDeselect={ () => handleChange( undefined ) } + > + + { [ 25, 50, 75, 100 ].map( ( widthValue ) => { + return ( + + ); + } ) } + + + ); } From 63b0e7f1ce6a8626fecf6714d6288b534220f46b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= Date: Thu, 12 Dec 2024 20:27:21 +0100 Subject: [PATCH 08/18] Adding @fabiankaegy as a code owner of the block library package (#67891) Co-authored-by: fabiankaegy Co-authored-by: youknowriad --- .github/CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 2ec03cba722c6..3e02267da7c51 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -13,7 +13,7 @@ /packages/data-controls @nerrad # Blocks -/packages/block-library @ajitbohra +/packages/block-library @ajitbohra @fabiankaegy /packages/block-library/src/gallery @geriux /packages/block-library/src/comment-template @michalczaplinski /packages/block-library/src/comments @michalczaplinski From cff73d475e9323e63657c0c246cb613ca3388c8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 12 Dec 2024 21:19:27 +0100 Subject: [PATCH 09/18] Pages: update layout-specific config when the view is updated (#67881) Co-authored-by: oandregal Co-authored-by: youknowriad --- packages/edit-site/src/components/post-list/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js index a67a505795b3c..bbf5d654ddb57 100644 --- a/packages/edit-site/src/components/post-list/index.js +++ b/packages/edit-site/src/components/post-list/index.js @@ -109,6 +109,7 @@ function useView( postType ) { return { ...initialView, type, + ...defaultLayouts[ type ], }; } ); @@ -140,13 +141,15 @@ function useView( postType ) { // without affecting any other config. const onUrlLayoutChange = useEvent( () => { setView( ( prevView ) => { - const layoutToApply = layout ?? LAYOUT_LIST; - if ( layoutToApply === prevView.type ) { + const newType = layout ?? LAYOUT_LIST; + if ( newType === prevView.type ) { return prevView; } + return { ...prevView, - type: layout ?? LAYOUT_LIST, + type: newType, + ...defaultLayouts[ newType ], }; } ); } ); @@ -168,6 +171,7 @@ function useView( postType ) { setView( { ...newView, type, + ...defaultLayouts[ type ], } ); } } ); From 8d6b8c5c05a2427af04e8639341ddcfac299751e Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Fri, 13 Dec 2024 04:09:55 +0530 Subject: [PATCH 10/18] Refactor "Settings" panel of Table block to use ToolsPanel instead of PanelBody (#67896) Co-authored-by: Sukhendu2002 Co-authored-by: fabiankaegy --- packages/block-library/src/table/edit.js | 74 +++++++++++++++++------- 1 file changed, 54 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index f1cb3fa5d8b8a..1d61bab0787e4 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -20,12 +20,13 @@ import { import { __ } from '@wordpress/i18n'; import { Button, - PanelBody, Placeholder, TextControl, ToggleControl, ToolbarDropdownMenu, __experimentalHasSplitBorders as hasSplitBorders, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { alignLeft, @@ -473,33 +474,66 @@ function TableEdit( { ) } - { + setAttributes( { + hasFixedLayout: true, + head: [], + foot: [], + } ); + } } > - hasFixedLayout !== true } label={ __( 'Fixed width table cells' ) } - checked={ !! hasFixedLayout } - onChange={ onChangeFixedLayout } - /> + onDeselect={ () => + setAttributes( { hasFixedLayout: true } ) + } + isShownByDefault + > + + { ! isEmpty && ( <> - head && head.length } label={ __( 'Header section' ) } - checked={ !! ( head && head.length ) } - onChange={ onToggleHeaderSection } - /> - + setAttributes( { head: [] } ) + } + isShownByDefault + > + + + foot && foot.length } label={ __( 'Footer section' ) } - checked={ !! ( foot && foot.length ) } - onChange={ onToggleFooterSection } - /> + onDeselect={ () => + setAttributes( { foot: [] } ) + } + isShownByDefault + > + + ) } - + { ! isEmpty && ( Date: Fri, 13 Dec 2024 09:02:59 +0200 Subject: [PATCH 11/18] Storybook: Fix warnings in Layout document (#67865) Co-authored-by: tyxla Co-authored-by: jameskoster Co-authored-by: mirka <0mirka00@git.wordpress.org> --- storybook/stories/foundations/layout.mdx | 60 ++++++++++++------------ 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/storybook/stories/foundations/layout.mdx b/storybook/stories/foundations/layout.mdx index abc0c7c4f6947..578f4e8b66e42 100644 --- a/storybook/stories/foundations/layout.mdx +++ b/storybook/stories/foundations/layout.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta } from '@storybook/blocks'; import areas from './static/areas.svg'; import pageLayoutExample1 from './static/page-layout-example-1.svg'; import pageLayoutExample2 from './static/page-layout-example-2.svg'; @@ -27,32 +27,34 @@ At the highest level admin pages are comprised of _areas_, that can be arranged Areas can be combined in different ways depending on the use case. Here are some examples.
- - - - - - - - + + + + + + + + + +
- #### Sidebar, Content Frame and Preview Frame - Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement - - A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected. - - #### Sidebar and Preview Frame - Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement - - A demonstration of this arrangement can be found in the Design section. -
- #### Sidebar and Content Frame - Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement - - A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected. - - #### Sidebar and multiple Content Frames - Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement - - Multiple content frames can be utilised as required. -
+ #### Sidebar, Content Frame and Preview Frame + Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement + + A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected. + + #### Sidebar and Preview Frame + Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement + + A demonstration of this arrangement can be found in the Design section. +
+ #### Sidebar and Content Frame + Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement + + A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected. + + #### Sidebar and multiple Content Frames + Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement + + Multiple content frames can be utilised as required. +
From cbe7ef4d597cc28f3ab0fc9c7593b9af8085aa36 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Fri, 13 Dec 2024 13:49:27 +0530 Subject: [PATCH 12/18] Refactor "Settings" panel of Date block to use ToolsPanel instead of PanelBody (#67906) Co-authored-by: Sukhendu2002 Co-authored-by: fabiankaegy --- packages/block-library/src/post-date/edit.js | 97 +++++++++++++++----- 1 file changed, 72 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 5057466c6af45..6ac39c0f14798 100644 --- a/packages/block-library/src/post-date/edit.js +++ b/packages/block-library/src/post-date/edit.js @@ -26,7 +26,8 @@ import { ToolbarGroup, ToolbarButton, ToggleControl, - PanelBody, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __, _x, sprintf } from '@wordpress/i18n'; import { edit } from '@wordpress/icons'; @@ -160,16 +161,36 @@ export default function PostDateEdit( { - - - setAttributes( { format: nextFormat } ) + { + setAttributes( { + format: undefined, + isLink: false, + displayType: 'date', + } ); + } } + > + + format !== undefined && format !== siteFormat + } + label={ __( 'Date Format' ) } + onDeselect={ () => + setAttributes( { format: undefined } ) } - /> - + + setAttributes( { format: nextFormat } ) + } + /> + + isLink !== false } label={ postType?.labels.singular_name ? sprintf( @@ -179,23 +200,49 @@ export default function PostDateEdit( { ) : __( 'Link to post' ) } - onChange={ () => setAttributes( { isLink: ! isLink } ) } - checked={ isLink } - /> - setAttributes( { isLink: false } ) } + isShownByDefault + > + + setAttributes( { isLink: ! isLink } ) + } + checked={ isLink } + /> + + displayType !== 'date' } label={ __( 'Display last modified date' ) } - onChange={ ( value ) => - setAttributes( { - displayType: value ? 'modified' : 'date', - } ) + onDeselect={ () => + setAttributes( { displayType: 'date' } ) } - checked={ displayType === 'modified' } - help={ __( - 'Only shows if the post has been modified' - ) } - /> - + isShownByDefault + > + + setAttributes( { + displayType: value ? 'modified' : 'date', + } ) + } + checked={ displayType === 'modified' } + help={ __( + 'Only shows if the post has been modified' + ) } + /> + +
{ postDate }
From 7050a44afb90ee187e2ed401ee1d99b8de2ad34f Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 13 Dec 2024 08:55:35 +0000 Subject: [PATCH 13/18] Fix: Fix link to minimal-block example plugin code. (#67888) Co-authored-by: jorgefilipecosta Co-authored-by: shail-mehta --- docs/getting-started/fundamentals/registration-of-a-block.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/fundamentals/registration-of-a-block.md b/docs/getting-started/fundamentals/registration-of-a-block.md index 5c80422f6f857..63a7a9031f72a 100644 --- a/docs/getting-started/fundamentals/registration-of-a-block.md +++ b/docs/getting-started/fundamentals/registration-of-a-block.md @@ -42,7 +42,7 @@ function minimal_block_ca6eda___register_block() { add_action( 'init', 'minimal_block_ca6eda___register_block' ); ``` -_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/index.php)_ +_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/plugin.php)_ ## Registering a block with JavaScript (client-side) From 7e85993a0be6830a398515513b8c42366cbcd2b4 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 13 Dec 2024 13:18:26 +0400 Subject: [PATCH 14/18] Plugin: Fix eligibility check for post types' default rendering mode (#67879) * Plugin: Fix eligibility check for post types' default rendering mode * Add backport changelog entry Unlinked contributors: CreativeDive. Co-authored-by: Mamaduka Co-authored-by: fabiankaegy --- backport-changelog/6.8/7129.md | 1 + lib/compat/wordpress-6.8/post.php | 9 ++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/backport-changelog/6.8/7129.md b/backport-changelog/6.8/7129.md index 90c9168cdc6f8..301f1abc45d0d 100644 --- a/backport-changelog/6.8/7129.md +++ b/backport-changelog/6.8/7129.md @@ -1,3 +1,4 @@ https://github.com/WordPress/wordpress-develop/pull/7129 * https://github.com/WordPress/gutenberg/pull/62304 +* https://github.com/WordPress/gutenberg/pull/67879 diff --git a/lib/compat/wordpress-6.8/post.php b/lib/compat/wordpress-6.8/post.php index 639e33b4e5ca5..be842d89b5151 100644 --- a/lib/compat/wordpress-6.8/post.php +++ b/lib/compat/wordpress-6.8/post.php @@ -32,15 +32,18 @@ function gutenberg_post_type_rendering_modes() { * @return array Updated array of post type arguments. */ function gutenberg_post_type_default_rendering_mode( $args, $post_type ) { - $rendering_mode = 'page' === $post_type ? 'template-locked' : 'post-only'; - $rendering_modes = gutenberg_post_type_rendering_modes(); + if ( ! wp_is_block_theme() || ! current_theme_supports( 'block-templates' ) ) { + return $args; + } // Make sure the post type supports the block editor. if ( - wp_is_block_theme() && ( isset( $args['show_in_rest'] ) && $args['show_in_rest'] ) && ( ! empty( $args['supports'] ) && in_array( 'editor', $args['supports'], true ) ) ) { + $rendering_mode = 'page' === $post_type ? 'template-locked' : 'post-only'; + $rendering_modes = gutenberg_post_type_rendering_modes(); + // Validate the supplied rendering mode. if ( isset( $args['default_rendering_mode'] ) && From 25e9753bfb4884ddcf02855f47cef3eb418eaea9 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 13 Dec 2024 10:01:50 +0000 Subject: [PATCH 15/18] [Docs] Fix: Two broken links to the packages reference API and to blocks docs (#67889) Co-authored-by: jorgefilipecosta Co-authored-by: shail-mehta --- .../fundamentals/javascript-in-the-block-editor.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md index 348b95ba88da3..7accc5d4c2129 100644 --- a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md +++ b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md @@ -38,9 +38,9 @@ The `wp-scripts` package also facilitates the use of JavaScript modules, allowin Integrating JavaScript into your WordPress projects without a build process can be the most straightforward approach in specific scenarios. This is particularly true for projects that don't leverage JSX or other advanced JavaScript features requiring compilation. -When you opt out of a build process, you interact directly with WordPress's [JavaScript APIs](/docs/reference-guides/packages/) through the global `wp` object. This means that all the methods and packages provided by WordPress are readily available, but with one caveat: you must manually manage script dependencies. This is done by adding [the handle](/docs/contributors/code/scripts.md) of each corresponding package to the dependency array of your enqueued JavaScript file. +When you opt out of a build process, you interact directly with WordPress's [JavaScript APIs](/docs/reference-guides/packages.md) through the global `wp` object. This means that all the methods and packages provided by WordPress are readily available, but with one caveat: you must manually manage script dependencies. This is done by adding [the handle](/docs/contributors/code/scripts.md) of each corresponding package to the dependency array of your enqueued JavaScript file. -For example, suppose you're creating a script that registers a new block [variation](/docs/reference-guides/block-api/block-variations.md) using the `registerBlockVariation` function from the [`blocks`](/docs/reference-guides/packages/packages-blocks.md) package. You must include `wp-blocks` in your script's dependency array. This guarantees that the `wp.blocks.registerBlockVariation` method is available and defined by the time your script executes. +For example, suppose you're creating a script that registers a new block [variation](/docs/reference-guides/block-api/block-variations.md) using the `registerBlockVariation` function from the [`blocks`](/packages/blocks/README.md) package. You must include `wp-blocks` in your script's dependency array. This guarantees that the `wp.blocks.registerBlockVariation` method is available and defined by the time your script executes. In the following example, the `wp-blocks` dependency is defined when enqueuing the `variations.js` file. From 20f41746aebc0a4c736879419ea9cb7229de08f9 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 13 Dec 2024 11:26:54 +0100 Subject: [PATCH 16/18] Create a catalog list of private APIs (#66558) * Create a catalog list of private APIs * Document some private components * Rewrite the introduction * Rewrite the introduction again --- docs/private-apis.md | 340 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 340 insertions(+) create mode 100644 docs/private-apis.md diff --git a/docs/private-apis.md b/docs/private-apis.md new file mode 100644 index 0000000000000..14c1a4aa22472 --- /dev/null +++ b/docs/private-apis.md @@ -0,0 +1,340 @@ +# Gutenberg Private APIs + +This is an overview of private APIs exposed by Gutenberg packages. These APIs are used to implement parts of the Gutenberg editor (Post Editor, Site Editor, Core blocks and others) but are not exposed publicly to plugin and theme authors or authors of custom Gutenberg integrations. + +The purpose of this document is to present a picture of how many private APIs we have and how they are used to build the Gutenberg editor apps with the libraries and frameworks provided by the family of `@wordpress/*` packages. + +## data + +The registry has two private methods: +- `privateActionsOf` +- `privateSelectorsOf` + +Every store has a private API for registering private selectors/actions: +- `privateActions` +- `registerPrivateActions` +- `privateSelectors` +- `registerPrivateSelectors` + +## blocks + +### `core/blocks` store + +Private actions: +- `addBlockBindingsSource` +- `removeBlockBindingsSource` +- `addBootstrappedBlockType` +- `addUnprocessedBlockType` + +Private selectors: +- `getAllBlockBindingsSources` +- `getBlockBindingsSource` +- `getBootstrappedBlockType` +- `getSupportedStyles` +- `getUnprocessedBlockTypes` +- `hasContentRoleAttribute` + +## components + +Private exports: +- `__experimentalPopoverLegacyPositionToPlacement` +- `ComponentsContext` +- `Tabs` +- `Theme` +- `Menu` +- `kebabCase` + +## commands + +Private exports: +- `useCommandContext` (added May 2023 in #50543) + +### `core/commands` store + +Private actions: +- `setContext` (added together with `useCommandContext`) + +## preferences + +Private exports: (added in Jan 2024 in #57639) +- `PreferenceBaseOption` +- `PreferenceToggleControl` +- `PreferencesModal` +- `PreferencesModalSection` +- `PreferencesModalTabs` + +There is only one publicly exported component! +- `PreferenceToggleMenuItem` + +## block-editor + +Private exports: +- `AdvancedPanel` +- `BackgroundPanel` +- `BorderPanel` +- `ColorPanel` +- `DimensionsPanel` +- `FiltersPanel` +- `GlobalStylesContext` +- `ImageSettingsPanel` +- `TypographyPanel` +- `areGlobalStyleConfigsEqual` +- `getBlockCSSSelector` +- `getBlockSelectors` +- `getGlobalStylesChanges` +- `getLayoutStyles` +- `toStyles` +- `useGlobalSetting` +- `useGlobalStyle` +- `useGlobalStylesOutput` +- `useGlobalStylesOutputWithConfig` +- `useGlobalStylesReset` +- `useHasBackgroundPanel` +- `useHasBorderPanel` +- `useHasBorderPanelControls` +- `useHasColorPanel` +- `useHasDimensionsPanel` +- `useHasFiltersPanel` +- `useHasImageSettingsPanel` +- `useHasTypographyPanel` +- `useSettingsForBlockElement` +- `ExperimentalBlockCanvas`: version of public `BlockCanvas` that has several extra props: `contentRef`, `shouldIframe`, `iframeProps`. +- `ExperimentalBlockEditorProvider`: version of public `BlockEditorProvider` that filters out several private/experimental settings. See also `__experimentalUpdateSettings`. +- `getDuotoneFilter` +- `getRichTextValues` +- `PrivateQuickInserter` +- `extractWords` +- `getNormalizedSearchTerms` +- `normalizeString` +- `PrivateListView` +- `ResizableBoxPopover` +- `BlockInfo` +- `useHasBlockToolbar` +- `cleanEmptyObject` +- `BlockQuickNavigation` +- `LayoutStyle` +- `BlockRemovalWarningModal` +- `useLayoutClasses` +- `useLayoutStyles` +- `DimensionsTool` +- `ResolutionTool` +- `TabbedSidebar` +- `TextAlignmentControl` +- `usesContextKey` +- `useFlashEditableBlocks` +- `useZoomOut` +- `globalStylesDataKey` +- `globalStylesLinksDataKey` +- `selectBlockPatternsKey` +- `requiresWrapperOnCopy` +- `PrivateRichText`: has an extra prop `readOnly` added in #58916 and #60327 (Feb and Mar 2024). +- `PrivateInserterLibrary`: has an extra prop `onPatternCategorySelection` added in #62130 (May 2024). +- `reusableBlocksSelectKey` +- `PrivateBlockPopover`: has two extra props, `__unstableContentRef` and `__unstablePopoverSlot`. +- `PrivatePublishDateTimePicker`: version of public `PublishDateTimePicker` that has two extra props: `isCompact` and `showPopoverHeaderActions`. +- `useSpacingSizes` +- `useBlockDisplayTitle` +- `__unstableBlockStyleVariationOverridesWithConfig` +- `setBackgroundStyleDefaults` +- `sectionRootClientIdKey` +- `__unstableCommentIconFill` +- `__unstableCommentIconToolbarFill` + +### `core/block-editor` store + +Private actions: +- `__experimentalUpdateSettings`: version of public `updateSettings` action that filters out some private/experimental settings. +- `clearBlockRemovalPrompt` +- `deleteStyleOverride` +- `ensureDefaultBlock` +- `expandBlock` +- `hideBlockInterface` +- `modifyContentLockBlock` +- `privateRemoveBlocks` +- `resetZoomLevel` +- `setBlockRemovalRules` +- `setInsertionPoint` +- `setLastFocus` +- `setOpenedBlockSettingsMenu` +- `setStyleOverride` +- `setZoomLevel` +- `showBlockInterface` +- `startDragging` +- `stopDragging` +- `stopEditingAsBlocks` + +Private selectors: +- `getAllPatterns` +- `getBlockRemovalRules` +- `getBlockSettings` +- `getBlockStyles` +- `getBlockWithoutAttributes` +- `getClosestAllowedInsertionPoint` +- `getClosestAllowedInsertionPointForPattern` +- `getContentLockingParent` +- `getEnabledBlockParents` +- `getEnabledClientIdsTree` +- `getExpandedBlock` +- `getInserterMediaCategories` +- `getInsertionPoint` +- `getLastFocus` +- `getLastInsertedBlocksClientIds` +- `getOpenedBlockSettingsMenu` +- `getParentSectionBlock` +- `getPatternBySlug` +- `getRegisteredInserterMediaCategories` +- `getRemovalPromptData` +- `getReusableBlocks` +- `getSectionRootClientId` +- `getStyleOverrides` +- `getTemporarilyEditingAsBlocks` +- `getTemporarilyEditingFocusModeToRevert` +- `getZoomLevel` +- `hasAllowedPatterns` +- `isBlockInterfaceHidden` +- `isBlockSubtreeDisabled` +- `isDragging` +- `isResolvingPatterns` +- `isSectionBlock` +- `isZoomOut` + +## core-data + +Private exports: +- `useEntityRecordsWithPermissions` + +### `core` store + +Private actions: +- `receiveRegisteredPostMeta` + +Private selectors: +- `getBlockPatternsForPostType` +- `getEntityRecordPermissions` +- `getEntityRecordsPermissions` +- `getNavigationFallbackId` +- `getRegisteredPostMeta` +- `getUndoManager` + +## patterns (package created in Aug 2023 and has no public exports, everything is private) + +Private exports: +- `OverridesPanel` +- `CreatePatternModal` +- `CreatePatternModalContents` +- `DuplicatePatternModal` +- `isOverridableBlock` +- `hasOverridableBlocks` +- `useDuplicatePatternProps` +- `RenamePatternModal` +- `PatternsMenuItems` +- `RenamePatternCategoryModal` +- `PatternOverridesControls` +- `ResetOverridesControl` +- `PatternOverridesBlockControls` +- `useAddPatternCategory` +- `PATTERN_TYPES` +- `PATTERN_DEFAULT_CATEGORY` +- `PATTERN_USER_CATEGORY` +- `EXCLUDED_PATTERN_SOURCES` +- `PATTERN_SYNC_TYPES` +- `PARTIAL_SYNCING_SUPPORTED_BLOCKS` + +### `core/patterns` store + +Private actions: +- `convertSyncedPatternToStatic` +- `createPattern` +- `createPatternFromFile` +- `setEditingPattern` + +Private selectors: +- `isEditingPattern` + +## block-library + +Private exports: +- `BlockKeyboardShortcuts` + +## router (private exports only) + +Private exports: +- `useHistory` +- `useLocation` +- `RouterProvider` + +## core-commands (private exports only) + +Private exports: +- `useCommands` + +## editor + +Private exports: +- `CreateTemplatePartModal` +- `BackButton` +- `EntitiesSavedStatesExtensible` +- `Editor` +- `EditorContentSlotFill` +- `GlobalStylesProvider` +- `mergeBaseAndUserConfigs` +- `PluginPostExcerpt` +- `PostCardPanel` +- `PreferencesModal` +- `usePostActions` +- `ToolsMoreMenuGroup` +- `ViewMoreMenuGroup` +- `ResizableEditor` +- `registerCoreBlockBindingsSources` +- `interfaceStore` +- `ActionItem` +- `ComplementaryArea` +- `ComplementaryAreaMoreMenuItem` +- `FullscreenMode` +- `InterfaceSkeleton` +- `NavigableRegion` +- `PinnedItems` + +### `core/editor` store + +Private actions: +- `createTemplate` +- `hideBlockTypes` +- `registerEntityAction` +- `registerPostTypeActions` +- `removeTemplates` +- `revertTemplate` +- `saveDirtyEntities` +- `setCurrentTemplateId` +- `setIsReady` +- `showBlockTypes` +- `unregisterEntityAction` + +Private selectors: +- `getEntityActions` +- `getInserter` +- `getInserterSidebarToggleRef` +- `getListViewToggleRef` +- `getPostBlocksByName` +- `getPostIcon` +- `hasPostMetaChanges` +- `isEntityReady` + +## edit-post + +### `core/edit-post` store + +Private selectors: +- `getEditedPostTemplateId` + +## edit-site + +### `core/edit-site` store + +Private actions: +- `registerRoute` +- `setEditorCanvasContainerView` + +Private selectors: +- `getRoutes` +- `getEditorCanvasContainerView` From d988d2817c5971775a2e340afea5a3b53c17ced0 Mon Sep 17 00:00:00 2001 From: Prasad Karmalkar Date: Fri, 13 Dec 2024 15:58:40 +0530 Subject: [PATCH 17/18] Refactor "Settings" panel of Columns block to use ToolsPanel instead of PanelBody (#67910) Co-authored-by: prasadkarmalkar Co-authored-by: fabiankaegy --- packages/block-library/src/columns/edit.js | 47 +++++++++++++++++----- 1 file changed, 36 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index f8cf0297302cc..3d5f298aef835 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -9,9 +9,10 @@ import clsx from 'clsx'; import { __ } from '@wordpress/i18n'; import { Notice, - PanelBody, RangeControl, ToggleControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { @@ -149,9 +150,22 @@ function ColumnInspectorControls( { } return ( - + { + updateColumns( count, minCount ); + setAttributes( { + isStackedOnMobile: true, + } ); + } } + > { canInsertColumnBlock && ( - <> + count } + onDeselect={ () => updateColumns( count, minCount ) } + > ) } - + ) } - + isShownByDefault + hasValue={ () => isStackedOnMobile !== true } + onDeselect={ () => setAttributes( { - isStackedOnMobile: ! isStackedOnMobile, + isStackedOnMobile: true, } ) } - /> - + > + + setAttributes( { + isStackedOnMobile: ! isStackedOnMobile, + } ) + } + /> + + ); } From d90fbad61cf2abd35f242b5d45dad4f0e4116c5a Mon Sep 17 00:00:00 2001 From: Prasad Karmalkar Date: Fri, 13 Dec 2024 16:01:03 +0530 Subject: [PATCH 18/18] Refactor "Settings" panel of Column block to use ToolsPanel instead of PanelBody (#67913) Co-authored-by: prasadkarmalkar Co-authored-by: fabiankaegy --- packages/block-library/src/column/edit.js | 40 +++++++++++++++-------- 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index a0f3cdcf65393..b88e72e8da699 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -18,8 +18,9 @@ import { } from '@wordpress/block-editor'; import { __experimentalUseCustomUnits as useCustomUnits, - PanelBody, __experimentalUnitControl as UnitControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { sprintf, __ } from '@wordpress/i18n'; @@ -30,19 +31,32 @@ function ColumnInspectorControls( { width, setAttributes } ) { availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ], } ); return ( - - { + setAttributes( { width: undefined } ); + } } + > + width !== undefined } label={ __( 'Width' ) } - __unstableInputWidth="calc(50% - 8px)" - __next40pxDefaultSize - value={ width || '' } - onChange={ ( nextWidth ) => { - nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth; - setAttributes( { width: nextWidth } ); - } } - units={ units } - /> - + onDeselect={ () => setAttributes( { width: undefined } ) } + isShownByDefault + > + { + nextWidth = + 0 > parseFloat( nextWidth ) ? '0' : nextWidth; + setAttributes( { width: nextWidth } ); + } } + units={ units } + /> + + ); }