Merge pull request #405 from BeAPI/feat/editor-settings-php

Move all editor settings to PHP

Author: francoistibo

README.md

@@ -109,3 +109,25 @@ You can launch a bundle report with the following command :
 ```bash
 yarn bundle-report
 ```
+
+## WordPress Editor (Gutenberg)
+
+### Customize blocks
+
+The `bff_editor_custom_settings` filter allow you to customize blocks styles and variations. For example:
+
+```php
+add_filter( 'bff_editor_custom_settings', 'customize_editor_settings', 10, 1 );
+function customize_editor_settings( $settings ) {
+	// Disable all block styles for Separator block
+	$settings[ 'disableAllBlocksStyles' ] = [ 'core/separator' ];
+
+	// Disable specific block style for Button block
+	$settings[ 'disabledBlocksStyles' ]   = [ 'core/button' => [ 'outline' ] ];
+
+	// Allow only YouTube variation for Embed block
+	$settings[ 'allowedBlocksVariations' ] = [ 'core/embed' => [ 'youtube' ] ];
+
+	return $settings;
+}
+```

inc/Services/Editor.php

@@ -48,6 +48,11 @@ public function boot( Service_Container $container ): void {
 		 */
 		$this->register_custom_block_styles();
 
+		/**
+		 * Customize theme.json settings
+		 */
+		add_filter( 'wp_theme_json_data_theme', [ $this, 'filter_theme_json_theme' ], 10, 1 );
+
 		/**
 		 * Load editor JS for ADMIN
 		 */
@@ -154,6 +159,27 @@ private function style(): void {
 		add_editor_style( 'dist/' . $file );
 	}
 
+	/**
+	 * Theme.json settings
+	 * See https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/
+	 *
+	 * @param WP_Theme_JSON_Data $theme_json Class to access and update the underlying data.
+	 *
+	 * return WP_Theme_JSON_Data
+	 */
+	public function filter_theme_json_theme( \WP_Theme_JSON_Data $theme_json ): \WP_Theme_JSON_Data {
+		$custom_theme_json = [
+			'version'  => 2,
+			'settings' => [
+				'typography' => [
+					'dropCap' => false,
+				],
+			],
+		];
+
+		return $theme_json->update_with( $custom_theme_json );
+	}
+
 	/**
 	 * Editor script
 	 */
@@ -173,6 +199,32 @@ public function admin_editor_script(): void {
 			$asset_data['version'],
 			true
 		);
+
+		$this->assets_tools->add_inline_script(
+			'theme-admin-editor-script',
+			'const BFFEditorSettings = ' . wp_json_encode(
+				apply_filters(
+					'bff_editor_custom_settings',
+					[
+						'disableAllBlocksStyles'  => [
+							'core/separator',
+							'core/quote',
+							'core/pullquote',
+							'core/table',
+							'core/image',
+						],
+						'disabledBlocksStyles'    => [
+							// 'core/button' => [ 'outline' ]
+						],
+						'allowedBlocksVariations' => [
+							'core/embed' => [ 'youtube', 'vimeo', 'dailymotion' ],
+						],
+					]
+				)
+			),
+			'before'
+		);
+
 		$this->assets_tools->enqueue_script( 'theme-admin-editor-script' );
 	}
 

inc/Tools/Assets.php

@@ -25,6 +25,19 @@ public function register_script( string $handle, string $src, array $deps = [],
 		return \wp_register_script( $handle, \get_theme_file_uri( $src ), $deps, $ver, $in_footer );
 	}
 
+	/**
+	 * Add inline script to a registered script.
+	 *
+	 * @param string $handle
+	 * @param string $data
+	 * @param string $position
+	 *
+	 * @return bool
+	 */
+	public function add_inline_script( string $handle, string $data, string $position = 'after' ): bool {
+		return \wp_add_inline_script( $handle, $data, $position );
+	}
+
 	/**
 	 * @param string $handle
 	 */

src/js/editor.js

@@ -1,3 +1,7 @@
+/* global BFFEditorSettings */
+
+/* Customize BFFEditorSettings in inc/Services/Editor.php or with `bff_editor_custom_settings` filter (see readme). */
+
 import lazySizes from 'lazysizes'
 import 'lazysizes/plugins/native-loading/ls.native-loading'
 import 'lazysizes/plugins/object-fit/ls.object-fit'
@@ -15,14 +19,23 @@ lazySizes.cfg.nativeLoading = {
 
 // Native Gutenberg
 domReady(() => {
-  unregisterBlockStyle('core/separator', ['wide', 'dots'])
-  // whitelist core embeds
-  const allowedEmbedVariants = ['youtube', 'vimeo', 'dailymotion']
-  getBlockVariations('core/embed').forEach((variant) => {
-    if (!allowedEmbedVariants.includes(variant.name)) {
-      unregisterBlockVariation('core/embed', variant.name)
-    }
-  })
+  // Disable specific block styles
+  if (BFFEditorSettings.disabledBlocksStyles) {
+    Object.entries(BFFEditorSettings.disabledBlocksStyles).forEach(([block, styles]) => {
+      unregisterBlockStyle(block, styles)
+    })
+  }
+
+  // Allow blocks variations
+  if (BFFEditorSettings.allowedBlocksVariations) {
+    Object.entries(BFFEditorSettings.allowedBlocksVariations).forEach(([block, variations]) => {
+      getBlockVariations(block).forEach((variant) => {
+        if (!variations.includes(variant.name)) {
+          unregisterBlockVariation(block, variant.name)
+        }
+      })
+    })
+  }
 })
 
 // ACF Blocks
@@ -31,22 +44,9 @@ if (window.acf) {
 }
 
 addFilter('blocks.registerBlockType', 'beapi-framework', function (settings, name) {
-  if (name === 'core/paragraph') {
-    settings.example.attributes.dropCap = false
-  }
-
-  if (name === 'core/separator' || name === 'core/quote' || name === 'core/pullquote' || name === 'core/table') {
-    // remove custom styles
-    settings.styles = []
-  }
-
-  if (name === 'core/image') {
-    // remove custom styles
+  // Disable all styles
+  if (BFFEditorSettings.disableAllBlocksStyles && BFFEditorSettings.disableAllBlocksStyles.includes(name)) {
     settings.styles = []
-    // set default aligment for images to null
-    settings.attributes.align = {
-      type: 'string',
-    }
   }
 
   return settings