Add post title to Gutenberg Mobile

ios/gutenberg.xcodeproj/project.pbxproj

@@ -45,6 +45,10 @@
 		F151983C2100DC3D000F6E97 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F15198392100DC3D000F6E97 /* AppDelegate.swift */; };
 		F151983D2100DC3D000F6E97 /* MediaProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = F151983A2100DC3D000F6E97 /* MediaProvider.swift */; };
 		F19CFDA821021EB100EAB240 /* Aztec.framework in CopyFiles */ = {isa = PBXBuildFile; fileRef = F1289ECA2100E4320091E81D /* Aztec.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
+		F1EE6F7821E7F0A500241744 /* NotoSerif-BoldItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F1EE6F7421E7F0A500241744 /* NotoSerif-BoldItalic.ttf */; };
+		F1EE6F7921E7F0A500241744 /* NotoSerif-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F1EE6F7521E7F0A500241744 /* NotoSerif-Regular.ttf */; };
+		F1EE6F7A21E7F0A500241744 /* NotoSerif-Italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F1EE6F7621E7F0A500241744 /* NotoSerif-Italic.ttf */; };
+		F1EE6F7B21E7F0A500241744 /* NotoSerif-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F1EE6F7721E7F0A500241744 /* NotoSerif-Bold.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -423,6 +427,10 @@
 		F15198372100DC3C000F6E97 /* gutenberg-Bridging-Header.h */ = {isa = PBXFileReference; indentWidth = 4; lastKnownFileType = sourcecode.c.h; path = "gutenberg-Bridging-Header.h"; sourceTree = "<group>"; tabWidth = 1; };
 		F15198392100DC3D000F6E97 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; indentWidth = 4; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = gutenberg/AppDelegate.swift; sourceTree = "<group>"; tabWidth = 1; };
 		F151983A2100DC3D000F6E97 /* MediaProvider.swift */ = {isa = PBXFileReference; fileEncoding = 4; indentWidth = 4; lastKnownFileType = sourcecode.swift; name = MediaProvider.swift; path = gutenberg/MediaProvider.swift; sourceTree = "<group>"; tabWidth = 1; usesTabs = 0; };
+		F1EE6F7421E7F0A500241744 /* NotoSerif-BoldItalic.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-BoldItalic.ttf"; sourceTree = "<group>"; };
+		F1EE6F7521E7F0A500241744 /* NotoSerif-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Regular.ttf"; sourceTree = "<group>"; };
+		F1EE6F7621E7F0A500241744 /* NotoSerif-Italic.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Italic.ttf"; sourceTree = "<group>"; };
+		F1EE6F7721E7F0A500241744 /* NotoSerif-Bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Bold.ttf"; sourceTree = "<group>"; };
 		F619623252704B46A619C33C /* RNTAztecView.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNTAztecView.xcodeproj; path = "../react-native-aztec/ios/RNTAztecView.xcodeproj"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -678,6 +686,7 @@
 			isa = PBXGroup;
 			children = (
 				13B07FAE1A68108700A75B9A /* gutenberg */,
+				F1EE6F7221E7F0A500241744 /* resources */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* gutenbergTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
@@ -744,6 +753,26 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		F1EE6F7221E7F0A500241744 /* resources */ = {
+			isa = PBXGroup;
+			children = (
+				F1EE6F7321E7F0A500241744 /* fonts */,
+			);
+			name = resources;
+			path = ../resources;
+			sourceTree = "<group>";
+		};
+		F1EE6F7321E7F0A500241744 /* fonts */ = {
+			isa = PBXGroup;
+			children = (
+				F1EE6F7421E7F0A500241744 /* NotoSerif-BoldItalic.ttf */,
+				F1EE6F7521E7F0A500241744 /* NotoSerif-Regular.ttf */,
+				F1EE6F7621E7F0A500241744 /* NotoSerif-Italic.ttf */,
+				F1EE6F7721E7F0A500241744 /* NotoSerif-Bold.ttf */,
+			);
+			path = fonts;
+			sourceTree = "<group>";
+		};
 		FFEDF6EF21241BDF007FCC6D /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -1266,7 +1295,11 @@
 			buildActionMask = 2147483647;
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				F1EE6F7B21E7F0A500241744 /* NotoSerif-Bold.ttf in Resources */,
+				F1EE6F7921E7F0A500241744 /* NotoSerif-Regular.ttf in Resources */,
+				F1EE6F7A21E7F0A500241744 /* NotoSerif-Italic.ttf in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				F1EE6F7821E7F0A500241744 /* NotoSerif-BoldItalic.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/gutenberg/GutenbergViewController.swift

@@ -30,11 +30,14 @@ class GutenbergViewController: UIViewController {
 
 extension GutenbergViewController: GutenbergBridgeDelegate {
     func gutenbergDidLoad() {
-
+        
     }
 
-    func gutenbergDidProvideHTML(_ html: String, changed: Bool) {
-        print("Did receive HTML: \(html) changed: \(changed)")
+    func gutenbergDidProvideHTML(title: String, html: String, changed: Bool) {
+        print("didProvideHTML:")
+        print("↳ Content changed: \(changed)")
+        print("↳ Title: \(title)")
+        print("↳ HTML: \(html)")
     }
 
     func gutenbergDidRequestMediaPicker(with callback: @escaping MediaPickerDidPickMediaCallback) {
@@ -47,6 +50,10 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
     func gutenbergInitialContent() -> String? {
         return nil
     }
+
+    func gutenbergInitialTitle() -> String? {
+        return nil
+    }
 
     func aztecAttachmentDelegate() -> TextViewAttachmentDelegate {
         return ExampleAttachmentDelegate()

ios/gutenberg/Info.plist

@@ -2,6 +2,13 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>NotoSerif-BoldItalic.ttf</string>
+		<string>NotoSerif-Regular.ttf</string>
+		<string>NotoSerif-Italic.ttf</string>
+		<string>NotoSerif-Bold.ttf</string>
+	</array>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -41,7 +48,6 @@
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
 	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
 	<dict>
 		<key>NSExceptionDomains</key>
 		<dict>

jest/setup.js

@@ -4,6 +4,7 @@ jest.mock( '../react-native-gutenberg-bridge', () => {
 		removeEventListener: jest.fn(),
 		subscribeParentGetHtml: jest.fn(),
 		subscribeParentToggleHTMLMode: jest.fn(),
+		subscribeSetTitle: jest.fn(),
 		subscribeUpdateHtml: jest.fn(),
 	};
 } );

react-native-gutenberg-bridge/index.js

@@ -28,6 +28,10 @@ export function subscribeParentToggleHTMLMode( callback ) {
 	return gutenbergBridgeEvents.addListener( 'toggleHTMLMode', callback );
 }
 
+export function subscribeSetTitle( callback ) {
+	return gutenbergBridgeEvents.addListener( 'setTitle', callback );
+}
+
 export function subscribeUpdateHtml( callback ) {
 	return gutenbergBridgeEvents.addListener( 'updateHtml', callback );
 }

react-native-gutenberg-bridge/ios/Gutenberg.swift

@@ -34,10 +34,17 @@ public class Gutenberg: NSObject {
     }()
 
     private var initialProps: [String: String]? {
-        guard let initialContent = dataSource.gutenbergInitialContent() else {
-            return nil
+        var initialProps = [String: String]()
+
+        if let initialContent = dataSource.gutenbergInitialContent() {
+            initialProps["initialData"] = initialContent
         }
-        return ["initialData": initialContent]
+
+        if let initialTitle = dataSource.gutenbergInitialTitle() {
+            initialProps["initialTitle"] = initialTitle
+        }
+
+        return initialProps
     }
 
     public init(dataSource: GutenbergBridgeDataSource) {
@@ -56,8 +63,12 @@ public class Gutenberg: NSObject {
         bridgeModule.sendEvent(withName: EventName.toggleHTMLMode, body: nil)
     }
 
+    public func setTitle(_ title: String) {
+        bridgeModule.sendEvent(withName: EventName.setTitle, body: ["title": title])
+    }
+
     public func updateHtml(_ html: String) {
-        bridgeModule.sendEvent(withName: EventName.updateHtml, body: [ "html": html ])
+        bridgeModule.sendEvent(withName: EventName.updateHtml, body: ["html": html])
     }
 }
 
@@ -77,6 +88,7 @@ extension Gutenberg: RCTBridgeDelegate {
 extension Gutenberg {
     enum EventName {
         static let requestHTML = "requestGetHtml"
+        static let setTitle = "setTitle"
         static let toggleHTMLMode = "toggleHTMLMode"
         static let updateHtml = "updateHtml"
     }

react-native-gutenberg-bridge/ios/GutenbergBridgeDataSource.swift

@@ -6,6 +6,12 @@ public protocol GutenbergBridgeDataSource: class {
     ///
     /// - Returns: The HTML initial content or nil.
     func gutenbergInitialContent() -> String?
+
+    /// Asks the data source for the initial title to be presented by the editor.
+    /// Return `nil` to show the example content.
+    ///
+    /// - Returns: The HTML initial title or nil.
+    func gutenbergInitialTitle() -> String?
 
     /// Asks the data source for an object conforming to `TextViewAttachmentDelegate`
     /// to handle media loading.

react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift

@@ -5,9 +5,10 @@ public protocol GutenbergBridgeDelegate: class {
     /// You can request HTML content by calling `requestHTML()` on a Gutenberg bridge instance.
     ///
     /// - Parameters:
-    ///   - html: The current HTML presented by the editor.
-    ///   - changed: True if the given HTML presents changes from the last request or initial value.
-    func gutenbergDidProvideHTML(_ html: String, changed: Bool)
+    ///     - title: the title as shown by the editor.
+    ///     - html: The current HTML presented by the editor.
+    ///     - changed: True if the given HTML presents changes from the last request or initial value.
+    func gutenbergDidProvideHTML(title: String, html: String, changed: Bool)
 
     /// Tells the delegate that an image block requested an image from the media picker.
     ///

react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m

@@ -2,7 +2,7 @@
 
 @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 
-RCT_EXTERN_METHOD(provideToNative_Html:(NSString *)html changed:(BOOL)changed)
+RCT_EXTERN_METHOD(provideToNative_Html:(NSString *)html title:(NSString*)title changed:(BOOL)changed)
 RCT_EXTERN_METHOD(onMediaLibraryPress:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(editorDidLayout)
 

react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift

@@ -6,9 +6,9 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
     // MARK: - Messaging methods
 
     @objc
-    func provideToNative_Html(_ html: String, changed: Bool) {
+    func provideToNative_Html(_ html: String, title: String, changed: Bool) {
         DispatchQueue.main.async {
-            self.delegate?.gutenbergDidProvideHTML(html, changed: changed)
+            self.delegate?.gutenbergDidProvideHTML(title: title, html: html, changed: changed)
         }
     }
 
@@ -36,6 +36,7 @@ extension RNReactNativeGutenbergBridge {
         return [
             Gutenberg.EventName.requestHTML,
             Gutenberg.EventName.toggleHTMLMode,
+            Gutenberg.EventName.setTitle,
             Gutenberg.EventName.updateHtml
         ]
     }

src/app/App.js

@@ -27,14 +27,23 @@ if ( ! __DEV__ ) {
 type PropsType = {
 	initialData: string,
 	initialHtmlModeEnabled: boolean,
+	initialTitle: string,
 };
 
-const AppProvider = ( { initialData, initialHtmlModeEnabled }: PropsType ) => {
+const AppProvider = ( { initialTitle, initialData, initialHtmlModeEnabled }: PropsType ) => {
 	if ( initialData === undefined ) {
 		initialData = initialHtml;
 	}
+
+	if ( initialTitle === undefined ) {
+		initialTitle = 'Welcome to Gutenberg!';
+	}
+
 	return (
-		<AppContainer initialHtml={ initialData } initialHtmlModeEnabled={ initialHtmlModeEnabled } />
+		<AppContainer
+			initialHtml={ initialData }
+			initialHtmlModeEnabled={ initialHtmlModeEnabled }
+			title={ initialTitle } />
 	);
 };
 

src/app/App.test.js

@@ -46,7 +46,7 @@ describe( 'App', () => {
 			.forEach( ( blockHolder ) => {
 				if ( 'core/heading' === blockHolder.props.name ) {
 					const aztec = blockHolder.findByType( 'RCTAztecView' );
-					expect( aztec.props.text.text ).toBe( '<h2>Welcome to Gutenberg</h2>' );
+					expect( aztec.props.text.text ).toBe( '<h2>What is Gutenberg?</h2>' );
 				}
 			} );
 	} );

src/app/AppContainer.js

@@ -28,13 +28,19 @@ type PropsType = {
 	onSelect: string => mixed,
 	clearSelectedBlock: void => void,
 	onAttributesUpdate: ( string, mixed ) => mixed,
+	title: string,
 	initialHtml: string,
 	setupEditor: ( mixed, ?mixed ) => mixed,
 	clientId: string,
 };
 
-class AppContainer extends React.Component<PropsType> {
+type StateType = {
+	title: string,
+};
+
+class AppContainer extends React.Component<PropsType, StateType> {
 	lastHtml: ?string;
+	lastTitle: ?string;
 
 	constructor( props: PropsType ) {
 		super( props );
@@ -47,8 +53,13 @@ class AppContainer extends React.Component<PropsType> {
 			type: 'draft',
 		};
 
-		this.props.setupEditor( post );
+		this.state = {
+			title: props.title,
+		};
+
+		props.setupEditor( post );
 		this.lastHtml = serialize( parse( props.initialHtml ) );
+		this.lastTitle = props.title;
 
 		if ( props.initialHtmlModeEnabled && ! props.showHtml ) {
 			// enable html mode if the initial mode the parent wants it but we're not already in it
@@ -91,15 +102,24 @@ class AppContainer extends React.Component<PropsType> {
 		if ( this.props.showHtml ) {
 			this.parseBlocksAction( this.props.editedPostContent );
 		}
+
 		const html = serialize( this.props.blocks );
-		RNReactNativeGutenbergBridge.provideToNative_Html( html, this.lastHtml !== html );
+		const hasChanges = this.state.title !== this.lastTitle || this.lastHtml !== html;
+
+		RNReactNativeGutenbergBridge.provideToNative_Html( html, this.state.title, hasChanges );
+
+		this.lastTitle = this.state.title;
 		this.lastHtml = html;
 	};
 
 	toggleHtmlModeAction = () => {
 		this.props.onToggleBlockMode( this.props.rootClientId );
 	};
 
+	setTitleAction = ( title: string ) => {
+		this.setState( { title: title } );
+	};
+
 	updateHtmlAction = ( html: string ) => {
 		this.parseBlocksAction( html );
 	};
@@ -122,9 +142,11 @@ class AppContainer extends React.Component<PropsType> {
 				createBlockAction={ this.createBlockAction }
 				serializeToNativeAction={ this.serializeToNativeAction }
 				toggleHtmlModeAction={ this.toggleHtmlModeAction }
+				setTitleAction={ this.setTitleAction }
 				updateHtmlAction={ this.updateHtmlAction }
 				mergeBlocksAction={ this.mergeBlocksAction }
 				isBlockSelected={ this.props.isBlockSelected }
+				title={ this.state.title }
 			/>
 		);
 	}

src/app/MainApp.js

@@ -5,6 +5,7 @@ import React from 'react';
 import {
 	subscribeParentGetHtml,
 	subscribeParentToggleHTMLMode,
+	subscribeSetTitle,
 	subscribeUpdateHtml,
 } from 'react-native-gutenberg-bridge';
 
@@ -25,6 +26,7 @@ type PropsType = {
 	createBlockAction: ( string, BlockType ) => mixed,
 	serializeToNativeAction: void => void,
 	toggleHtmlModeAction: void => void,
+	setTitleAction: string => void,
 	updateHtmlAction: string => void,
 	mergeBlocksAction: ( string, string ) => mixed,
 	blocks: Array<BlockType>,
@@ -37,6 +39,7 @@ type StateType = {};
 export default class MainScreen extends React.Component<PropsType, StateType> {
 	subscriptionParentGetHtml: ?EmitterSubscription;
 	subscriptionParentToggleHTMLMode: ?EmitterSubscription;
+	subscriptionParentSetTitle: ?EmitterSubscription;
 	subscriptionParentUpdateHtml: ?EmitterSubscription;
 
 	componentDidMount() {
@@ -48,6 +51,10 @@ export default class MainScreen extends React.Component<PropsType, StateType> {
 			this.props.toggleHtmlModeAction();
 		} );
 
+		this.subscriptionParentSetTitle = subscribeSetTitle( ( payload ) => {
+			this.props.setTitleAction( payload.title );
+		} );
+
 		this.subscriptionParentUpdateHtml = subscribeUpdateHtml( ( payload ) => {
 			this.props.updateHtmlAction( payload.html );
 		} );
@@ -60,6 +67,9 @@ export default class MainScreen extends React.Component<PropsType, StateType> {
 		if ( this.subscriptionParentToggleHTMLMode ) {
 			this.subscriptionParentToggleHTMLMode.remove();
 		}
+		if ( this.subscriptionParentSetTitle ) {
+			this.subscriptionParentSetTitle.remove();
+		}
 		if ( this.subscriptionParentUpdateHtml ) {
 			this.subscriptionParentUpdateHtml.remove();
 		}