[Mobile] - Unsupported block - UI improvements #62240
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 2 commits
June 3, 2024 15:48
…orted blocks, simplifying the flow to open the Unsupported block editor
geriux
added
[Type] Bug
|
Size Change: +72 B (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
twstokes
approved these changes
Jun 3, 2024
There was a problem hiding this comment.
LGTM @geriux! I tested both Android and iOS and confirmed the web editor UI was hidden. I also ran through the UBE tests on both platforms.
Just a couple notes:
- On Android and iOS I added a self-hosted site not connected to Jetpack and tested TC006. This behaved as expected. Then, I connected the site to Jetpack to test TC005. On Android, the editor appropriately updated the UBE block string from saying "Unsupported" to "Tap to edit". On iOS it did not update the string, but tapping "Unsupported" then "Edit using web editor" still worked fine. Perhaps there's a chance this is an edge case due to my sequence.
- We should make a note to update the tests to match this new UI.
Thanks!
geriux
removed
the
Mobile App - Automation
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jun 4, 2024
* 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
geriux
pushed a commit
that referenced
this pull request
Jun 4, 2024
* 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
4 tasks
geriux
pushed a commit
that referenced
this pull request
Jun 5, 2024
* Release script: Update react-native-editor version to 1.119.0 * Release script: Update CHANGELOG for version 1.119.0 * Release script: Update podfile * [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 * [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 * Release script: Update react-native-editor version to 1.119.1 * Release script: Update CHANGELOG for version 1.119.1 * Release script: Update podfile * Update Unsupported Block Editor condition and reverts the functionality to select the block first before opening the editor. * Update snapshot * Update package-lock.json --------- Co-authored-by: twstokes <twstokes@git.wordpress.org> Co-authored-by: geriux <geriux@git.wordpress.org> Co-authored-by: fluiddot <carlosgprim@git.wordpress.org>
geriux
pushed a commit
that referenced
this pull request
Jun 6, 2024
* 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
geriux
pushed a commit
that referenced
this pull request
Jun 6, 2024
* [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 * [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 * Update Unsupported Block Editor condition and reverts the functionality to select the block first before opening the editor. * Release script: Update react-native-editor version to 1.120.0 * Release script: Update CHANGELOG for version 1.120.0 * Release script: Update podfile Co-authored-by: geriux <geriux@git.wordpress.org> Co-authored-by: SiobhyB <siobhyb@git.wordpress.org>
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
* 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
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
* Release script: Update react-native-editor version to 1.119.0 * Release script: Update CHANGELOG for version 1.119.0 * Release script: Update podfile * [Mobile] - Image corrector - Check the path extension is a valid one (WordPress#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 * [Mobile] - Unsupported block - UI improvements (WordPress#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 * Release script: Update react-native-editor version to 1.119.1 * Release script: Update CHANGELOG for version 1.119.1 * Release script: Update podfile * Update Unsupported Block Editor condition and reverts the functionality to select the block first before opening the editor. * Update snapshot * Update package-lock.json --------- Co-authored-by: twstokes <twstokes@git.wordpress.org> Co-authored-by: geriux <geriux@git.wordpress.org> Co-authored-by: fluiddot <carlosgprim@git.wordpress.org>
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
* [Mobile] - Image corrector - Check the path extension is a valid one (WordPress#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 * [Mobile] - Unsupported block - UI improvements (WordPress#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 * Update Unsupported Block Editor condition and reverts the functionality to select the block first before opening the editor. * Release script: Update react-native-editor version to 1.120.0 * Release script: Update CHANGELOG for version 1.120.0 * Release script: Update podfile Co-authored-by: geriux <geriux@git.wordpress.org> Co-authored-by: SiobhyB <siobhyb@git.wordpress.org>
geriux
pushed a commit
that referenced
this pull request
Jun 19, 2024
* [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 * [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 * Update Unsupported Block Editor condition and reverts the functionality to select the block first before opening the editor. * Release script: Update react-native-editor version to 1.120.0 * Release script: Update CHANGELOG for version 1.120.0 * Release script: Update podfile * [Mobile] - RichText - Fix `undefined` onDelete callback (#62486) * Native RichText - Fix undefined onDelete callback * Update changelog Co-authored-by: geriux <geriux@git.wordpress.org> Co-authored-by: twstokes <twstokes@git.wordpress.org> * Release script: Update react-native-editor version to 1.120.1 * Release script: Update podfile --------- Co-authored-by: geriux <geriux@git.wordpress.org> Co-authored-by: twstokes <twstokes@git.wordpress.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #62050
Related PRs:
What?
This PR fixes some UI issues in the Unsupported block editor WebView as well as improvements in the Unsupported block editing flow within the mobile editor.
Why?
To improve the Unsupported block editing experience for users.
How?
First, it adds new style overrides to hide some of the UI of the web editor, like the Publish button or inserter actions. Users should only see the block options.
It changes the unsupported block editing flow by removing a step and just allowing users to tap the block to edit it using the WebView.
For sites that don't have support, they will see the current flow of a modal with the different options.
Testing Instructions
Note
Please use the following builds to test:
Follow the Unsupported block test cases but take into account that these steps will need to be updated as in some cases, tapping on the Unsupported block would open the editor directly (Simple sites).
Testing Instructions for Keyboard
N/A
Screenshots or screencast
Hiding UI elements
New flow for sites that support Unsupported block editing
UnsupportedBlock.mov