[Global Styles] Implement Global Styles endpoint (#16411)

* Update Editor Theme to pull from WordPressKit Instead.

* Add Support For Global Styles endpoint

* Add New Data model changes for raw GSS settings

* Parse GSS setting and update Gutenberg event names

* Update App for BlockEditor Settings API Changes

* Fix test error

* Fix Remaining test errors

* Update Gutenberg ref

* Update native app for editor settings endpoint changes

* Update Gutenberg ref

* Store and Sort the colors and gradients based on the API order

* Migrate Core Data changes to 126 and re-add rawFeatures

* Update Gutenberg ref

* Update Gutenberg ref

* Updates Gutenberg reference

* Bump WPKit ref

* Add WP version check to enabling GSS

* Update WP Version checks and tests

* Update Gutenberg Reference

* Bump WordPressKit Version

Co-authored-by: Gerardo Pacheco <[email protected]>
Co-authored-by: Antonis Lilis <[email protected]>

MIGRATIONS.md

@@ -3,6 +3,17 @@
 This file documents changes in the data model. Please explain any changes to the
 data model as well as any custom migrations.
 
+## WordPress 127
+
+@chipsnyder 2021-07-1
+
+- `BlockEditorSettings`: added the attribute
+    - `rawStyles` (optional, no default, `String`)
+    - `rawFeatures` (optional, no default, `String`)
+
+- `BlockEditorSettingElement`: added the attribute
+    - `order` (required, 0, `Int`)
+
 ## WordPress 126
 
 @scoutharris 2021-06-28

Podfile

@@ -166,7 +166,7 @@ abstract_target 'Apps' do
     ## Gutenberg (React Native)
     ## =====================
     ##
-    gutenberg :tag => 'v1.56.0'
+    gutenberg :tag => 'v1.57.0-alpha1'
 
     ## Third party libraries
     ## =====================

WordPress/Classes/Models/BlockEditorSettingElement+CoreDataProperties.swift

@@ -33,6 +33,10 @@ extension BlockEditorSettingElement {
     ///
     @NSManaged public var name: String
 
+    /// Stores maintains the order as passed from the API
+    ///
+    @NSManaged public var order: Int
+
     /// Stores a reference back to the parent `BlockEditorSettings`.
     ///
     @NSManaged public var settings: BlockEditorSettings
@@ -48,12 +52,13 @@ extension BlockEditorSettingElement: Identifiable {
         ]
     }
 
-    convenience init(fromRawRepresentation rawObject: [String: String], type: BlockEditorSettingElementTypes, context: NSManagedObjectContext) {
+    convenience init(fromRawRepresentation rawObject: [String: String], type: BlockEditorSettingElementTypes, order: Int, context: NSManagedObjectContext) {
         self.init(context: context)
 
         self.type = type.rawValue
         self.value = rawObject[type.valueKey] ?? ""
         self.slug = rawObject[#keyPath(BlockEditorSettingElement.slug)] ?? ""
         self.name = rawObject[ #keyPath(BlockEditorSettingElement.name)] ?? ""
+        self.order = order
     }
 }

WordPress/Classes/Models/BlockEditorSettings+CoreDataProperties.swift

@@ -20,6 +20,14 @@ extension BlockEditorSettings {
     ///
     @NSManaged public var lastUpdated: Date
 
+    /// Stores the raw JSON string that comes from the Global Styles Setting Request. 
+    ///
+    @NSManaged public var rawStyles: String?
+
+    /// Stores the raw JSON string that comes from the Global Styles Setting Request.
+    ///
+    @NSManaged public var rawFeatures: String?
+
     /// Stores a set of attributes describing values that are represented with arrays in the API request.
     /// Available types are defined in `BlockEditorSettingElementTypes`
     ///

WordPress/Classes/Models/BlockEditorSettings+GutenbergEditorSettings.swift

@@ -0,0 +1,65 @@
+import Foundation
+import WordPressKit
+import Gutenberg
+
+extension BlockEditorSettings: GutenbergEditorSettings {
+    public var colors: [[String: String]]? {
+        elementsByType(.color)
+    }
+
+    public var gradients: [[String: String]]? {
+        elementsByType(.gradient)
+    }
+
+    private func elementsByType(_ type: BlockEditorSettingElementTypes) -> [[String: String]]? {
+        return elements?.sorted(by: { (lhs, rhs) -> Bool in
+            return lhs.order >= rhs.order
+        }).compactMap({ (element) -> [String: String]? in
+            guard element.type == type.rawValue else { return nil }
+            return element.rawRepresentation
+        })
+    }
+}
+
+extension BlockEditorSettings {
+    convenience init?(editorTheme: RemoteEditorTheme, context: NSManagedObjectContext) {
+        self.init(context: context)
+        self.isFSETheme = false
+        self.lastUpdated = Date()
+        self.checksum = editorTheme.checksum
+
+        var parsedElements = Set<BlockEditorSettingElement>()
+        if let themeSupport = editorTheme.themeSupport {
+            themeSupport.colors?.enumerated().forEach({ (index, color) in
+                parsedElements.insert(BlockEditorSettingElement(fromRawRepresentation: color, type: .color, order: index, context: context))
+            })
+
+            themeSupport.gradients?.enumerated().forEach({ (index, gradient) in
+                parsedElements.insert(BlockEditorSettingElement(fromRawRepresentation: gradient, type: .gradient, order: index, context: context))
+            })
+        }
+
+        self.elements = parsedElements
+    }
+
+    convenience init?(remoteSettings: RemoteBlockEditorSettings, context: NSManagedObjectContext) {
+        self.init(context: context)
+        self.isFSETheme = remoteSettings.isFSETheme
+        self.lastUpdated = Date()
+        self.checksum = remoteSettings.checksum
+        self.rawStyles = remoteSettings.rawStyles
+        self.rawFeatures = remoteSettings.rawFeatures
+
+        var parsedElements = Set<BlockEditorSettingElement>()
+
+        remoteSettings.colors?.enumerated().forEach({ (index, color) in
+            parsedElements.insert(BlockEditorSettingElement(fromRawRepresentation: color, type: .color, order: index, context: context))
+        })
+
+        remoteSettings.gradients?.enumerated().forEach({ (index, gradient) in
+            parsedElements.insert(BlockEditorSettingElement(fromRawRepresentation: gradient, type: .gradient, order: index, context: context))
+        })
+
+        self.elements = parsedElements
+    }
+}

WordPress/Classes/Models/Blog+BlockEditorSettings.swift

@@ -7,4 +7,10 @@ extension Blog {
     /// such as Global Styles and Full Site Editing settings and capabilities. 
     ///
     @NSManaged public var blockEditorSettings: BlockEditorSettings?
+
+    @objc
+    func supportsBlockEditorSettings() -> Bool {
+        guard FeatureFlag.globalStyleSettings.enabled else { return false }
+        return hasRequiredWordPressVersion("5.8")
+    }
 }

WordPress/Classes/Models/Blog.h

@@ -82,6 +82,7 @@ typedef NS_ENUM(NSUInteger, BlogFeature) {
     BlogFeatureStories,
     /// Does the blog support Jetpack contact info block?
     BlogFeatureContactInfo,
+    BlogFeatureBlockEditorSettings,
     /// Does the blog support the Layout grid block?
     BlogFeatureLayoutGrid,
 };
@@ -280,6 +281,10 @@ typedef NS_ENUM(NSInteger, SiteVisibility) {
  */
 - (BOOL)isBasicAuthCredentialStored;
 
+/// Checks the blogs installed WordPress version is more than or equal to the requiredVersion
+/// @param requiredVersion The minimum version to check for
+- (BOOL)hasRequiredWordPressVersion:(NSString *)requiredVersion;
+
 @end
 
 NS_ASSUME_NONNULL_END

WordPress/Classes/Models/Blog.m

@@ -567,6 +567,8 @@ - (BOOL)supports:(BlogFeature)feature
             return [self supportsStories];
         case BlogFeatureContactInfo:
             return [self supportsContactInfo];
+        case BlogFeatureBlockEditorSettings:
+            return [self supportsBlockEditorSettings];
         case BlogFeatureLayoutGrid:
             return [self supportsLayoutGrid];
     }