[RNMobile] Add Featured Banner to Image Block (Android Only) #30806
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
This commit adds a "set as featured image" button to the image block's settings and also styles it.
With this commit, a "setFeaturedImage" function has been added to the React Native bridge code.
This commit adds the setFeaturedImage function to the MainApplication file, so that it works as expected with the demo apps.
This commit sets up a listener called "OnSetFeaturedImageListener" in order to allow communication with the native apps.
This commit updates edit.native.js with small syntax correction, there was a missing comma at the end of a statement.
This commit updates WPAndroidGlue.java in order to set up a "OnSetFeaturedImageListener" function that will communicate with the Android app when a user clicks a "set as featured image" button.
This commit seeks to send information about a post's featured image ID to Gutenberg by utlising functions from Android.
Accidentally removed a curly brace with the last commit, so restoring it with this one.
This commit including updates to featured-banner.native.js, a component for the "featured" banner that will overlay the image block when an image is featured. "payload.featuredImageId" logs the ID of a featured image after it's updated.
This commit includes attempts to select a post's featured image using getEditedPostAttribute().
With this commit, I'm updating featured-banner.native.js with the latest changes to that component's UI.
With this commit, a featured banner is added to the image component.
This commit updates the styles for the featured image banner and button that overlay the image compoonent.
This commit includes a new getFeaturedImageId function, for grabbing a post's featured image when a component is mounted and also cleans up some unused code.
Update AndroidGlueCode to include OnFocalPointPickerTooltipShownEventListener.
…Current" With this commit, I'm updating a function's name from "featuredImageIdChange" to "featuredImageIdCurrent" in order to more accurately reflect its purpose.
This commit renames "featuredImageIdNotifier" to "onRequestFeaturedImageId" in order to clarify the function's purpose.
This commit introduces an "OnSetFeaturedImageListener" and moves new featured image related functions to it from "OnMediaLibraryButtonListener".
This commit introduces a "onRemoveFeatured" button that displays in the image block's settings when an image is featured. It also changes the name of the "onGetFeaturedImageId" function to "checkIfFeaturedImage", to better reflect its current functionality.
This commit updates "onRequestFeaturedImageId" to "sendToJSFeaturedImageId" and "getFeaturedImageId" to "checkIfFeaturedImage". In both cases, this has been done to clarify the purpose of the functions.
This commit converts the FeaturedBanner component to a more generic Badge component. This is to make it more re-usable. There are also some small styling tweaks included in this commit, including changes to the component's border-radius.
This commit is an attempt to correct this PR's merge conflict with GutenbergBridgeJS2Parent.java.
SiobhyB
requested review from
nerrad,
noahtallen,
noisysocks,
oandregal,
ntwb,
swissspidy,
talldan and
tellthemachines
as code owners
added 12 commits
April 20, 2021 13:36
…t-edit/edit.native.js This components lifts the subscribeFeaturedImageIdCurrent function so that the data isn't managed directly from within the image component.
This commit also removes a redundant empty space in a bridge file.
The androidOnly const is not in use and can be removed.
"add" should have been "adds". This commit corrects that.
This commit replaces the direct call to the 'core' store with a call to 'coreStore', in line with preferred patterns followed elsewhere in the project.
This commit destructures props in the componentDidMount function to improve readability
Following discussion, this commit renames "featuredImageIdCurrent" to "featuredImageIdNativeUpdated" in order to more clearly describe the function's purpose.
subscribeFeaturedImageIdNativeUpdated is currently only supported in the Android app, so this commit limits its usage to prevent errors on iOS.
hypest
approved these changes
Apr 20, 2021
There was a problem hiding this comment.
Still looking good to me, noticed the CHANGELOG.md changes as well and looks like the "Unreleased" section will need some updating to match the current (at the time of writing) native editor release v1.51.0, but that will be wrangled separately so, all good here 👍.
This was referenced Apr 29, 2021
6 tasks
12 tasks
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.
Paritial fix for: wordpress-mobile/gutenberg-mobile#1011
gutenberg-mobile: wordpress-mobile/gutenberg-mobile#3371WordPress-Android: wordpress-mobile/WordPress-Android#14451Description
This PR introduces a Featured banner, which overlays a post's featured image when it's added to an image block. This will make it easier for users to identify which of the images in their posts, if any, are set as featured directly from the editor.
Note: This PR introduces the Featured banner on Android devices only, support for iOS will follow in future iterations.
How has this been tested?
Test Case 1: General Flow
To start with, an image block should be updated to reflect whether its image is featured or not when set via the general Post Settings flow:
Test Case 2: "Editor Loads" Flow
Next, we should verify that a Featured banner appears when a post with a featured image is first loaded. To test this, follow these steps:
Test Case 3: "Replace in Image Block" Flow
Finally, it's possible to replace an image directly within the image block's settings. We need to verify that the Featured banner updates as expected depending on the image that's chosen for an image block:
Screenshots
Types of changes
This PR introduces a new feature (a non-breaking change that adds functionality). Specifically, it adds a Featured banner that overlays an image block containing a post's featured image. The code can be split into two overarching categories:
Badge Component
Logic for Fetching Featured Image ID
editEntityRecordselector is then used in combination with listeners to update the value stored for a post's featured image ID.featuredImageIdto be passed to and used in the image component's edit.native.js file. In order to determine whether or not to display the badge component, thefeaturedImageIdis compared to the ID of the image in the block.Checklist:
*.native.jsfiles for terms that need renaming or removal).