From 59220b0adb795557639a017b065af270d284c9bf Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 26 May 2020 09:42:01 +0200 Subject: [PATCH] Tooltip for page template selection buttons (#2216) * Starter Page Templates - Tooltip * Update Release Notes * Update Gutenberg ref --- RELEASE-NOTES.txt | 1 + .../java/com/gutenberg/MainApplication.java | 8 ++++++++ gutenberg | 2 +- ios/gutenberg/GutenbergViewController.swift | 8 ++++++++ .../GutenbergBridgeJS2Parent.java | 8 ++++++++ .../RNReactNativeGutenbergBridgeModule.java | 20 +++++++++++++++++++ .../WPAndroidGlue/WPAndroidGlueCode.java | 19 ++++++++++++++++++ react-native-gutenberg-bridge/index.js | 8 ++++++++ .../ios/GutenbergBridgeDelegate.swift | 8 +++++++- .../ios/RNReactNativeGutenbergBridge.m | 2 ++ .../ios/RNReactNativeGutenbergBridge.swift | 11 ++++++++++ 11 files changed, 93 insertions(+), 2 deletions(-) diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt index bdbe550e68403b..de286d61e455a5 100644 --- a/RELEASE-NOTES.txt +++ b/RELEASE-NOTES.txt @@ -7,6 +7,7 @@ * [***] Trash icon that is used to remove blocks is moved to the new menu reachable via ellipsis button in the block toolbar * [**] Block toolbar can now collapse when the block width is smaller than the toolbar content * [**] Creating undo levels less frequently +* [**] Tooltip for page template selection buttons 1.28.0 ------ diff --git a/android/app/src/main/java/com/gutenberg/MainApplication.java b/android/app/src/main/java/com/gutenberg/MainApplication.java index 39590437492801..72ca116bcfefcc 100644 --- a/android/app/src/main/java/com/gutenberg/MainApplication.java +++ b/android/app/src/main/java/com/gutenberg/MainApplication.java @@ -115,6 +115,14 @@ public void requestMediaEditor(MediaUploadCallback mediaUploadCallback, String m public void logUserEvent(GutenbergUserEvent gutenbergUserEvent, ReadableMap eventProperties) { } + @Override + public void setStarterPageTemplatesTooltipShown(boolean tooltipShown) { + } + + @Override + public void requestStarterPageTemplatesTooltipShown(StarterPageTemplatesTooltipShownCallback starterPageTemplatesTooltipShownCallback) { + } + @Override public void editorDidEmitLog(String message, LogLevel logLevel) { switch (logLevel) { diff --git a/gutenberg b/gutenberg index 1e76458b509651..a9ac3285269071 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 1e76458b50965120a4f58e73598b5103cee913fe +Subproject commit a9ac3285269071e534652b7d6647318784cac97e diff --git a/ios/gutenberg/GutenbergViewController.swift b/ios/gutenberg/GutenbergViewController.swift index bc941838236624..d7214825867336 100644 --- a/ios/gutenberg/GutenbergViewController.swift +++ b/ios/gutenberg/GutenbergViewController.swift @@ -199,6 +199,14 @@ extension GutenbergViewController: GutenbergBridgeDelegate { func gutenbergDidRequestMention(callback: @escaping (Result) -> Void) { callback(.success("matt")) } + + func gutenbergDidRequestStarterPageTemplatesTooltipShown() -> Bool { + return false; + } + + func gutenbergDidRequestSetStarterPageTemplatesTooltipShown(_ tooltipShown: Bool) { + print("Gutenberg requested setting tooltip flag") + } } extension GutenbergViewController: GutenbergBridgeDataSource { diff --git a/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java index 477e8064f65ac1..8be6e282522e2e 100644 --- a/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java +++ b/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java @@ -39,6 +39,10 @@ interface MediaUploadCallback { void onMediaFileUploadFailed(int mediaId); } + interface StarterPageTemplatesTooltipShownCallback { + void onRequestStarterPageTemplatesTooltipShown(boolean tooltipShown); + } + // Ref: https://github.com/facebook/react-native/blob/master/Libraries/polyfills/console.js#L376 enum LogLevel { TRACE(0), @@ -140,4 +144,8 @@ public static GutenbergUserEvent getEnum(String eventName) { void logUserEvent(GutenbergUserEvent gutenbergUserEvent, ReadableMap eventProperties); void onAddMention(Consumer onSuccess); + + void setStarterPageTemplatesTooltipShown(boolean tooltipShown); + + void requestStarterPageTemplatesTooltipShown(StarterPageTemplatesTooltipShownCallback starterPageTemplatesTooltipShownCallback); } diff --git a/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java index 2c6baca264b44c..f087d048f64b3b 100644 --- a/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java +++ b/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java @@ -19,6 +19,7 @@ import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.GutenbergUserEvent; import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaType; import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.OtherMediaOptionsReceivedCallback; +import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.StarterPageTemplatesTooltipShownCallback; import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.RNMedia; import org.wordpress.mobile.WPAndroidGlue.MediaOption; @@ -256,6 +257,25 @@ public void addMention(Promise promise) { mGutenbergBridgeJS2Parent.onAddMention(promise::resolve); } + @ReactMethod + public void setStarterPageTemplatesTooltipShown(boolean tooltipShown) { + mGutenbergBridgeJS2Parent.setStarterPageTemplatesTooltipShown(tooltipShown); + } + + @ReactMethod + public void requestStarterPageTemplatesTooltipShown(final Callback jsCallback) { + StarterPageTemplatesTooltipShownCallback starterPageTemplatesTooltipShownCallback = requestStarterPageTemplatesTooltipShownCallback(jsCallback); + mGutenbergBridgeJS2Parent.requestStarterPageTemplatesTooltipShown(starterPageTemplatesTooltipShownCallback); + } + + private StarterPageTemplatesTooltipShownCallback requestStarterPageTemplatesTooltipShownCallback(final Callback jsCallback) { + return new StarterPageTemplatesTooltipShownCallback() { + @Override public void onRequestStarterPageTemplatesTooltipShown(boolean tooltipShown) { + jsCallback.invoke(tooltipShown); + } + }; + } + private GutenbergBridgeJS2Parent.MediaUploadCallback getNewUploadMediaCallback(final Boolean allowMultipleSelection, final Callback jsCallback) { return new GutenbergBridgeJS2Parent.MediaUploadCallback() { @Override diff --git a/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java index 65cdda53da1968..9bc9d3d45152f5 100644 --- a/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java +++ b/react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java @@ -79,6 +79,7 @@ public class WPAndroidGlueCode { private OnImageFullscreenPreviewListener mOnImageFullscreenPreviewListener; private OnMediaEditorListener mOnMediaEditorListener; private OnLogGutenbergUserEventListener mOnLogGutenbergUserEventListener; + private OnStarterPageTemplatesTooltipShownEventListener mOnStarterPageTemplatesTooltipShownListener; private boolean mIsEditorMounted; private String mContentHtml = ""; @@ -166,6 +167,11 @@ public interface OnLogGutenbergUserEventListener { void onGutenbergUserEvent(GutenbergUserEvent event, Map properties); } + public interface OnStarterPageTemplatesTooltipShownEventListener { + void onSetStarterPageTemplatesTooltipShown(boolean tooltipShown); + boolean onRequestStarterPageTemplatesTooltipShown(); + } + public void mediaSelectionCancelled() { mAppendsMultipleSelectedToSiblingBlocks = false; } @@ -338,6 +344,17 @@ public void logUserEvent(GutenbergUserEvent event, ReadableMap eventProperties) @Override public void onAddMention(Consumer onSuccess) { mAddMentionUtil.getMention(onSuccess); } + + @Override + public void setStarterPageTemplatesTooltipShown(boolean showTooltip) { + mOnStarterPageTemplatesTooltipShownListener.onSetStarterPageTemplatesTooltipShown(showTooltip); + } + + @Override + public void requestStarterPageTemplatesTooltipShown(StarterPageTemplatesTooltipShownCallback starterPageTemplatesTooltipShownCallback) { + boolean tooltipShown = mOnStarterPageTemplatesTooltipShownListener.onRequestStarterPageTemplatesTooltipShown(); + starterPageTemplatesTooltipShownCallback.onRequestStarterPageTemplatesTooltipShown(tooltipShown); + } }, mIsDarkMode); return Arrays.asList( @@ -448,6 +465,7 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener OnMediaEditorListener onMediaEditorListener, OnLogGutenbergUserEventListener onLogGutenbergUserEventListener, AddMentionUtil addMentionUtil, + OnStarterPageTemplatesTooltipShownEventListener onStarterPageTemplatesTooltipListener, boolean isDarkMode) { MutableContextWrapper contextWrapper = (MutableContextWrapper) mReactRootView.getContext(); @@ -462,6 +480,7 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener mOnMediaEditorListener = onMediaEditorListener; mOnLogGutenbergUserEventListener = onLogGutenbergUserEventListener; mAddMentionUtil = addMentionUtil; + mOnStarterPageTemplatesTooltipShownListener = onStarterPageTemplatesTooltipListener; sAddCookiesInterceptor.setOnAuthHeaderRequestedListener(onAuthHeaderRequestedListener); diff --git a/react-native-gutenberg-bridge/index.js b/react-native-gutenberg-bridge/index.js index 078fc88ebec6eb..50db5afee727c5 100644 --- a/react-native-gutenberg-bridge/index.js +++ b/react-native-gutenberg-bridge/index.js @@ -140,4 +140,12 @@ export function addMention() { return RNReactNativeGutenbergBridge.addMention(); } +export function requestStarterPageTemplatesTooltipShown( callback ) { + return RNReactNativeGutenbergBridge.requestStarterPageTemplatesTooltipShown( callback ); +} + +export function setStarterPageTemplatesTooltipShown( tooltipShown ) { + return RNReactNativeGutenbergBridge.setStarterPageTemplatesTooltipShown( tooltipShown ); +} + export default RNReactNativeGutenbergBridge; diff --git a/react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift b/react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift index 8e6679a2c30d39..c58b021d4ff4e8 100644 --- a/react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift +++ b/react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift @@ -160,7 +160,6 @@ public protocol GutenbergBridgeDelegate: class { /// func gutenbergDidRequestMediaEditor(with mediaUrl: URL, callback: @escaping MediaPickerDidPickMediaCallback) - /// Tells the delegate that the editor needs to log a custom event /// - Parameter event: The event key to be logged func gutenbergDidLogUserEvent(_ event: GutenbergUserEvent) @@ -168,6 +167,13 @@ public protocol GutenbergBridgeDelegate: class { /// Tells the delegate that the editor requested a mention /// - Parameter callback: Completion handler to be called with an user mention or an error func gutenbergDidRequestMention(callback: @escaping (Swift.Result) -> Void) + + /// Tells the delegate that the editor requested to show the tooltip + func gutenbergDidRequestStarterPageTemplatesTooltipShown() -> Bool + + /// Tells the delegate that the editor requested to set the tooltip's visibility + /// - Parameter tooltipShown: Tooltip's visibility value + func gutenbergDidRequestSetStarterPageTemplatesTooltipShown(_ tooltipShown: Bool) } // MARK: - Optional GutenbergBridgeDelegate methods diff --git a/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m b/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m index 208fe9e3928e47..61de75d7865c06 100644 --- a/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m +++ b/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m @@ -20,5 +20,7 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject) RCT_EXTERN_METHOD(requestMediaEditor:(NSString *)mediaUrl callback:(RCTResponseSenderBlock)callback) RCT_EXTERN_METHOD(logUserEvent:(NSString *)event properties:(NSDictionary *)properties) RCT_EXTERN_METHOD(addMention:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)rejecter) +RCT_EXTERN_METHOD(requestStarterPageTemplatesTooltipShown:(RCTResponseSenderBlock)callback) +RCT_EXTERN_METHOD(setStarterPageTemplatesTooltipShown:(BOOL)tooltipShown) @end diff --git a/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift b/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift index d658224026eb99..b1e7b1f62960e9 100644 --- a/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift +++ b/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift @@ -242,6 +242,17 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter { } }) } + + @objc + func requestStarterPageTemplatesTooltipShown(_ callback: @escaping RCTResponseSenderBlock) { + callback([self.delegate?.gutenbergDidRequestStarterPageTemplatesTooltipShown() ?? false]) + } + + @objc + func setStarterPageTemplatesTooltipShown(_ tooltipShown: Bool) { + self.delegate?.gutenbergDidRequestSetStarterPageTemplatesTooltipShown(tooltipShown) + } + } // MARK: - RCTBridgeModule delegate