feat: Editor theme styles preferences align with web defaults (#24958)

* feat: Relocate editor theme style preference to site settings

Site settings is a more appropriate long-term location than experimental
features.

* task: Remove unused editor theme styles feature flag

* feat: Enable editor theme styles by default

Align with the web editor defaults.

* feat: Display editor theme styles preference for WPCOM Simple sites

* feat: Hide the editor theme styles toggle when GutenbergKit is disabled

This toggle only impacts GutenbergKit.

* feat: Separate footnotes for editor preference toggles

* refactor: Remove unused SiteSettingsEditor enum

This became unnecessary once we used two sections for each toggle.

Author: dcalhoun

WordPress/Classes/Utility/BuildInformation/FeatureFlag.swift

@@ -20,7 +20,6 @@ public enum FeatureFlag: Int, CaseIterable {
     case googleDomainsCard
     case voiceToContent
     case allowApplicationPasswords
-    case newGutenbergThemeStyles
     case selfHostedSiteUserManagement
     case readerGutenbergCommentComposer
     case pluginManagementOverhaul
@@ -72,8 +71,6 @@ public enum FeatureFlag: Int, CaseIterable {
             return app == .jetpack && BuildConfiguration.current.isInternal
         case .allowApplicationPasswords:
             return false
-        case .newGutenbergThemeStyles:
-            return false
         case .selfHostedSiteUserManagement:
             return false
         case .readerGutenbergCommentComposer:
@@ -126,7 +123,6 @@ extension FeatureFlag {
         case .googleDomainsCard: "Google Domains Promotional Card"
         case .voiceToContent: "Voice to Content"
         case .allowApplicationPasswords: "Allow creating Application Passwords"
-        case .newGutenbergThemeStyles: "Experimental Block Editor Styles"
         case .selfHostedSiteUserManagement: "Self-hosted Site User Management"
         case .pluginManagementOverhaul: "Plugin Management Overhaul"
         case .readerGutenbergCommentComposer: "Gutenberg Comment Composer"

WordPress/Classes/Utility/Editor/EditorConfiguration+Blog.swift

@@ -42,7 +42,7 @@ extension EditorConfiguration {
             .setSiteApiNamespace(siteApiNamespace)
             .setNamespaceExcludedPaths(["/wpcom/v2/following/recommendations", "/wpcom/v2/following/mine"])
             .setAuthHeader(authHeader)
-            .setShouldUseThemeStyles(FeatureFlag.newGutenbergThemeStyles.enabled)
+            .setShouldUseThemeStyles(GutenbergSettings().isThemeStylesEnabled(for: blog))
             // Limited to Jetpack-connected sites until editor assets endpoint is available in WordPress core
             .setShouldUsePlugins(Self.shouldEnablePlugins(for: blog, appPassword: applicationPassword))
             .setLocale(WordPressComLanguageDatabase().deviceLanguage.slug)

WordPress/Classes/Utility/Editor/GutenbergSettings.swift

@@ -16,6 +16,10 @@ class GutenbergSettings {
             let url = urlString(fromBlogURL: url)
             return "kShowGutenbergPhase2Dialog-" + url
         }
+        static func themeStylesEnabled(forBlogURL url: String?) -> String {
+            let url = urlString(fromBlogURL: url)
+            return "com.wordpress.gutenberg-theme-styles-" + url
+        }
         static let focalPointPickerTooltipShown = "kGutenbergFocalPointPickerTooltipShown"
         static let blockTypeImpressions = "kBlockTypeImpressions"
 
@@ -214,6 +218,33 @@ class GutenbergSettings {
         database.set(true, forKey: Key.enabledOnce(forBlogURL: blog.url))
         return .gutenberg
     }
+
+    // MARK: - Theme Styles
+
+    /// Returns whether theme styles should be enabled for the given blog.
+    ///
+    /// - Parameter blog: The blog to check theme styles setting for
+    /// - Returns: true if theme styles are enabled (default: true), false if explicitly disabled
+    func isThemeStylesEnabled(for blog: Blog) -> Bool {
+        let key = Key.themeStylesEnabled(forBlogURL: blog.url)
+
+        // If the preference has been explicitly set, return its value
+        if database.object(forKey: key) != nil {
+            return database.bool(forKey: key)
+        }
+
+        // Default to enabled for sites that haven't set a preference
+        return true
+    }
+
+    /// Sets whether theme styles should be enabled for the given blog.
+    ///
+    /// - Parameters:
+    ///   - isEnabled: Whether to enable theme styles
+    ///   - blog: The blog to set theme styles setting for
+    func setThemeStylesEnabled(_ isEnabled: Bool, for blog: Blog) {
+        database.set(isEnabled, forKey: Key.themeStylesEnabled(forBlogURL: blog.url))
+    }
 }
 
 @objc(GutenbergSettings)
@@ -232,6 +263,16 @@ public class GutenbergSettingsBridge: NSObject {
     public static func isSimpleWPComSite(_ blog: Blog) -> Bool {
         return GutenbergSettings().isSimpleWPComSite(blog)
     }
+
+    @objc(isThemeStylesEnabledForBlog:)
+    public static func isThemeStylesEnabled(for blog: Blog) -> Bool {
+        return GutenbergSettings().isThemeStylesEnabled(for: blog)
+    }
+
+    @objc(setThemeStylesEnabled:forBlog:)
+    public static func setThemeStylesEnabled(_ isEnabled: Bool, for blog: Blog) {
+        GutenbergSettings().setThemeStylesEnabled(isEnabled, for: blog)
+    }
 }
 
 private extension String {

WordPress/Classes/ViewRelated/Blog/Site Settings/SiteSettingsViewController+Swift.swift

@@ -190,13 +190,20 @@ extension SiteSettingsViewController {
         return footer
     }
 
-    @objc(getEditorSettingsSectionFooterView)
-    public func editorSettingsSectionFooterView() -> UIView {
+    @objc(getBlockEditorSectionFooterView)
+    public func blockEditorSectionFooterView() -> UIView {
         let footer = makeFooterView()
         footer.textLabel?.text = NSLocalizedString("Edit new posts and pages with the block editor.", comment: "Explanation for the option to enable the block editor")
         return footer
     }
 
+    @objc(getThemeStylesSectionFooterView)
+    public func themeStylesSectionFooterView() -> UIView {
+        let footer = makeFooterView()
+        footer.textLabel?.text = NSLocalizedString("Make the block editor look like your theme.", comment: "Explanation for the option to enable theme styles")
+        return footer
+    }
+
     private func makeFooterView() -> UITableViewHeaderFooterView {
         let footer = UITableViewHeaderFooterView()
         footer.textLabel?.numberOfLines = 0

WordPress/Classes/ViewRelated/Blog/Site Settings/SiteSettingsViewController.h

@@ -8,7 +8,8 @@ typedef NS_ENUM(NSInteger, SiteSettingsSection) {
     SiteSettingsSectionBlogging,
     SiteSettingsSectionHomepage,
     SiteSettingsSectionAccount,
-    SiteSettingsSectionEditor,
+    SiteSettingsSectionBlockEditor,
+    SiteSettingsSectionThemeStyles,
     SiteSettingsSectionWriting,
     SiteSettingsSectionMedia,
     SiteSettingsSectionDiscussion,

WordPress/Classes/ViewRelated/Blog/Site Settings/SiteSettingsViewController.m

@@ -25,11 +25,6 @@
     SiteSettingsHomepageCount,
 };
 
-NS_ENUM(NSInteger, SiteSettingsEditor) {
-    SiteSettingsEditorSelector = 0,
-    SiteSettingsEditorCount,
-};
-
 NS_ENUM(NSInteger, SiteSettingsWriting) {
     SiteSettingsWritingDefaultCategory = 0,
     SiteSettingsWritingTags,
@@ -61,6 +56,7 @@ @interface SiteSettingsViewController () <UITableViewDelegate, UITextFieldDelega
 @property (nonatomic, strong) SettingTableViewCell *passwordTextCell;
 #pragma mark - Writing Section
 @property (nonatomic, strong) SwitchTableViewCell  *editorSelectorCell;
+@property (nonatomic, strong) SwitchTableViewCell  *themeStylesSelectorCell;
 @property (nonatomic, strong) SettingTableViewCell *defaultCategoryCell;
 @property (nonatomic, strong) SettingTableViewCell *tagsCell;
 @property (nonatomic, strong) SettingTableViewCell *customTaxonomiesCell;
@@ -170,9 +166,14 @@ - (NSArray *)tableSections
         [sections addObject:@(SiteSettingsSectionAccount)];
     }
 
-    // Only add the editor section if the site is not a Simple WP.com site
+    // Only show "Use block editor" toggle for non-Simple WP.com sites
     if (![GutenbergSettings isSimpleWPComSite:self.blog]) {
-        [sections addObject:@(SiteSettingsSectionEditor)];
+        [sections addObject:@(SiteSettingsSectionBlockEditor)];
+    }
+
+    // Only show theme styles toggle when GutenbergKit is enabled
+    if ([RemoteFeature enabled:RemoteFeatureFlagNewGutenberg]) {
+        [sections addObject:@(SiteSettingsSectionThemeStyles)];
     }
 
     if ([self.blog supports:BlogFeatureWPComRESTAPI] && self.blog.isAdmin) {
@@ -251,9 +252,13 @@ - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger
         {
             return SiteSettingsAccountCount;
         }
-        case SiteSettingsSectionEditor:
+        case SiteSettingsSectionBlockEditor:
         {
-            return SiteSettingsEditorCount;
+            return 1;
+        }
+        case SiteSettingsSectionThemeStyles:
+        {
+            return 1;
         }
         case SiteSettingsSectionWriting:
         {
@@ -347,6 +352,20 @@ - (SwitchTableViewCell *)editorSelectorCell
     return _editorSelectorCell;
 }
 
+- (SwitchTableViewCell *)themeStylesSelectorCell
+{
+    if (!_themeStylesSelectorCell) {
+        _themeStylesSelectorCell = [SwitchTableViewCell new];
+        _themeStylesSelectorCell.name = NSLocalizedString(@"Use theme styles", @"Option to enable theme styles in the block editor");
+        _themeStylesSelectorCell.flipSwitch.accessibilityIdentifier = @"useThemeStylesSwitch";
+        __weak Blog *blog = self.blog;
+        _themeStylesSelectorCell.onChange = ^(BOOL value){
+            [GutenbergSettings setThemeStylesEnabled:value forBlog:blog];
+        };
+    }
+    return _themeStylesSelectorCell;
+}
+
 - (SettingTableViewCell *)defaultCategoryCell
 {
     if (_defaultCategoryCell){
@@ -508,6 +527,11 @@ - (void)configureEditorSelectorCell
     [self.editorSelectorCell setOn:self.blog.isGutenbergEnabled];
 }
 
+- (void)configureThemeStylesSelectorCell
+{
+    [self.themeStylesSelectorCell setOn:[GutenbergSettings isThemeStylesEnabledForBlog:self.blog]];
+}
+
 - (void)configureDefaultCategoryCell
 {
     PostCategory *postCategory = [PostCategory lookupWithBlogObjectID:self.blog.objectID
@@ -526,16 +550,6 @@ - (void)configurePostsPerPageCell
     [self.postsPerPageCell setTextValue:self.blog.settings.postsPerPage.stringValue];
 }
 
-- (UITableViewCell *)tableView:(UITableView *)tableView cellForEditorSettingsAtRow:(NSInteger)row
-{
-    switch (row) {
-        case (SiteSettingsEditorSelector):
-            [self configureEditorSelectorCell];
-            return self.editorSelectorCell;
-    }
-    return nil;
-}
-
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForWritingSettingsAtRow:(NSInteger)row
 {
     NSInteger writingRow = [self.writingSectionRows[row] integerValue];
@@ -665,8 +679,13 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
         case SiteSettingsSectionAccount:
             return [self tableView:tableView cellForAccountSettingsInRow:indexPath.row];
 
-        case SiteSettingsSectionEditor:
-            return [self tableView:tableView cellForEditorSettingsAtRow:indexPath.row];
+        case SiteSettingsSectionBlockEditor:
+            [self configureEditorSelectorCell];
+            return self.editorSelectorCell;
+
+        case SiteSettingsSectionThemeStyles:
+            [self configureThemeStylesSelectorCell];
+            return self.themeStylesSelectorCell;
 
         case SiteSettingsSectionWriting:
             return [self tableView:tableView cellForWritingSettingsAtRow:indexPath.row];
@@ -729,8 +748,16 @@ - (NSString *)titleForHeaderInSection:(NSInteger)section
             headingTitle = NSLocalizedString(@"Account", @"Title for the account section in site settings screen");
             break;
 
-        case SiteSettingsSectionEditor:
-            headingTitle = NSLocalizedString(@"Editor", @"Title for the editor settings section");
+        case SiteSettingsSectionBlockEditor:
+            headingTitle = NSLocalizedString(@"Editor", @"Title for the editor section in site settings screen");
+            break;
+
+        case SiteSettingsSectionThemeStyles:
+            // Only show "Editor" header if this is the first editor section
+            // (i.e., if block editor section is not present)
+            if (![self.tableSections containsObject:@(SiteSettingsSectionBlockEditor)]) {
+                headingTitle = NSLocalizedString(@"Editor", @"Title for the editor section in site settings screen");
+            }
             break;
 
         case SiteSettingsSectionWriting:
@@ -761,8 +788,12 @@ -(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)
     NSInteger settingsSection = [self.tableSections[section] integerValue];
     UIView *footerView = nil;
     switch (settingsSection) {
-        case SiteSettingsSectionEditor:
-            footerView = [self getEditorSettingsSectionFooterView];
+        case SiteSettingsSectionBlockEditor:
+            footerView = [self getBlockEditorSectionFooterView];
+            break;
+
+        case SiteSettingsSectionThemeStyles:
+            footerView = [self getThemeStylesSectionFooterView];
             break;
 
         case SiteSettingsSectionTraffic:

WordPress/Classes/ViewRelated/Me/App Settings/ExperimentalFeaturesDataProvider.swift

@@ -10,7 +10,6 @@ class ExperimentalFeaturesDataProvider: ExperimentalFeaturesViewModel.DataProvid
         FeatureFlag.newStats,
         FeatureFlag.allowApplicationPasswords,
         RemoteFeatureFlag.newGutenberg,
-        FeatureFlag.newGutenbergThemeStyles,
         FeatureFlag.newSupport,
     ]