From 84b571f7b07fcc9ef7f5be59c1384affbcd89911 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 4 Jun 2024 12:29:10 +0200 Subject: [PATCH 1/6] [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 c6a9288ede2d3..550c2e0e6e153 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 76bb42d5a2cce..4a88b249a1db6 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 acafc4d68d42a..8fe116758608b 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 d2c01ed2fb5a7..6d447181e0b8d 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 1ce59db6373daa0a77e6d9d1b1c32d27a7dda262 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 4 Jun 2024 12:12:41 +0200 Subject: [PATCH 2/6] [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 7432f5fae0f12..950d9afaaebf3 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 245410a5c5d57..2ac371120be4b 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 484cdfebfbd9b..46782e944d0c3 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 329fecf8e9a3c0356b0c180dce79b85e88056ef5 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 4 Jun 2024 17:24:35 +0200 Subject: [PATCH 3/6] Update Unsupported Block Editor condition and reverts the functionality to select the block first before opening the editor. --- packages/block-library/src/missing/edit.native.js | 8 ++++++-- .../src/missing/test/__snapshots__/edit.native.js.snap | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js index 950d9afaaebf3..641224cac4e77 100644 --- a/packages/block-library/src/missing/edit.native.js +++ b/packages/block-library/src/missing/edit.native.js @@ -67,12 +67,14 @@ export class UnsupportedBlockEdit extends Component { canEditUnsupportedBlock() { const { canEnableUnsupportedBlockEditor, + isEditableInUnsupportedBlockEditor, isUnsupportedBlockEditorSupported, } = this.props; return ( ! canEnableUnsupportedBlockEditor && - isUnsupportedBlockEditorSupported + isUnsupportedBlockEditorSupported && + isEditableInUnsupportedBlockEditor ); } @@ -194,7 +196,8 @@ export class UnsupportedBlockEdit extends Component { render() { const { originalName } = this.props.attributes; - const { getStylesFromColorScheme, preferredColorScheme } = this.props; + const { isSelected, getStylesFromColorScheme, preferredColorScheme } = + this.props; const blockType = coreBlocks[ originalName ]; const title = this.getTitle(); @@ -226,6 +229,7 @@ export class UnsupportedBlockEdit extends Component { const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme; return ( Date: Thu, 6 Jun 2024 11:32:03 +0200 Subject: [PATCH 4/6] Release script: Update react-native-editor version to 1.120.0 --- packages/react-native-aztec/package.json | 2 +- packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index b3352cdbd3eb5..0c870edf7e5ea 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.119.0", + "version": "1.120.0", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index 0d8998c650b8f..c66c65cb8866a 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.119.0", + "version": "1.120.0", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 710202587b55a..6e6a52a0817e5 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.119.0", + "version": "1.120.0", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From bc1c3383040db91ddd856d44d1a7f9cc3340c77a Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 6 Jun 2024 11:34:15 +0200 Subject: [PATCH 5/6] Release script: Update CHANGELOG for version 1.120.0 --- packages/react-native-editor/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index beb32d70e6072..7e7e9afba4185 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,8 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased + +## 1.120.0 - [*] Prevent deleting content when backspacing in the first Paragraph block [#62069] - [internal] Adds new bridge functionality for updating content [#61796] From d5392dbe64e5793d543e1e344f8515338e7e7014 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 6 Jun 2024 11:38:41 +0200 Subject: [PATCH 6/6] Release script: Update podfile --- package-lock.json | 6 +++--- packages/react-native-editor/ios/Podfile.lock | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index f78a8f5c48ebd..93c2aa1d965cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55126,7 +55126,7 @@ }, "packages/react-native-aztec": { "name": "@wordpress/react-native-aztec", - "version": "1.119.0", + "version": "1.120.0", "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/element": "file:../element", @@ -55143,7 +55143,7 @@ }, "packages/react-native-bridge": { "name": "@wordpress/react-native-bridge", - "version": "1.119.0", + "version": "1.120.0", "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/react-native-aztec": "file:../react-native-aztec" @@ -55158,7 +55158,7 @@ }, "packages/react-native-editor": { "name": "@wordpress/react-native-editor", - "version": "1.119.0", + "version": "1.120.0", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 896262f752f0c..9407c238841aa 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -13,7 +13,7 @@ PODS: - ReactCommon/turbomodule/core (= 0.73.3) - fmt (6.2.1) - glog (0.3.5) - - Gutenberg (1.119.0): + - Gutenberg (1.120.0): - React-Core (= 0.73.3) - React-CoreModules (= 0.73.3) - React-RCTImage (= 0.73.3) @@ -1109,7 +1109,7 @@ PODS: - React-Core - RNSVG (14.0.0): - React-Core - - RNTAztecView (1.119.0): + - RNTAztecView (1.120.0): - React-Core - WordPress-Aztec-iOS (= 1.19.11) - SDWebImage (5.11.1): @@ -1343,7 +1343,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 73b3972e2bd20b3235ff2014f06a3d3af675ed29 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2 - Gutenberg: 8f5a5b16c987c6532add8413cb3411f583f43b69 + Gutenberg: 0d15c3a0b8aace231a954709a536580d7905c867 hermes-engine: 5420539d016f368cd27e008f65f777abd6098c56 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c @@ -1402,7 +1402,7 @@ SPEC CHECKSUMS: RNReanimated: 6936b41d8afb97175e7c0ab40425b53103f71046 RNScreens: 2b73f5eb2ac5d94fbd61fa4be0bfebd345716825 RNSVG: 255767813dac22db1ec2062c8b7e7b856d4e5ae6 - RNTAztecView: c0a124a24b01a96ceeac8c0dcdc461f2d06e13f2 + RNTAztecView: 3a1df2dd827082d22a4dd06b6031e2fefd2885c6 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17