[RNMobile] Hide help button from UBE #37221
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
With this commit, the help button that currently displays in the bottom-right corner of the UBE is hidden via CSS.
SiobhyB
added
the
Mobile App - i.e. Android or iOS
|
Size Change: 0 B Total Size: 1.11 MB ℹ️ View Unchanged
|
This was referenced Dec 8, 2021
added 2 commits
December 9, 2021 15:26
As this CSS refers to an external third-party plugin, it's not appropriate to reference it in the Gutenberg repository. It'll therefore be removed from this PR and moved to a separate repository.
With this commit, 'getOnGutenbergReadyExternalStyles' is called to fetch any external CSS styles that have been defined e.g. third-party plugins may need to customize certain parts of the UBE.
added 4 commits
December 10, 2021 10:50
'getOnGutenbergReadyExternalStyles' had been mistakenly set as 'private', even though it's called outside of thid specific class. By setting to 'protected', it can now be called in the 'WPGutenbergWebViewActivity' class, as expected.
The 'onGutenbergReadyStyles' function will enable developers to add external CSS files to the UBE on the native iOS-side. The pattern used to implement the 'onGutenbergReadyScripts' function (which enables external scripts) was followed.
getContent() and toJsScript() are needed to process external CSS files. Therefore, this commit modifies their access permissions so that they can be used outside of their respective classes.
twstokes
reviewed
Dec 17, 2021
...ges/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
Outdated
Show resolved
Hide resolved
packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift
Outdated
Show resolved
Hide resolved
added 3 commits
December 17, 2021 11:13
This commit renames 'onGutenbergLoadStyles' to more accurately reflect the timing of the script.
With this commit, the SourceFile extension is moved to 'SourceFile.swift' and refactored so that JavaScript is dynamically generated based on file type (e.g. CSS, JS, etc). This refactoring also means that we're now able to revert the change that was made to the 'toJsScript' function's access modifier. This follows the suggestion here, which also further details the benefits of this approach: #37221 (comment)
twstokes
reviewed
Jan 4, 2022
.../src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
Show resolved
Hide resolved
|
I followed the testing steps on both iOS and Android they passed! 🎉 |
twstokes
approved these changes
Jan 4, 2022
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.
Addresses wordpress-mobile/gutenberg-mobile#4339
Related PRs and Installable Builds
Gutenberg Mobile: Hide help button from UBE wordpress-mobile/gutenberg-mobile#4352WPiOS: [Gutenberg] Hide help button from UBE wordpress-mobile/WordPress-iOS#17644WPAndroid: [Gutenberg] Hide help button from UBE wordpress-mobile/WordPress-Android#15674Description
As described in wordpress-mobile/gutenberg-mobile#4339, a help button is currently displaying in the bottom right-hand corner of the unsupported block editor (UBE) in both the Android and iOS apps. The button can be seen while logged into WordPress.com. When tapped on, the button isn't working as expected on iOS and prompts users to navigate away from the editor on Android, creating the potential for edits to be lost.
With this PR, the button is hidden from view in order to avoid confusion and potential loss of edits. A high-level overview of the code changes can be found in the
Types of changessection below.How has this been tested?
While logged into a WordPress.com site:
Installable builds have been created for WPiOS here and WPAndroid here to help with testing.
Screenshots
Types of changes
Bug fix (non-breaking change which fixes an issue), with the following high-level overview of the code changes involved:
Gutenberg Mobile changes
external-style-overrides.css, has been created here. This new file lives alongside other external/custom scripts in Gutenberg Mobile'sunsupported-block-editorfolder. Its purpose will be to house CSS that changes parts of the editor that are external to Gutenberg e.g. buttons added by third-party plugins.unsupported-block-editorfolder, but tweaked for the newly added CSS file.Android changes
getOnGutenbergReadyExternalStylesfunction that fetches the contents of the newly created CSS file has been added to Android'sWPGutenbergWebViewActivityclass.getOnGutenbergReadyExternalStylesand then following the same steps as the other internal CSS files.iOS changes
.jsfiles in Gutenberg Mobile'sunsupported-block-editorfolder. As this PR adds a.cssfile to that folder, it was necessary to addcssto the global pattern here in the Gutenberg Mobile repositoryonGutenbergReadyStylesfunction callsloadCustomStyles(), which then fetches the contents of the newly created CSS file. This follows the same pattern as, loadCustomScript(), the function used to process.jsfiles.getContent()andtoJsScriptpublic for use in the newloadCustomStyles()function.onGutenbergReadyStyles()is called in all the same places asinjectEditorCssScript()in the GutenbergWebSingleBlockViewController.swift file.Checklist:
*.native.jsfiles for terms that need renaming or removal).