add styles for settings page

Author: tschortsch

.gitignore

@@ -5,5 +5,7 @@ build/*
 !build/index.asset.php
 !build/index.css
 !build/style-index.css
+!build/settings.asset.php
+!build/settings.css
 composer.phar
 /release

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => 'cf92ca1107eaa6b155568ac252b7a6aa');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '0a10a24d77ed5fdd2bd5bb61fe42189b');

build/index.js

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '0b18bb470230f9532065a7cacf482637');

build/settings.asset.php

@@ -0,0 +1,2 @@
+#wp-bootstrap-blocks_settings .constant-notice{font-weight:600}
+

build/settings.css

@@ -37,10 +37,10 @@
     "prettier": "npm:wp-prettier@^2.0.5"
   },
   "scripts": {
-    "start": "wp-scripts start",
+    "start": "wp-scripts start src/index.js src/settings/settings.js",
     "dev": "npm run start",
     "prebuild": "npm run check-engines",
-    "build": "wp-scripts build",
+    "build": "wp-scripts build src/index.js src/settings/settings.js",
     "wp-env": "wp-env",
     "check-engines": "wp-scripts check-engines",
     "check-licenses": "wp-scripts check-licenses",

package.json

@@ -79,7 +79,7 @@ public function __construct() {
 		$this->includes();
 		$this->init_hooks();
 		$this->register_block_types();
-		Settings::init();
+		Settings::init( $this->assets_dir, $this->assets_url );
 	}
 
 	/**

src/class-wp-bootstrap-blocks.php

@@ -46,6 +46,20 @@ class Settings {
 		 */
 		const MENU_SLUG = 'wp-bootstrap-blocks_settings';
 
+		/**
+		 * The plugin assets directory.
+		 *
+		 * @var string
+		 */
+		public static $assets_dir = '';
+
+		/**
+		 * The plugin assets URL.
+		 *
+		 * @var string
+		 */
+		public static $assets_url = '';
+
 		/**
 		 * True if settings are already initialized.
 		 *
@@ -55,9 +69,15 @@ class Settings {
 
 		/**
 		 * Settings constructor.
+		 *
+		 * @param string $assets_dir The plugin assets directory.
+		 * @param string $assets_url The plugin assets URL.
 		 */
-		public static function init() {
+		public static function init( $assets_dir, $assets_url ) {
 			if ( ! self::$initialized ) {
+				self::$assets_dir = $assets_dir;
+				self::$assets_url = $assets_url;
+
 				// Add settings page to menu
 				add_action( 'admin_menu', array( __CLASS__, 'add_menu_item' ) );
 
@@ -76,10 +96,35 @@ public static function init() {
 				// Filter saving of bootstrap version
 				add_filter( 'pre_update_option_' . self::OPTION_PREFIX . 'bootstrap_version', array( __CLASS__, 'pre_update_option_bootstrap_version' ), 10, 2 );
 
+				// Enqueue settings stylesheet
+				add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_styles' ) );
+
 				self::$initialized = true;
 			}
 		}
 
+		/**
+		 * Enqueue settings specific styles.
+		 *
+		 * @param string $hook Hook of current screen.
+		 */
+		public static function enqueue_styles( $hook ) {
+			if ( 'settings_page_' . self::MENU_SLUG !== $hook ) {
+				return;
+			}
+
+			$settings_styles_path = self::$assets_dir . 'settings.css';
+			$settings_styles_url = esc_url( self::$assets_url ) . 'settings.css';
+			$settings_asset_file = self::$assets_dir . 'settings.asset.php';
+			$settings_asset = file_exists( $settings_asset_file )
+				? require_once $settings_asset_file
+				: null;
+			$settings_version = isset( $settings_asset['version'] ) ? $settings_asset['version'] : filemtime( $settings_styles_path );
+
+			wp_register_style( self::MENU_SLUG . '_styles', $settings_styles_url, false, $settings_version );
+			wp_enqueue_style( self::MENU_SLUG . '_styles' );
+		}
+
 		/**
 		 * Add settings page to admin menu.
 		 */
@@ -112,6 +157,7 @@ public static function register_settings() {
 				array(
 					'id' => 'bootstrap_version',
 					'label' => __( 'Bootstrap Version (experimental)', 'wp-bootstrap-blocks' ),
+					'description' => __( 'Depending on the selected Bootstrap version the blocks will be rendered accordingly and version specific features will be available in the editor.', 'wp-bootstrap-blocks' ),
 					'type' => 'select',
 					'default' => self::BOOTSTRAP_VERSION_DEFAULT_VALUE,
 					'options' => array(
@@ -284,21 +330,17 @@ public static function display_field( $data = array() ) {
 						break;
 
 					default:
-						$html .= '<div><span class="description">' . $field['description'] . '</span></div>' . "\n";
+						$html .= '<p class="description">' . $field['description'] . '</p>' . "\n";
 						break;
 				}
 			}
 
 			if ( $is_option_constant_set ) {
-				$html .= '<div class="constant-notice">' . sprintf(
-					// translators: %s contains constant name
-					esc_html_x(
-						'Option disabled because %s constant is set.',
-						'%s contains constant name',
+				$html .= '<p class="description constant-notice">' .
+					esc_html__(
+						'Option is defined in the following constant',
 						'wp-bootstrap-blocks'
-					),
-					esc_html( $data['constant_name'] )
-				) . '</div>' . "\n";
+					) . ': <code>' . esc_html( $data['constant_name'] ) . '</code></p>' . "\n";
 			}
 
 			// @codingStandardsIgnoreStart

src/settings/class-settings.php

@@ -0,0 +1 @@
+import './settings.scss';

src/settings/settings.js

@@ -0,0 +1,5 @@
+#wp-bootstrap-blocks_settings {
+	.constant-notice {
+		font-weight: 600;
+	}
+}