[RNMobile] Add "Set as Featured Image" Button to Image Block (Android Only) #28854
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.
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @SiobhyB!. In case you missed it, we'd love to have you join us in our Slack community,where we hold regularly weekly meetings open to anyone to coordinate with each other. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
github-actions
bot
added
the
First-time Contributor
2 tasks
With this commit, a "setFeaturedImage" function has been added to the React Native bridge code.
6 tasks
...ative-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
Outdated
Show resolved
Hide resolved
|
@SiobhyB the bridge code is looking good so far 😄 . I am seeing some build errors from the Android side of things and it seems related to the click listeners, so let me know if you are able to resolve them. Thanks 👍 |
added 4 commits
February 12, 2021 10:54
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.
3 tasks
|
Hi Could you add a screenshot? |
|
👋 @paaljoachim, sure, the mockup of what this will likely look like is as follows:
I'll defer to @iamthomasbishop for any extra details around the design and some extra discussion can be found in the mobile repo. Hope that helps! |
|
@paaljoachim, hi! :) I just wanted to follow up again to check whether there are any upcoming plans to implement this on the web? We don't currently have an ETA on the mobile side but would be responsive and adjust our plans to work with the web, if there are firm plans in place there. |
|
Hi @SiobhyB This is the issue I have earlier added a checkbox below the Featured image placeholder box mockup. Some what similar to the first proposal mockup you share. I did not extend it beyond that point. What about creating another proposal set with focus on web and share them in the above issue? We can then ping @shaunandrews Shaun to give some feedback. This way we will have a have a similar method to automatically add a featured image for web and Mobile views. |
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.
hypest
reviewed
Mar 18, 2021
...ative-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
Outdated
Show resolved
Hide resolved
Update AndroidGlueCode to include OnFocalPointPickerTooltipShownEventListener.
hypest
pushed a commit
that referenced
this pull request
Apr 20, 2021
* Add "set as featured image" button to image block This commit adds a "set as featured image" button to the image block's settings and also styles it. * Add "setFeaturedImage" function in bridge code With this commit, a "setFeaturedImage" function has been added to the React Native bridge code. * Add setFeaturedImage function to MainApplication This commit adds the setFeaturedImage function to the MainApplication file, so that it works as expected with the demo apps. * Add "OnSetFeaturedImageListener" listener This commit sets up a listener called "OnSetFeaturedImageListener" in order to allow communication with the native apps. * Update edit.native.js with small syntax correction This commit updates edit.native.js with small syntax correction, there was a missing comma at the end of a statement. * Set up "OnSetFeaturedImageListener" in WPAndroidGlue.java 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. * Passing featured image ID from native (Android) to Gutenberg This commit seeks to send information about a post's featured image ID to Gutenberg by utlising functions from Android. * Restore missing curly brace Accidentally removed a curly brace with the last commit, so restoring it with this one. * Updates to featured-banner.native.js 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. * Attempts to select featured image using getEditedPostAttribute() This commit includes attempts to select a post's featured image using getEditedPostAttribute(). * Update featured-banner.native.js With this commit, I'm updating featured-banner.native.js with the latest changes to that component's UI. * Add featured banner to image/index.native.js With this commit, a featured banner is added to the image component. * Update featured image banner and button styles This commit updates the styles for the featured image banner and button that overlay the image compoonent. * Create getFeaturedImageId function and cleanup 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. * Tidy up edit.native.js * Update AndroidGlueCode Update AndroidGlueCode to include OnFocalPointPickerTooltipShownEventListener. * retrigger checks * Update setup.js * retrigger checks * Update function name from "featuredImageIdChange" to "featuredImageIdCurrent" With this commit, I'm updating a function's name from "featuredImageIdChange" to "featuredImageIdCurrent" in order to more accurately reflect its purpose. * Rename "featuredImageIdNotifier" to "onRequestFeaturedImageId" This commit renames "featuredImageIdNotifier" to "onRequestFeaturedImageId" in order to clarify the function's purpose. * Create OnSetFeaturedImageListener This commit introduces an "OnSetFeaturedImageListener" and moves new featured image related functions to it from "OnMediaLibraryButtonListener". * Dismiss bottomsheet when "setFeaturedImage" is called * Introduce "onRemoveFeatured" button and tidying up names 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. * Updates to function names This commit updates "onRequestFeaturedImageId" to "sendToJSFeaturedImageId" and "getFeaturedImageId" to "checkIfFeaturedImage". In both cases, this has been done to clarify the purpose of the functions. * Convert FeaturedBanner to Badge component 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. * Update edit.native.js to correct merge conflict * Correct merge conflict with GutenbergBridgeJS2Parent.java This commit is an attempt to correct this PR's merge conflict with GutenbergBridgeJS2Parent.java. * retrigger checks * retrigger checks * retrigger checks * Update edit.native.js to fix merge conflict * Update edit.native.js to check if an image is featured uppn changes This commit fixes a bug, where the "featured" banner did not update if an image was replaced directly within a block, using the available settings to the upper right. * Update styles.native.scss to add border to the top of featured button This commit also tidies up some of the code around styling to account for dark mode. * Update edit.native.js This commit moves the "checkIfFeaturedImage" check into its own function. * Introduce "featuredMedia" prop for use when editor loads This commit introduces a "featuredMedia" prop that is intended to be used when Gutenberg first loads. The prop is going to be passed over the bridge so that we can get information about a post's featured image ID from the app. * Fetch ID of post's initial featured image This commit introduces some changes in react-native-editor/src/index.js that enable getEditedPostAttribute( 'featured_media' ) to fetch the initial ID of a post's featured image. This is then used in the image block's componentDidMount function to pinpoint a featured image when it's first loaded in the editor. * Updated featured state when image is replaced within block This commit uses "setAttributes" to define a "currentFeaturedImageId" attribute. This attribute is then used in "componentDidUpdate" to check if an image is featured if it's replaced directly within the image block. There are also some smaller tweaks/improvements to the code in this commit, such as changing an if/else statement to use ES6's shorthand. * Remove checkIfFeaturedImage function This function has been replaced with functionality to grab a post's initial ID, as can be seen in the previous couple of commits. * Fix merge conflict * Fix merge conflict * Add "setFeaturedImage" and "featuredImageIdCurrent" functions to Swift files * Simplify this.state.isFeaturedImage by converting to a boolean insider render() This commit simplifies the process of determining whether an image is featured (currently done via by setting an isFeaturedImage state) by converting it to a boolean insider the render() function. * Comment out iOS-specific changes to the bridge This commit comments out iOS-specific changes to the bridge in ordet to test whether these changes are the reason behind a failing performance test. * Add iOS functions to bridge * Flag featured image when editor mounts and comment out iOS methods from bridge This commit adds a check to "componentDidMount" so that a featured image is flagged when the editor first mounts (fixes previous regression). It also comments out iOS methods over the bridge, a temporary change. * Comment out a bridge function for iOS (missing from previous commit). * Add set featured image functionality behind dev flag * Move "set as featured" button behind devOnly and androidOnly flag This commit also changes the "featured" banner so that it's accessible to all. * Remove redundant code This PR branches off #28854 in order to simplify PRs for a new feature that makes it easier for users to set a featured image from the image block. With this commit, I'm removing redundant code that isn't necessary for this specific PR (which will only include code that adds a "featured" banner to the image block). * Remove import of android.util.Log * Update CHANGELOG.md * Update Badge component for re-usability This commit updates the Badge component so that it works by wrapping around another component. This is designed to make the component easier to re-use. * Merge branch 'add-featured-badge' of https://github.com/SiobhyB/gutenberg into add-featured-badge * Correct merge conflict * Lift subscribeFeaturedImageIdCurrent from image/edit.native.js to post-edit/edit.native.js This components lifts the subscribeFeaturedImageIdCurrent function so that the data isn't managed directly from within the image component. * Remove commented out functions from iOS bridge This commit also removes a redundant empty space in a bridge file. * Remove androidOnly const The androidOnly const is not in use and can be removed. * Correct typo in README "add" should have been "adds". This commit corrects that. * Replace call to 'core' with 'coreStore" 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. * Rename featuredMedia to featuredImageId * Destructure props This commit destructures props in the componentDidMount function to improve readability * Rename "featuredImageIdCurrent" to "featuredImageIdNativeUpdated" Following discussion, this commit renames "featuredImageIdCurrent" to "featuredImageIdNativeUpdated" in order to more clearly describe the function's purpose. * Limit subscribeFeaturedImageIdNativeUpdated to Android-only subscribeFeaturedImageIdNativeUpdated is currently only supported in the Android app, so this commit limits its usage to prevent errors on iOS. * Update CHANGELOG.md
This commit removes "subscribeFeaturedImageIdCurrent", as it's no longer in use.
This functionality was moved to image/edit.native.js.
3 tasks
…f github.com:SiobhyB/gutenberg into update/featured-image-button-in-image-block-settings
…age-button-in-image-block-settings
|
@jd-alexander, this chain of PRs is ready for review, whenever you have the chance to take a look. Thank you in advance! 🙇♀️ |
Thanks! I will have a look. |
This was referenced Apr 30, 2021
…mage-block-settings
hypest
reviewed
May 10, 2021
hypest
reviewed
May 10, 2021
|
Closing this PR, as it was separated into the following:
|
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.
Edit: This PR was closed as it was separated into the following individual PRs:
Checklist: