From bbf0816cc36409b84df0710f022ce4e28c66a1cc Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Tue, 4 Jun 2024 07:41:45 +0200 Subject: [PATCH 01/14] Script Modules: Adjust data filter name and script tag ID (#62170) Update the Script Module data filter name and script tag ID to align with Core changes. See https://github.com/WordPress/wordpress-develop/pull/6682. Co-authored-by: sirreal Co-authored-by: gziolo --- lib/experimental/script-modules.php | 10 +++++----- packages/interactivity/src/store.ts | 4 +++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php index a9d5540e56dc55..709ab322f63a3e 100644 --- a/lib/experimental/script-modules.php +++ b/lib/experimental/script-modules.php @@ -205,10 +205,10 @@ function gutenberg_dequeue_module( $module_identifier ) { * This embeds data in the page HTML so that it is available on page load. * * Data can be associated with a given Script Module by using the - * `scriptmoduledata_{$module_id}` filter. + * `script_module_data_{$module_id}` filter. * * The data for a given Script Module will be JSON serialized in a script tag with an ID - * like `wp-scriptmodule-data_{$module_id}`. + * like `wp-script-module-data-{$module_id}`. */ function gutenberg_print_script_module_data(): void { $get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' ); @@ -236,14 +236,14 @@ function gutenberg_print_script_module_data(): void { * If the filter returns no data (an empty array), nothing will be embedded in the page. * * The data for a given Script Module, if provided, will be JSON serialized in a script tag - * with an ID like `wp-scriptmodule-data_{$module_id}`. + * with an ID like `wp-script-module-data-{$module_id}`. * * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that * the data is associated with. * * @param array $data The data that should be associated with the array. */ - $data = apply_filters( "scriptmoduledata_{$module_id}", array() ); + $data = apply_filters( "script_module_data_{$module_id}", array() ); if ( is_array( $data ) && ! empty( $data ) ) { /* @@ -281,7 +281,7 @@ function gutenberg_print_script_module_data(): void { wp_json_encode( $data, $json_encode_flags ), array( 'type' => 'application/json', - 'id' => "wp-scriptmodule-data_{$module_id}", + 'id' => "wp-script-module-data-{$module_id}", ) ); } diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts index f6366283d2d6a9..281a6c266021e1 100644 --- a/packages/interactivity/src/store.ts +++ b/packages/interactivity/src/store.ts @@ -321,7 +321,9 @@ export function store( export const parseInitialData = ( dom = document ) => { const jsonDataScriptTag = // Preferred Script Module data passing form - dom.getElementById( 'wp-scriptmodule-data_@wordpress/interactivity' ) ?? + dom.getElementById( + 'wp-script-module-data-@wordpress/interactivity' + ) ?? // Legacy form dom.getElementById( 'wp-interactivity-data' ); if ( jsonDataScriptTag?.textContent ) { From dbf201449e9736f672b61e422787d47659db327a Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Tue, 4 Jun 2024 09:55:29 +0200 Subject: [PATCH 02/14] Update URL to uppercase. (#62231) --- .../src/components/link-control/search-input.js | 2 +- test/e2e/specs/editor/blocks/links.spec.js | 6 +++--- test/e2e/specs/editor/various/block-bindings.spec.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index 238b2d6b3acc7c..78730463389e26 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -125,7 +125,7 @@ const LinkControlSearchInput = forwardRef( className={ className } value={ value } onChange={ onInputChange } - placeholder={ placeholder ?? __( 'Search or type url' ) } + placeholder={ placeholder ?? __( 'Search or type URL' ) } __experimentalRenderSuggestions={ showSuggestions ? handleRenderSuggestions : null } diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js index 5686eaed0c83e5..02400fe9c9dd8a 100644 --- a/test/e2e/specs/editor/blocks/links.spec.js +++ b/test/e2e/specs/editor/blocks/links.spec.js @@ -235,7 +235,7 @@ test.describe( 'Links', () => { // Change the URL. // getByPlaceholder required in order to handle Link Control component // managing focus onto other inputs within the control. - await page.getByPlaceholder( 'Search or type url' ).fill( '' ); + await page.getByPlaceholder( 'Search or type URL' ).fill( '' ); await page.keyboard.type( '/handbook' ); // Submit the link. @@ -349,7 +349,7 @@ test.describe( 'Links', () => { // Change the URL. // getByPlaceholder required in order to handle Link Control component // managing focus onto other inputs within the control. - await page.getByPlaceholder( 'Search or type url' ).fill( '' ); + await page.getByPlaceholder( 'Search or type URL' ).fill( '' ); await page.keyboard.type( '/handbook' ); // Submit the link. @@ -679,7 +679,7 @@ test.describe( 'Links', () => { // Change the URL. // Note: getByPlaceholder required in order to handle Link Control component // managing focus onto other inputs within the control. - await linkPopover.getByPlaceholder( 'Search or type url' ).fill( '' ); + await linkPopover.getByPlaceholder( 'Search or type URL' ).fill( '' ); await page.keyboard.type( 'wordpress.org' ); // Save the link. diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js index 87e5b2f2e10b11..be5c7594b46dad 100644 --- a/test/e2e/specs/editor/various/block-bindings.spec.js +++ b/test/e2e/specs/editor/various/block-bindings.spec.js @@ -2044,7 +2044,7 @@ test.describe( 'Block bindings', () => { .getByRole( 'button', { name: 'Edit link', exact: true } ) .click(); await page - .getByPlaceholder( 'Search or type url' ) + .getByPlaceholder( 'Search or type URL' ) .fill( '#url-custom-field-modified' ); await pageUtils.pressKeys( 'Enter' ); @@ -2103,7 +2103,7 @@ test.describe( 'Block bindings', () => { .getByRole( 'button', { name: 'Edit link', exact: true } ) .click(); await page - .getByPlaceholder( 'Search or type url' ) + .getByPlaceholder( 'Search or type URL' ) .fill( imageCustomFieldSrc ); await pageUtils.pressKeys( 'Enter' ); From fd7becb30991469b0dc7784be4ca5796a4dcd9f9 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 4 Jun 2024 10:07:23 +0100 Subject: [PATCH 03/14] Update sidebar title + icon + site title alignment (#62191) * Update sidebar title + icon alignement * Fix alignment between sidebar title and site title * revert alignment, adjust padding Co-authored-by: jameskoster Co-authored-by: richtabor Co-authored-by: t-hamano --- .../edit-site/src/components/sidebar-navigation-screen/index.js | 2 +- .../src/components/sidebar-navigation-screen/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index 19e3335f9ff060..417e643bb8b04d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -76,7 +76,7 @@ export default function SidebarNavigationScreen( { justify="flex-start" > diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index bf6b79d151d595..7691f9ba2cdb0b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -67,8 +67,8 @@ .edit-site-sidebar-navigation-screen__title { flex-grow: 1; - padding: $grid-unit-15 * 0.5 0 0 0; overflow-wrap: break-word; + padding: $grid-unit-05 * 0.5 0 0 0; } .edit-site-sidebar-navigation-screen__actions { From 5e51181b8e4cac362daa14a5ac53cf73f2cd16ad Mon Sep 17 00:00:00 2001 From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com> Date: Tue, 4 Jun 2024 12:01:59 +0200 Subject: [PATCH 04/14] Remove unused `syncDerivedUpdates` action (#62229) * Remove `syncDerivedUpdates` function * Remove `syncDerivedUpdates` mention * Remove unused `undoIgnoreBlocks` --- .../src/components/provider/use-block-sync.js | 6 ---- .../block-editor/src/store/private-actions.js | 29 ------------------- .../block-editor/src/store/undo-ignore.js | 4 --- 3 files changed, 39 deletions(-) delete mode 100644 packages/block-editor/src/store/undo-ignore.js diff --git a/packages/block-editor/src/components/provider/use-block-sync.js b/packages/block-editor/src/components/provider/use-block-sync.js index 300c108a70cf1a..4e9cc9784554f5 100644 --- a/packages/block-editor/src/components/provider/use-block-sync.js +++ b/packages/block-editor/src/components/provider/use-block-sync.js @@ -9,7 +9,6 @@ import { cloneBlock } from '@wordpress/blocks'; * Internal dependencies */ import { store as blockEditorStore } from '../../store'; -import { undoIgnoreBlocks } from '../../store/undo-ignore'; const noop = () => {}; @@ -274,10 +273,6 @@ export default function useBlockSync( { const updateParent = isPersistent ? onChangeRef.current : onInputRef.current; - const undoIgnore = undoIgnoreBlocks.has( blocks ); - if ( undoIgnore ) { - undoIgnoreBlocks.delete( blocks ); - } updateParent( blocks, { selection: { selectionStart: getSelectionStart(), @@ -285,7 +280,6 @@ export default function useBlockSync( { initialPosition: getSelectedBlocksInitialCaretPosition(), }, - undoIgnore, } ); } previousAreBlocksDifferent = areBlocksDifferent; diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 28a7b1da98f73f..5e4e0c7a222b0b 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -6,7 +6,6 @@ import { Platform } from '@wordpress/element'; /** * Internal dependencies */ -import { undoIgnoreBlocks } from './undo-ignore'; import { store as blockEditorStore } from './index'; import { unlock } from '../lock-unlock'; @@ -292,34 +291,6 @@ export function deleteStyleOverride( id ) { }; } -/** - * A higher-order action that mark every change inside a callback as "non-persistent" - * and ignore pushing to the undo history stack. It's primarily used for synchronized - * derived updates from the block editor without affecting the undo history. - * - * @param {() => void} callback The synchronous callback to derive updates. - */ -export function syncDerivedUpdates( callback ) { - return ( { dispatch, select, registry } ) => { - registry.batch( () => { - // Mark every change in the `callback` as non-persistent. - dispatch( { - type: 'SET_EXPLICIT_PERSISTENT', - isPersistentChange: false, - } ); - callback(); - dispatch( { - type: 'SET_EXPLICIT_PERSISTENT', - isPersistentChange: undefined, - } ); - - // Ignore pushing undo stack for the updated blocks. - const updatedBlocks = select.getBlocks(); - undoIgnoreBlocks.add( updatedBlocks ); - } ); - }; -} - /** * Action that sets the element that had focus when focus leaves the editor canvas. * diff --git a/packages/block-editor/src/store/undo-ignore.js b/packages/block-editor/src/store/undo-ignore.js deleted file mode 100644 index f0a64428ea7c26..00000000000000 --- a/packages/block-editor/src/store/undo-ignore.js +++ /dev/null @@ -1,4 +0,0 @@ -// Keep track of the blocks that should not be pushing an additional -// undo stack when editing the entity. -// See the implementation of `syncDerivedUpdates` and `useBlockSync`. -export const undoIgnoreBlocks = new WeakSet(); From 503bd62fce6a60449b2d15cf8ae83110ac396316 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 4 Jun 2024 12:12:41 +0200 Subject: [PATCH 05/14] [Mobile] - Unsupported block - UI improvements (#62240) * Mobile - Unsupported block editor - Update editor style overrides * Mobile - Unsupported block - Update UI to show Tap to edit for unsupported blocks, simplifying the flow to open the Unsupported block editor * Fix unsupported block condition * Update snapshot * Fix condition for the help icon --- .../block-library/src/missing/edit.native.js | 50 +++++-- .../test/__snapshots__/edit.native.js.snap | 136 ++++++++++-------- .../editor-style-overrides.css | 27 +++- 3 files changed, 141 insertions(+), 72 deletions(-) diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js index 7432f5fae0f12f..950d9afaaebf39 100644 --- a/packages/block-library/src/missing/edit.native.js +++ b/packages/block-library/src/missing/edit.native.js @@ -1,12 +1,7 @@ /** * External dependencies */ -import { - View, - Text, - TouchableWithoutFeedback, - TouchableOpacity, -} from 'react-native'; +import { View, Text, TouchableOpacity } from 'react-native'; /** * WordPress dependencies @@ -25,6 +20,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { store as noticesStore } from '@wordpress/notices'; +import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge'; /** * Internal dependencies @@ -48,11 +44,38 @@ export class UnsupportedBlockEdit extends Component { } toggleSheet() { + const { attributes, block, clientId } = this.props; + const { originalName } = attributes; + const title = this.getTitle(); + const blockContent = serialize( block ? [ block ] : [] ); + + if ( this.canEditUnsupportedBlock() ) { + requestUnsupportedBlockFallback( + blockContent, + clientId, + originalName, + title + ); + return; + } + this.setState( { showHelp: ! this.state.showHelp, } ); } + canEditUnsupportedBlock() { + const { + canEnableUnsupportedBlockEditor, + isUnsupportedBlockEditorSupported, + } = this.props; + + return ( + ! canEnableUnsupportedBlockEditor && + isUnsupportedBlockEditorSupported + ); + } + closeSheet() { this.setState( { showHelp: false, @@ -186,7 +209,11 @@ export class UnsupportedBlockEdit extends Component { ); const subtitle = ( - { __( 'Unsupported' ) } + + { this.canEditUnsupportedBlock() + ? __( 'Tap to edit' ) + : __( 'Unsupported' ) } + ); const icon = blockType @@ -198,8 +225,8 @@ export class UnsupportedBlockEdit extends Component { ); const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme; return ( - - { this.renderHelpIcon() } + { ! this.canEditUnsupportedBlock() && + this.renderHelpIcon() } - + ); } } diff --git a/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap index 245410a5c5d570..2ac371120be4bd 100644 --- a/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap @@ -9,12 +9,21 @@ exports[`Missing block renders without crashing 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": true, + "disabled": undefined, "expanded": undefined, "selected": undefined, } } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } accessible={true} + collapsable={false} focusable={true} onClick={[Function]} onResponderGrant={[Function]} @@ -23,72 +32,79 @@ exports[`Missing block renders without crashing 1`] = ` onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} + style={ + { + "opacity": 1, + } + } > - + - - Path - - - - - Path - + + Path + + + + + Path + + + missing/block/title + + - missing/block/title + Unsupported - - Unsupported - `; diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css index 484cdfebfbd9bc..46782e944d0c34 100644 --- a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css +++ b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css @@ -3,8 +3,28 @@ display: none; } +/* Remove header toolbar */ +.editor-header__toolbar { + display: none; +} + +/* Hide all children of editor-header__settings */ +.editor-header__settings > * { + display: none; +} + +/* Show only the interface-pinned-items container */ +.editor-header__settings > .interface-pinned-items { + display: block; +} + +.components-button.editor-post-publish-panel__toggle.is-primary{ + display: none; +} + /* Remove default block appender at the end of the post */ -.block-list-appender { +.block-list-appender, .block-list-appender__toggle, +.block-editor-inserter, .components-autocomplete__popover { display: none; } @@ -18,6 +38,11 @@ display: none; } +/* Remove block inserter popover */ +.block-editor-block-popover { + display: none; +} + /* Right align post header children as we will only display one child */ .edit-post-header { justify-content: flex-end; From c5950d355ed02b88326d89126eab103148016549 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 4 Jun 2024 11:15:26 +0100 Subject: [PATCH 06/14] Update: Block styles documentation. --- docs/reference-guides/block-api/block-styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/block-api/block-styles.md b/docs/reference-guides/block-api/block-styles.md index 90b6c06d18f59d..b47b1a76a71f68 100644 --- a/docs/reference-guides/block-api/block-styles.md +++ b/docs/reference-guides/block-api/block-styles.md @@ -1,6 +1,6 @@ # Styles -Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Getting Started with JavaScript tutorial](/docs/how-to-guides/javascript/) for a full example. +Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Use styles and stylesheets](/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md) for a full example on how to apply styles to a block. _Example:_ From b89e79aa324d6ea857e2ad2738b5a4b8a6868f29 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 4 Jun 2024 12:29:10 +0200 Subject: [PATCH 07/14] [Mobile] - Image corrector - Check the path extension is a valid one (#62190) * Mobile - Image corrector - Check the path extension is a valid one * [Mobile] - Image corrector- Expand comment explaining the filtering for file: media paths * Integration Test helpers - Expand pasteIntoRichText to support passing files as a parameter * Mobile Editor Tests - Add new tests related to pasting HTML content with local image paths * Update snapshot --- .../raw-handling/image-corrector.native.js | 5 ++- .../test/__snapshots__/editor.native.js.snap | 12 +++++++ packages/edit-post/src/test/editor.native.js | 34 +++++++++++++++++++ .../rich-text-paste.js | 13 +++---- 4 files changed, 57 insertions(+), 7 deletions(-) diff --git a/packages/blocks/src/api/raw-handling/image-corrector.native.js b/packages/blocks/src/api/raw-handling/image-corrector.native.js index c6a9288ede2d3b..550c2e0e6e1537 100644 --- a/packages/blocks/src/api/raw-handling/image-corrector.native.js +++ b/packages/blocks/src/api/raw-handling/image-corrector.native.js @@ -10,7 +10,10 @@ export default function imageCorrector( node ) { return; } - if ( node.src.indexOf( 'file:' ) === 0 ) { + // For local files makes sure the path doesn't end with an invalid extension. + // This scenario often happens with content from MS Word and similar text apps. + // We still need to support local files pasted from the users Media library. + if ( node.src.startsWith( 'file:' ) && node.src.slice( -1 ) === '/' ) { node.setAttribute( 'src', '' ); } diff --git a/packages/edit-post/src/test/__snapshots__/editor.native.js.snap b/packages/edit-post/src/test/__snapshots__/editor.native.js.snap index 76bb42d5a2ccea..4a88b249a1db66 100644 --- a/packages/edit-post/src/test/__snapshots__/editor.native.js.snap +++ b/packages/edit-post/src/test/__snapshots__/editor.native.js.snap @@ -1,5 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Editor adds empty image block when pasting unsupported HTML local image path 1`] = ` +" +
+" +`; + +exports[`Editor adds image block when pasting HTML local image path 1`] = ` +" +
+" +`; + exports[`Editor appends media correctly for allowed types 1`] = ` "
diff --git a/packages/edit-post/src/test/editor.native.js b/packages/edit-post/src/test/editor.native.js index acafc4d68d42a5..8fe116758608b5 100644 --- a/packages/edit-post/src/test/editor.native.js +++ b/packages/edit-post/src/test/editor.native.js @@ -9,8 +9,10 @@ import { getEditorHtml, getEditorTitle, initializeEditor, + pasteIntoRichText, screen, setupCoreBlocks, + within, } from 'test/helpers'; import { BackHandler } from 'react-native'; @@ -98,6 +100,38 @@ describe( 'Editor', () => { } ); } ); + it( 'adds empty image block when pasting unsupported HTML local image path', async () => { + await initializeEditor(); + await addBlock( screen, 'Paragraph' ); + + const paragraphBlock = getBlock( screen, 'Paragraph' ); + fireEvent.press( paragraphBlock ); + const paragraphTextInput = + within( paragraphBlock ).getByPlaceholderText( 'Start writing…' ); + + pasteIntoRichText( paragraphTextInput, { + text: '
', + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'adds image block when pasting HTML local image path', async () => { + await initializeEditor(); + await addBlock( screen, 'Paragraph' ); + + const paragraphBlock = getBlock( screen, 'Paragraph' ); + fireEvent.press( paragraphBlock ); + const paragraphTextInput = + within( paragraphBlock ).getByPlaceholderText( 'Start writing…' ); + + pasteIntoRichText( paragraphTextInput, { + files: [ 'file:///path/to/file.png' ], + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + it( 'appends media correctly for allowed types', async () => { // Arrange requestMediaImport diff --git a/test/native/integration-test-helpers/rich-text-paste.js b/test/native/integration-test-helpers/rich-text-paste.js index d2c01ed2fb5a72..6d447181e0b8d2 100644 --- a/test/native/integration-test-helpers/rich-text-paste.js +++ b/test/native/integration-test-helpers/rich-text-paste.js @@ -6,19 +6,20 @@ import { fireEvent } from '@testing-library/react-native'; /** * Paste content into a RichText component. * - * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance. - * @param {Object} content Content to paste. - * @param {string} content.text Text format of the content. - * @param {string} [content.html] HTML format of the content. If not provided, text format will be used. + * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance. + * @param {Object} content Content to paste. + * @param {string} content.text Text format of the content. + * @param {string} [content.html] HTML format of the content. If not provided, text format will be used. + * @param {string} [content.files] Files array to add to the editor. */ -export const pasteIntoRichText = ( richText, { text, html } ) => { +export const pasteIntoRichText = ( richText, { text, html, files = [] } ) => { fireEvent( richText, 'focus' ); fireEvent( richText, 'paste', { preventDefault: jest.fn(), nativeEvent: { eventCount: 1, target: undefined, - files: [], + files, pastedHtml: html || text, pastedText: text, }, From 2cd72c25e2834a6a00d2c0f4cb71cce23e8d4321 Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Tue, 4 Jun 2024 12:45:39 +0200 Subject: [PATCH 08/14] Try: Fix mover positioning. (#62226) * Try: Fix mover positioning. * Update packages/editor/src/components/collapsible-block-toolbar/style.scss Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --------- Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- .../editor/src/components/collapsible-block-toolbar/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss index 701d6fa7c5ecc2..80d25da1a3e28e 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/style.scss +++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss @@ -64,8 +64,9 @@ // Move up a little to prevent the toolbar shift when focus is on the vertical movers. @include break-small() { &:not(.is-horizontal) .block-editor-block-mover__move-button-container { + height: $grid-unit-50; position: relative; - top: -10px; + top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header. } } } From d93cea5edbc82980f28f13025b4af03e42e8db54 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 4 Jun 2024 12:56:11 +0200 Subject: [PATCH 09/14] Update: Slotfill documentation samples (links, code, and rephrase). (#62271) Co-authored-by: jorgefilipecosta --- docs/reference-guides/slotfills/README.md | 88 ++++++++++++++++------- 1 file changed, 62 insertions(+), 26 deletions(-) diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md index 043a50cb5186e6..ea324f71b25e83 100644 --- a/docs/reference-guides/slotfills/README.md +++ b/docs/reference-guides/slotfills/README.md @@ -33,7 +33,7 @@ registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } ); SlotFills are created using `createSlotFill`. This creates two components, `Slot` and `Fill` which are then used to create a new component that is exported on the `wp.plugins` global. -**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js#L54)) +**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-post-status-info/index.js#L55)) ```js /** @@ -61,34 +61,70 @@ export default PluginPostStatusInfo; This new Slot is then exposed in the editor. The example below is from core and represents the Summary panel. As we can see, the `` is wrapping all of the items that will appear in the panel. -Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed between the `` and `` components. +Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed in the end of the component. -See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/edit-post/src/components/sidebar/post-status/index.js#L26). +See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.js#L39). ```js -const PostStatus = ( { isOpened, onTogglePanel } ) => ( - - - { ( fills ) => ( - <> - - - - - - - { fills } - - - ) } - - -); +export default function PostSummary( { onActionPerformed } ) { + const { isRemovedPostStatusPanel } = useSelect( ( select ) => { + // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do + // not use isEditorPanelEnabled since this panel should not be disabled through the UI. + const { isEditorPanelRemoved, getCurrentPostType } = + select( editorStore ); + return { + isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ), + postType: getCurrentPostType(), + }; + }, [] ); + + return ( + + + { ( fills ) => ( + <> + + + } + /> + + + + + + + { ! isRemovedPostStatusPanel && ( + + + + + + + + + + + + + + + + + + { fills } + + ) } + + + ) } + + + ); +} ``` ## Currently available SlotFills and examples From 329369bd9925e7c2d1fd370ed07cb5fccddbf74d Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:25:58 +0200 Subject: [PATCH 10/14] Update instances of text-wrap: pretty to fall back to balance (#62233) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update instances of text-wrap: pretty to fall back to balance * fix update snapshots * add changelog entry --------- Co-authored-by: Fabian Kägy --- packages/components/CHANGELOG.md | 4 ++++ .../dimension-control/test/__snapshots__/index.test.js.snap | 4 ++++ .../components/src/heading/test/__snapshots__/index.tsx.snap | 1 + packages/components/src/text/styles.ts | 1 + .../components/src/text/test/__snapshots__/index.tsx.snap | 2 ++ packages/editor/src/components/post-panel-row/style.scss | 1 + packages/editor/src/components/post-publish-panel/style.scss | 1 + 7 files changed, 14 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4ad4dd4ec63125..e8d65cfd9ce837 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233)) + ## 28.0.0 (2024-05-31) ### Breaking Changes diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index 73c8ebcfb49276..608cadbcf544f2 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -68,6 +68,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; @@ -347,6 +348,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; @@ -636,6 +638,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] color: #1e1e1e; line-height: 1.4; margin: 0; + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; @@ -937,6 +940,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] color: #1e1e1e; line-height: 1.4; margin: 0; + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; diff --git a/packages/components/src/heading/test/__snapshots__/index.tsx.snap b/packages/components/src/heading/test/__snapshots__/index.tsx.snap index 9a779613f56c22..cf863c4b2bb2ef 100644 --- a/packages/components/src/heading/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/heading/test/__snapshots__/index.tsx.snap @@ -5,6 +5,7 @@ exports[`props should render correctly 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; + text-wrap: balance; text-wrap: pretty; color: #1e1e1e; font-size: calc(1.95 * 13px); diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts index 1a0a6383363df8..c7d48552795938 100644 --- a/packages/components/src/text/styles.ts +++ b/packages/components/src/text/styles.ts @@ -12,6 +12,7 @@ export const Text = css` color: ${ COLORS.gray[ 900 ] }; line-height: ${ CONFIG.fontLineHeightBase }; margin: 0; + text-wrap: balance; /* Fallback for Safari. */ text-wrap: pretty; `; diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap index d2caecd9bf0593..1b98c0853ac549 100644 --- a/packages/components/src/text/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap @@ -22,6 +22,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] = color: #1e1e1e; line-height: 1.4; margin: 0; + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; @@ -54,6 +55,7 @@ exports[`Text snapshot tests should render correctly 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss index baa7d7dd98977d..024394c3aaf331 100644 --- a/packages/editor/src/components/post-panel-row/style.scss +++ b/packages/editor/src/components/post-panel-row/style.scss @@ -25,6 +25,7 @@ .components-button { max-width: 100%; text-align: left; + text-wrap: balance; // Fallback for Safari. text-wrap: pretty; height: auto; min-height: $button-size-compact; diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index c0ddec29253e33..996d0be26fc533 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -122,6 +122,7 @@ .components-panel__body-title .components-button { align-items: flex-start; + text-wrap: balance; // Fallback for Safari. text-wrap: pretty; } } From e57eed571e8aaa7d65394bdcf861b103dee9843f Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 4 Jun 2024 15:43:04 +0400 Subject: [PATCH 11/14] Inserter: Return the same items when the state and parameters don't change (#62263) * Inserter: Return the same items when the state and parameters don't change * Use stable default Co-authored-by: Mamaduka Co-authored-by: ellatrix Co-authored-by: tyxla --- .../inserter/hooks/use-block-types-state.js | 15 ++++++++++----- packages/block-editor/src/store/selectors.js | 4 +++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js index 6b9e694c1cdf8f..8db23267eee8f4 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js @@ -8,7 +8,7 @@ import { parse, } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -25,13 +25,18 @@ import { withRootClientIdOptionKey } from '../../../store/utils'; * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler) */ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => { + const options = useMemo( + () => ( { [ withRootClientIdOptionKey ]: ! isQuick } ), + [ isQuick ] + ); const [ items ] = useSelect( ( select ) => [ - select( blockEditorStore ).getInserterItems( rootClientId, { - [ withRootClientIdOptionKey ]: ! isQuick, - } ), + select( blockEditorStore ).getInserterItems( + rootClientId, + options + ), ], - [ rootClientId, isQuick ] + [ rootClientId, options ] ); const [ categories, collections ] = useSelect( ( select ) => { diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index bf7b5125a770e6..bf98521dfe9b65 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -76,6 +76,8 @@ const EMPTY_ARRAY = []; */ const EMPTY_SET = new Set(); +const EMPTY_OBJECT = {}; + /** * Returns a block's name given its client ID, or null if no block exists with * the client ID. @@ -1996,7 +1998,7 @@ const buildBlockTypeItem = */ export const getInserterItems = createRegistrySelector( ( select ) => createSelector( - ( state, rootClientId = null, options = {} ) => { + ( state, rootClientId = null, options = EMPTY_OBJECT ) => { const buildReusableBlockInserterItem = ( reusableBlock ) => { const icon = ! reusableBlock.wp_pattern_sync_status ? { From 736121fac2977be98db294fe51421d96c8526993 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 4 Jun 2024 15:56:31 +0400 Subject: [PATCH 12/14] Re-enable React StrictMode (#61943) Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: tyxla Co-authored-by: kevin940726 Co-authored-by: ellatrix --- packages/customize-widgets/src/index.js | 14 ++++++++------ packages/edit-post/src/index.js | 16 +++++++++------- packages/edit-site/src/index.js | 8 ++++++-- packages/edit-widgets/src/index.js | 8 ++++++-- packages/list-reusable-blocks/src/index.js | 6 ++++-- 5 files changed, 33 insertions(+), 19 deletions(-) diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js index 9afda775a1701c..5de010fa8bd37e 100644 --- a/packages/customize-widgets/src/index.js +++ b/packages/customize-widgets/src/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createRoot } from '@wordpress/element'; +import { createRoot, StrictMode } from '@wordpress/element'; import { registerCoreBlocks, __experimentalGetCoreBlocks, @@ -92,11 +92,13 @@ export function initialize( editorName, blockEditorSettings ) { } ); createRoot( container ).render( - + + + ); } ); } diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 0ec4388a9af70e..e7600831f11bae 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -7,7 +7,7 @@ import { __experimentalRegisterExperimentalCoreBlocks, } from '@wordpress/block-library'; import deprecated from '@wordpress/deprecated'; -import { createRoot } from '@wordpress/element'; +import { createRoot, StrictMode } from '@wordpress/element'; import { dispatch, select } from '@wordpress/data'; import { store as preferencesStore } from '@wordpress/preferences'; import { @@ -137,12 +137,14 @@ export function initializeEditor( window.addEventListener( 'drop', ( e ) => e.preventDefault(), false ); root.render( - + + + ); return root; diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 41fc0a1985fded..f7ef09f81ce7e7 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -9,7 +9,7 @@ import { } from '@wordpress/block-library'; import { dispatch } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; -import { createRoot } from '@wordpress/element'; +import { createRoot, StrictMode } from '@wordpress/element'; import { store as editorStore } from '@wordpress/editor'; import { store as preferencesStore } from '@wordpress/preferences'; import { @@ -85,7 +85,11 @@ export function initializeEditor( id, settings ) { window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false ); window.addEventListener( 'drop', ( e ) => e.preventDefault(), false ); - root.render( ); + root.render( + + + + ); return root; } diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js index 2374ec19dabd7b..f8247d733f1a15 100644 --- a/packages/edit-widgets/src/index.js +++ b/packages/edit-widgets/src/index.js @@ -9,7 +9,7 @@ import { } from '@wordpress/blocks'; import { dispatch } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; -import { createRoot } from '@wordpress/element'; +import { StrictMode, createRoot } from '@wordpress/element'; import { registerCoreBlocks, __experimentalGetCoreBlocks, @@ -91,7 +91,11 @@ export function initializeEditor( id, settings ) { // see: https://github.com/WordPress/gutenberg/issues/33097 setFreeformContentHandlerName( 'core/html' ); - root.render( ); + root.render( + + + + ); return root; } diff --git a/packages/list-reusable-blocks/src/index.js b/packages/list-reusable-blocks/src/index.js index 4440ba1c49f05a..f5cb411726963c 100644 --- a/packages/list-reusable-blocks/src/index.js +++ b/packages/list-reusable-blocks/src/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createRoot } from '@wordpress/element'; +import { createRoot, StrictMode } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** @@ -44,6 +44,8 @@ document.addEventListener( 'DOMContentLoaded', () => { container.className = 'list-reusable-blocks__container'; button.parentNode.insertBefore( container, button ); createRoot( container ).render( - + + + ); } ); From e841c9e52d28ba314a535065f9723ec0bc40342c Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 4 Jun 2024 14:06:03 +0200 Subject: [PATCH 13/14] Fix: Remove unused code from dataviews styles. (#62275) Co-authored-by: jorgefilipecosta --- packages/dataviews/src/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index bfff3786b1112c..d39f0d13390b2a 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -603,11 +603,6 @@ } } -.dataviews-filters__custom-menu-radio-item-prefix { - display: block; - width: 24px; -} - .dataviews-bulk-edit-button.components-button { flex-shrink: 0; } From 34fa83437d7ac91aaac0ed77413b57063ce61cfe Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 4 Jun 2024 14:53:27 +0200 Subject: [PATCH 14/14] Make edit site pagination buttons accessibly disabled. (#62267) Co-authored-by: afercia Co-authored-by: mirka <0mirka00@git.wordpress.org> --- .../global-styles/screen-revisions/style.scss | 3 ++- .../edit-site/src/components/pagination/index.js | 12 ++++-------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index dfe30c9bee33d2..e19876f98ee1fc 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -180,7 +180,8 @@ margin-bottom: $grid-unit-05; line-height: 1.2; } - .components-button.is-tertiary:disabled { + .components-button.is-tertiary:disabled, + .components-button.is-tertiary[aria-disabled="true"] { color: $gray-600; } .components-button.is-tertiary:hover { diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js index 2608621f39c84f..450ff2a17d5b5e 100644 --- a/packages/edit-site/src/components/pagination/index.js +++ b/packages/edit-site/src/components/pagination/index.js @@ -46,8 +46,7 @@ export default function Pagination( {