diff --git a/bin/build-plugin-zip.sh b/bin/build-plugin-zip.sh index ad627e05f0c693..c823ca6a8017f1 100755 --- a/bin/build-plugin-zip.sh +++ b/bin/build-plugin-zip.sh @@ -78,26 +78,15 @@ npm run build php bin/generate-gutenberg-php.php > gutenberg.tmp.php mv gutenberg.tmp.php gutenberg.php -build_files=$( - ls build/*/*.{js,js.map,css,asset.php} \ - build/block-library/blocks/*.php \ - build/block-library/blocks/*/block.json \ - build/block-library/blocks/*/*.{js,js.map,css,asset.php} \ - build/edit-widgets/blocks/*/block.json \ - build/widgets/blocks/*.php \ - build/widgets/blocks/*/block.json \ - build/style-engine/*.php \ -) - - # Generate the plugin zip file. status "Creating archive... 🎁" -zip -r gutenberg.zip \ +zip --recurse-paths --no-dir-entries \ + gutenberg.zip \ gutenberg.php \ lib \ packages/block-serialization-default-parser/*.php \ post-content.php \ - $build_files \ + build \ build-module \ readme.txt \ changelog.txt \ diff --git a/docs/manifest.json b/docs/manifest.json index d7f74d47995b63..e4eba19d99fa29 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1697,12 +1697,6 @@ "markdown_source": "../packages/eslint-plugin/README.md", "parent": "packages" }, - { - "title": "@wordpress/fields", - "slug": "packages-fields", - "markdown_source": "../packages/fields/README.md", - "parent": "packages" - }, { "title": "@wordpress/format-library", "slug": "packages-format-library", diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md index bab08dc34c40c1..874a3a69096b81 100644 --- a/docs/reference-guides/slotfills/README.md +++ b/docs/reference-guides/slotfills/README.md @@ -166,7 +166,7 @@ import { __ } from '@wordpress/i18n'; */ const SiteEditorDocumentSettingPanel = () => { // Retrieve information about the current post type. - const { isViewable } = useSelect( ( select ) => { + const isViewable = useSelect( ( select ) => { const postTypeName = select( editorStore ).getCurrentPostType(); const postTypeObject = select( coreStore ).getPostType( postTypeName ); diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php index 5a14e1418ed6de..a113df02b9d758 100644 --- a/lib/experimental/script-modules.php +++ b/lib/experimental/script-modules.php @@ -200,3 +200,30 @@ function gutenberg_dequeue_module( $module_identifier ) { _deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_dequeue_script_module' ); wp_script_modules()->dequeue( $module_identifier ); } + +/** + * Registers Gutenberg Script Modules. + * + * @since 19.3 + */ +function gutenberg_register_script_modules() { + // When in production, use the plugin's version as the default asset version; + // else (for development or test) default to use the current time. + $default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time(); + + wp_deregister_script_module( '@wordpress/a11y' ); + wp_register_script_module( + '@wordpress/a11y', + gutenberg_url( 'build-module/a11y/index.min.js' ), + array(), + $default_version + ); + add_filter( + 'script_module_data_@wordpress/a11y', + function ( $data ) { + $data['i18n'] = array( 'Notifications' => __( 'Notifications', 'default' ) ); + return $data; + } + ); +} +add_action( 'init', 'gutenberg_register_script_modules' ); diff --git a/package-lock.json b/package-lock.json index 32819be602f721..49d1ad6b123b76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -245,9 +245,9 @@ "storybook-source-link": "2.0.9", "strip-json-comments": "5.0.0", "style-loader": "3.2.1", + "terser": "5.32.0", "terser-webpack-plugin": "5.3.9", "typescript": "5.5.3", - "uglify-js": "3.13.7", "uuid": "9.0.1", "webdriverio": "8.16.20", "webpack": "5.88.2", @@ -48431,10 +48431,9 @@ } }, "node_modules/terser": { - "version": "5.31.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.2.tgz", - "integrity": "sha512-LGyRZVFm/QElZHy/CPr/O4eNZOZIzsrQ92y4v9UJe/pFJjypje2yI3C2FmPtvUEnhadlSbmG2nXtdcjHOjCfxw==", - "license": "BSD-2-Clause", + "version": "5.32.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.32.0.tgz", + "integrity": "sha512-v3Gtw3IzpBJ0ugkxEX8U0W6+TnPKRRCWGh1jC/iM/e3Ki5+qvO1L1EAZ56bZasc64aXHwRHNIQEzm6//i5cemQ==", "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -49267,6 +49266,7 @@ "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.7.tgz", "integrity": "sha512-1Psi2MmnZJbnEsgJJIlfnd7tFlJfitusmR7zDI8lXlFI0ACD4/Rm/xdrU8bh6zF0i74aiVoBtkRiFulkrmh3AA==", "dev": true, + "optional": true, "bin": { "uglifyjs": "bin/uglifyjs" }, @@ -53933,6 +53933,7 @@ "@wordpress/deprecated": "file:../deprecated", "@wordpress/dom": "file:../dom", "@wordpress/element": "file:../element", + "@wordpress/fields": "file:../fields", "@wordpress/hooks": "file:../hooks", "@wordpress/html-entities": "file:../html-entities", "@wordpress/i18n": "file:../i18n", @@ -54194,7 +54195,27 @@ "version": "0.0.1", "license": "GPL-2.0-or-later", "dependencies": { - "@babel/runtime": "^7.16.0" + "@babel/runtime": "^7.16.0", + "@wordpress/blob": "file:../blob", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/dataviews": "file:../dataviews", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/notices": "file:../notices", + "@wordpress/patterns": "file:../patterns", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/url": "file:../url", + "@wordpress/warning": "file:../warning", + "change-case": "4.1.2", + "client-zip": "^2.4.5" }, "engines": { "node": ">=18.12.0", @@ -68738,6 +68759,7 @@ "@wordpress/deprecated": "file:../deprecated", "@wordpress/dom": "file:../dom", "@wordpress/element": "file:../element", + "@wordpress/fields": "file:../fields", "@wordpress/hooks": "file:../hooks", "@wordpress/html-entities": "file:../html-entities", "@wordpress/i18n": "file:../i18n", @@ -68919,7 +68941,27 @@ "@wordpress/fields": { "version": "file:packages/fields", "requires": { - "@babel/runtime": "^7.16.0" + "@babel/runtime": "^7.16.0", + "@wordpress/blob": "file:../blob", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/dataviews": "file:../dataviews", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/notices": "file:../notices", + "@wordpress/patterns": "file:../patterns", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/url": "file:../url", + "@wordpress/warning": "file:../warning", + "change-case": "4.1.2", + "client-zip": "^2.4.5" } }, "@wordpress/format-library": { @@ -93531,9 +93573,9 @@ } }, "terser": { - "version": "5.31.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.2.tgz", - "integrity": "sha512-LGyRZVFm/QElZHy/CPr/O4eNZOZIzsrQ92y4v9UJe/pFJjypje2yI3C2FmPtvUEnhadlSbmG2nXtdcjHOjCfxw==", + "version": "5.32.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.32.0.tgz", + "integrity": "sha512-v3Gtw3IzpBJ0ugkxEX8U0W6+TnPKRRCWGh1jC/iM/e3Ki5+qvO1L1EAZ56bZasc64aXHwRHNIQEzm6//i5cemQ==", "requires": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -94155,7 +94197,8 @@ "version": "3.13.7", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.7.tgz", "integrity": "sha512-1Psi2MmnZJbnEsgJJIlfnd7tFlJfitusmR7zDI8lXlFI0ACD4/Rm/xdrU8bh6zF0i74aiVoBtkRiFulkrmh3AA==", - "dev": true + "dev": true, + "optional": true }, "unbox-primitive": { "version": "1.0.2", diff --git a/package.json b/package.json index 29e5f10b6f7a50..46d2b42f267abb 100644 --- a/package.json +++ b/package.json @@ -257,9 +257,9 @@ "storybook-source-link": "2.0.9", "strip-json-comments": "5.0.0", "style-loader": "3.2.1", + "terser": "5.32.0", "terser-webpack-plugin": "5.3.9", "typescript": "5.5.3", - "uglify-js": "3.13.7", "uuid": "9.0.1", "webdriverio": "8.16.20", "webpack": "5.88.2", diff --git a/packages/a11y/README.md b/packages/a11y/README.md index 0f40d9edd010ed..755396d2bb8f09 100644 --- a/packages/a11y/README.md +++ b/packages/a11y/README.md @@ -39,7 +39,7 @@ speak( 'The message you want to send to the ARIA live region', 'assertive' ); _Parameters_ - _message_ `string`: The message to be announced by assistive technologies. -- _ariaLive_ `[string]`: The politeness level for aria-live; default: 'polite'. +- _ariaLive_ `['polite'|'assertive']`: The politeness level for aria-live; default: 'polite'. diff --git a/packages/a11y/package.json b/packages/a11y/package.json index 88123b3c6c7126..327d6b9ff07167 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -28,6 +28,7 @@ "module": "build-module/index.js", "react-native": "src/index", "types": "build-types", + "wpScriptModuleExports": "./build-module/module/index.js", "dependencies": { "@babel/runtime": "^7.16.0", "@wordpress/dom-ready": "file:../dom-ready", diff --git a/packages/a11y/src/index.js b/packages/a11y/src/index.js index 957c76500c4344..59e93da780bd81 100644 --- a/packages/a11y/src/index.js +++ b/packages/a11y/src/index.js @@ -2,87 +2,20 @@ * WordPress dependencies */ import domReady from '@wordpress/dom-ready'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import addIntroText from './add-intro-text'; -import addContainer from './add-container'; -import clear from './clear'; -import filterMessage from './filter-message'; +import { makeSetupFunction } from './shared/index'; +export { speak } from './shared/index'; /** * Create the live regions. */ -export function setup() { - const introText = document.getElementById( 'a11y-speak-intro-text' ); - const containerAssertive = document.getElementById( - 'a11y-speak-assertive' - ); - const containerPolite = document.getElementById( 'a11y-speak-polite' ); - - if ( introText === null ) { - addIntroText(); - } - - if ( containerAssertive === null ) { - addContainer( 'assertive' ); - } - - if ( containerPolite === null ) { - addContainer( 'polite' ); - } -} +export const setup = makeSetupFunction( __( 'Notifications' ) ); /** * Run setup on domReady. */ domReady( setup ); - -/** - * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions. - * This module is inspired by the `speak` function in `wp-a11y.js`. - * - * @param {string} message The message to be announced by assistive technologies. - * @param {string} [ariaLive] The politeness level for aria-live; default: 'polite'. - * - * @example - * ```js - * import { speak } from '@wordpress/a11y'; - * - * // For polite messages that shouldn't interrupt what screen readers are currently announcing. - * speak( 'The message you want to send to the ARIA live region' ); - * - * // For assertive messages that should interrupt what screen readers are currently announcing. - * speak( 'The message you want to send to the ARIA live region', 'assertive' ); - * ``` - */ -export function speak( message, ariaLive ) { - /* - * Clear previous messages to allow repeated strings being read out and hide - * the explanatory text from assistive technologies. - */ - clear(); - - message = filterMessage( message ); - - const introText = document.getElementById( 'a11y-speak-intro-text' ); - const containerAssertive = document.getElementById( - 'a11y-speak-assertive' - ); - const containerPolite = document.getElementById( 'a11y-speak-polite' ); - - if ( containerAssertive && ariaLive === 'assertive' ) { - containerAssertive.textContent = message; - } else if ( containerPolite ) { - containerPolite.textContent = message; - } - - /* - * Make the explanatory text available to assistive technologies by removing - * the 'hidden' HTML attribute. - */ - if ( introText ) { - introText.removeAttribute( 'hidden' ); - } -} diff --git a/packages/a11y/src/index.native.js b/packages/a11y/src/index.native.js index f6f53b6343adb0..e17597a8b2747d 100644 --- a/packages/a11y/src/index.native.js +++ b/packages/a11y/src/index.native.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import filterMessage from './filter-message'; +import filterMessage from './shared/filter-message'; /** * Update the ARIA live notification area text node. diff --git a/packages/a11y/src/module/index.ts b/packages/a11y/src/module/index.ts new file mode 100644 index 00000000000000..a2c87f397f4875 --- /dev/null +++ b/packages/a11y/src/module/index.ts @@ -0,0 +1,25 @@ +/** + * Internal dependencies + */ +import { makeSetupFunction } from '../shared/index'; +export { speak } from '../shared/index'; + +// Without an i18n Script Module, "Notifications" (the only localized text used in this module) +// will be translated on the server and provided as script-module data. +let notificationsText = 'Notifications'; +try { + const textContent = document.getElementById( + 'wp-script-module-data-@wordpress/a11y' + )?.textContent; + if ( textContent ) { + const parsed = JSON.parse( textContent ); + notificationsText = parsed?.i18n?.Notifications ?? notificationsText; + } +} catch {} + +/** + * Create the live regions. + */ +export const setup = makeSetupFunction( notificationsText ); + +setup(); diff --git a/packages/a11y/src/add-container.js b/packages/a11y/src/shared/add-container.js similarity index 100% rename from packages/a11y/src/add-container.js rename to packages/a11y/src/shared/add-container.js diff --git a/packages/a11y/src/add-intro-text.js b/packages/a11y/src/shared/add-intro-text.ts similarity index 83% rename from packages/a11y/src/add-intro-text.js rename to packages/a11y/src/shared/add-intro-text.ts index 2bcf453ec44c8e..6bd97c887664d3 100644 --- a/packages/a11y/src/add-intro-text.js +++ b/packages/a11y/src/shared/add-intro-text.ts @@ -1,22 +1,18 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - /** * Build the explanatory text to be placed before the aria live regions. * * This text is initially hidden from assistive technologies by using a `hidden` * HTML attribute which is then removed once a message fills the aria-live regions. * + * @param {string} introTextContent The translated intro text content. * @return {HTMLParagraphElement} The explanatory text HTML element. */ -export default function addIntroText() { +export default function addIntroText( introTextContent: string ) { const introText = document.createElement( 'p' ); introText.id = 'a11y-speak-intro-text'; introText.className = 'a11y-speak-intro-text'; - introText.textContent = __( 'Notifications' ); + introText.textContent = introTextContent; introText.setAttribute( 'style', diff --git a/packages/a11y/src/clear.js b/packages/a11y/src/shared/clear.js similarity index 100% rename from packages/a11y/src/clear.js rename to packages/a11y/src/shared/clear.js diff --git a/packages/a11y/src/filter-message.js b/packages/a11y/src/shared/filter-message.js similarity index 100% rename from packages/a11y/src/filter-message.js rename to packages/a11y/src/shared/filter-message.js diff --git a/packages/a11y/src/shared/index.js b/packages/a11y/src/shared/index.js new file mode 100644 index 00000000000000..a05f891f428561 --- /dev/null +++ b/packages/a11y/src/shared/index.js @@ -0,0 +1,81 @@ +/** + * Internal dependencies + */ +import addContainer from './add-container'; +import addIntroText from './add-intro-text'; +import clear from './clear'; +import filterMessage from './filter-message'; + +/** + * Create the live regions. + * @param {string} introTextContent The intro text content. + */ +export function makeSetupFunction( introTextContent ) { + return function setup() { + const introText = document.getElementById( 'a11y-speak-intro-text' ); + const containerAssertive = document.getElementById( + 'a11y-speak-assertive' + ); + const containerPolite = document.getElementById( 'a11y-speak-polite' ); + + if ( introText === null ) { + addIntroText( introTextContent ); + } + + if ( containerAssertive === null ) { + addContainer( 'assertive' ); + } + + if ( containerPolite === null ) { + addContainer( 'polite' ); + } + }; +} + +/** + * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions. + * This module is inspired by the `speak` function in `wp-a11y.js`. + * + * @param {string} message The message to be announced by assistive technologies. + * @param {'polite'|'assertive'} [ariaLive] The politeness level for aria-live; default: 'polite'. + * + * @example + * ```js + * import { speak } from '@wordpress/a11y'; + * + * // For polite messages that shouldn't interrupt what screen readers are currently announcing. + * speak( 'The message you want to send to the ARIA live region' ); + * + * // For assertive messages that should interrupt what screen readers are currently announcing. + * speak( 'The message you want to send to the ARIA live region', 'assertive' ); + * ``` + */ +export function speak( message, ariaLive ) { + /* + * Clear previous messages to allow repeated strings being read out and hide + * the explanatory text from assistive technologies. + */ + clear(); + + message = filterMessage( message ); + + const introText = document.getElementById( 'a11y-speak-intro-text' ); + const containerAssertive = document.getElementById( + 'a11y-speak-assertive' + ); + const containerPolite = document.getElementById( 'a11y-speak-polite' ); + + if ( containerAssertive && ariaLive === 'assertive' ) { + containerAssertive.textContent = message; + } else if ( containerPolite ) { + containerPolite.textContent = message; + } + + /* + * Make the explanatory text available to assistive technologies by removing + * the 'hidden' HTML attribute. + */ + if ( introText ) { + introText.removeAttribute( 'hidden' ); + } +} diff --git a/packages/a11y/src/test/add-container.test.js b/packages/a11y/src/shared/test/add-container.test.js similarity index 100% rename from packages/a11y/src/test/add-container.test.js rename to packages/a11y/src/shared/test/add-container.test.js diff --git a/packages/a11y/src/test/clear.test.js b/packages/a11y/src/shared/test/clear.test.js similarity index 100% rename from packages/a11y/src/test/clear.test.js rename to packages/a11y/src/shared/test/clear.test.js diff --git a/packages/a11y/src/test/filter-message.test.js b/packages/a11y/src/shared/test/filter-message.test.js similarity index 100% rename from packages/a11y/src/test/filter-message.test.js rename to packages/a11y/src/shared/test/filter-message.test.js diff --git a/packages/a11y/src/test/index.test.js b/packages/a11y/src/test/index.test.js index 4815baa2205047..0f6b9d0bd572ed 100644 --- a/packages/a11y/src/test/index.test.js +++ b/packages/a11y/src/test/index.test.js @@ -7,10 +7,10 @@ import domReady from '@wordpress/dom-ready'; * Internal dependencies */ import { setup, speak } from '../'; -import clear from '../clear'; -import filterMessage from '../filter-message'; +import clear from '../shared/clear'; +import filterMessage from '../shared/filter-message'; -jest.mock( '../clear', () => { +jest.mock( '../shared/clear', () => { return jest.fn(); } ); jest.mock( '@wordpress/dom-ready', () => { @@ -18,7 +18,7 @@ jest.mock( '@wordpress/dom-ready', () => { callback(); } ); } ); -jest.mock( '../filter-message', () => { +jest.mock( '../shared/filter-message', () => { return jest.fn( ( message ) => { return message; } ); diff --git a/packages/babel-preset-default/bin/index.js b/packages/babel-preset-default/bin/index.js index 54c35564d43d74..0e0e66b450c1d6 100755 --- a/packages/babel-preset-default/bin/index.js +++ b/packages/babel-preset-default/bin/index.js @@ -4,7 +4,7 @@ * External dependencies */ const builder = require( 'core-js-builder' ); -const { minify } = require( 'uglify-js' ); +const { minify } = require( 'terser' ); const { writeFile } = require( 'fs' ).promises; builder( { @@ -18,15 +18,15 @@ builder( { targets: require( '@wordpress/browserslist-config' ), filename: './build/polyfill.js', } ) - .then( async ( code ) => { - const output = minify( code, { + .then( ( code ) => + minify( code, { output: { comments: ( node, comment ) => - comment.value.indexOf( 'License' ) >= 0, + comment.value.toLowerCase().includes( 'license' ), }, - } ); - await writeFile( './build/polyfill.min.js', output.code ); - } ) + } ) + ) + .then( ( output ) => writeFile( './build/polyfill.min.js', output.code ) ) .catch( ( error ) => { // eslint-disable-next-line no-console console.log( error ); diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js index bb6edd066f06f1..1944cfde96c7f3 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useRefEffect } from '@wordpress/compose'; /** @@ -16,6 +16,10 @@ import { unlock } from '../../../lock-unlock'; * @param {string} clientId Block client ID. */ export function useZoomOutModeExit( { editorMode } ) { + const getSettings = useSelect( + ( select ) => select( blockEditorStore ).getSettings + ); + const { __unstableSetEditorMode } = unlock( useDispatch( blockEditorStore ) ); @@ -29,6 +33,14 @@ export function useZoomOutModeExit( { editorMode } ) { function onDoubleClick( event ) { if ( ! event.defaultPrevented ) { event.preventDefault(); + + const { __experimentalSetIsInserterOpened } = getSettings(); + + if ( + typeof __experimentalSetIsInserterOpened === 'function' + ) { + __experimentalSetIsInserterOpened( false ); + } __unstableSetEditorMode( 'edit' ); } } diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js index 0d3df9e20dfc54..a3c46c4b4c970a 100644 --- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js +++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js @@ -31,7 +31,12 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) { getPreviousBlockClientId, canRemoveBlock, canMoveBlock, + getSettings, } = select( blockEditorStore ); + + const { __experimentalSetIsInserterOpened: setIsInserterOpened } = + getSettings(); + const { getBlockType } = select( blocksStore ); const { name } = getBlock( clientId ); const blockType = getBlockType( name ); @@ -63,6 +68,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) { isPrevBlockTemplatePart, canRemove: canRemoveBlock( clientId ), canMove: canMoveBlock( clientId ), + setIsInserterOpened, }; }, [ clientId ] @@ -75,6 +81,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) { isPrevBlockTemplatePart, canRemove, canMove, + setIsInserterOpened, } = selected; const { removeBlock, __unstableSetEditorMode } = @@ -132,6 +139,10 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) { icon={ edit } label={ __( 'Edit' ) } onClick={ () => { + // Setting may be undefined. + if ( typeof setIsInserterOpened === 'function' ) { + setIsInserterOpened( false ); + } __unstableSetEditorMode( 'edit' ); __unstableContentRef.current?.focus(); } } diff --git a/packages/block-editor/src/components/grid/grid-item-resizer.js b/packages/block-editor/src/components/grid/grid-item-resizer.js index da3eb824fe92e5..1277ac2a239531 100644 --- a/packages/block-editor/src/components/grid/grid-item-resizer.js +++ b/packages/block-editor/src/components/grid/grid-item-resizer.js @@ -73,8 +73,8 @@ function GridItemResizerInner( { }, [ blockElement, rootBlockElement ] ); const justification = { - right: 'flex-start', - left: 'flex-end', + right: 'left', + left: 'right', }; const alignment = { diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 289acecb5c1c33..e772a67a131388 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -155,15 +155,6 @@ $block-inserter-tabs-height: 44px; text-align: right; } -.block-editor-inserter__manage-reusable-blocks-container { - margin: auto $grid-unit-20 $grid-unit-20; -} - -.block-editor-inserter__manage-reusable-blocks { - justify-content: center; - width: 100%; -} - .block-editor-inserter__no-results, .block-editor-inserter__patterns-loading { padding: $grid-unit-40; diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js index 6886670f541155..6ca143d14706ac 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/index.js +++ b/packages/block-editor/src/components/spacing-sizes-control/index.js @@ -7,7 +7,7 @@ import { __experimentalVStack as VStack, } from '@wordpress/components'; import { useState } from '@wordpress/element'; -import { __, _x, sprintf } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies @@ -15,7 +15,7 @@ import { __, _x, sprintf } from '@wordpress/i18n'; import AxialInputControls from './input-controls/axial'; import SeparatedInputControls from './input-controls/separated'; import SingleInputControl from './input-controls/single'; -import SidesDropdown from './sides-dropdown'; +import LinkedButton from './linked-button'; import useSpacingSizes from './hooks/use-spacing-sizes'; import { ALL_SIDES, @@ -47,6 +47,10 @@ export default function SpacingSizesControl( { const [ view, setView ] = useState( getInitialView( inputValues, sides ) ); + const toggleLinked = () => { + setView( view === VIEWS.axial ? VIEWS.custom : VIEWS.axial ); + }; + const handleOnChange = ( nextValue ) => { const newValues = { ...values, ...nextValue }; onChange( newValues ); @@ -91,12 +95,6 @@ export default function SpacingSizesControl( { sideLabel ).trim(); - const dropdownLabelText = sprintf( - // translators: %s: The current spacing property e.g. "Padding", "Margin". - _x( '%s options', 'Button label to reveal side configuration options' ), - labelProp - ); - return (
@@ -107,11 +105,10 @@ export default function SpacingSizesControl( { { label } { ! hasOneSide && ! hasOnlyAxialSides && ( - ) } diff --git a/packages/block-editor/src/components/spacing-sizes-control/linked-button.js b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js new file mode 100644 index 00000000000000..e9ca68aaa2b31d --- /dev/null +++ b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { Button, Tooltip } from '@wordpress/components'; +import { link, linkOff } from '@wordpress/icons'; +import { __, sprintf } from '@wordpress/i18n'; + +export default function LinkedButton( { isLinked, ...props } ) { + const label = isLinked + ? sprintf( + // translators: 1. Type of spacing being modified (padding, margin, etc). + __( 'Unlink %1$s' ), + props.label.toLowerCase() + ).trim() + : sprintf( + // translators: 1. Type of spacing being modified (padding, margin, etc). + __( 'Link %1$s' ), + props.label.toLowerCase() + ).trim(); + + return ( + + ); diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 2e045ad7329428..a838b95258ca6a 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -22,6 +22,7 @@ import PostPublishButtonOrToggle from '../post-publish-button/post-publish-butto import PostSavedState from '../post-saved-state'; import PostViewLink from '../post-view-link'; import PreviewDropdown from '../preview-dropdown'; +import ZoomOutToggle from '../zoom-out-toggle'; import { store as editorStore } from '../../store'; const toolbarVariations = { @@ -48,6 +49,9 @@ function Header( { title, icon, } ) { + const zoomOutExperimentEnabled = + window.__experimentalEnableZoomOutExperiment; + const isWideViewport = useViewportMatch( 'large' ); const isLargeViewport = useViewportMatch( 'medium' ); const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' ); @@ -142,9 +146,13 @@ function Header( { forceIsAutosaveable={ forceIsDirty } /> + + { zoomOutExperimentEnabled && } + { ( isWideViewport || ! showIconLabels ) && ( ) } + { ! customSaveButton && ( ) } + { customSaveButton } diff --git a/packages/editor/src/components/post-excerpt/panel.js b/packages/editor/src/components/post-excerpt/panel.js index 9a37e9134775aa..9c09796f467040 100644 --- a/packages/editor/src/components/post-excerpt/panel.js +++ b/packages/editor/src/components/post-excerpt/panel.js @@ -198,9 +198,7 @@ function PrivateExcerpt() { ref={ setPopoverAnchor } renderToggle={ ( { onToggle } ) => ( ) }