Implement code styling

composer.json

@@ -94,6 +94,7 @@
     "wp-plugin/query-monitor": "^3.20.2",
     "wp-plugin/redis-cache": "^2.7",
     "wp-plugin/remove-dashboard-access-for-non-admins": "^1.2.1",
+    "wp-plugin/webberzone-code-block-highlighting": "^1.0",
     "wp-plugin/woocommerce": "^10.5.0",
     "wp-plugin/woocommerce-gateway-stripe": "^10.3.1",
     "wp-plugin/woocommerce-paypal-payments": "^3.3.2",

config/application.php

@@ -112,7 +112,7 @@
  * Custom Settings
  */
 Config::define( 'AUTOMATIC_UPDATER_DISABLED', true );
-Config::define( 'DISABLE_WP_CRON', env( 'DISABLE_WP_CRON' ) ?: false );
+Config::define( 'DISABLE_WP_CRON', env( 'DISABLE_WP_CRON' ) ?? false );
 
 // Disable the plugin and theme file editor in the admin
 Config::define( 'DISALLOW_FILE_EDIT', true );

web/app/plugins/cbf-multisite/assets/js/admin/group-block-figure.js

@@ -0,0 +1,155 @@
+/* global window */
+/* eslint-disable prettier/prettier */
+(function (wp) {
+  "use strict";
+
+  console.log("group-block-figure.js loaded");
+
+  if (!wp || !wp.hooks || !wp.blocks) {
+    return;
+  }
+
+  console.log("wp.hooks", wp.hooks);
+
+  // --- Part 1: extend tagName attribute enum for serialisation/validation ---
+  // NOTE: the Group block's HTML element dropdown is hardcoded in its edit
+  // component and does NOT read from tagName.enum, so this alone won't change
+  // the dropdown UI — Part 2 handles that via editor.BlockEdit.
+  wp.hooks.addFilter(
+    "blocks.registerBlockType",
+    "cbf-multisite/group-block-figure",
+    function (settings, name) {
+      if (name !== "core/group") {
+        return settings;
+      }
+
+      var attributes =
+        settings && settings.attributes ? settings.attributes : {};
+      var tagName = attributes.tagName;
+      var existingEnum =
+        tagName && Array.isArray(tagName.enum) ? tagName.enum : [];
+      var fallbackEnum = [
+        "div",
+        "section",
+        "main",
+        "article",
+        "aside",
+        "header",
+        "footer",
+      ];
+      var baseEnum = existingEnum.length ? existingEnum : fallbackEnum;
+
+      console.log("tagName", tagName);
+      console.log("existingEnum", existingEnum);
+      console.log("baseEnum", baseEnum);
+      console.log("settings", settings);
+
+      if (baseEnum.indexOf("figure") !== -1) {
+        return settings;
+      }
+
+      var extendedSettings = Object.assign({}, settings, {
+        attributes: Object.assign({}, attributes, {
+          tagName: Object.assign(
+            { type: "string", default: "div", enum: fallbackEnum },
+            tagName || {},
+            { enum: baseEnum.concat("figure") }
+            // eslint-disable-next-line
+          ),
+        }),
+      });
+
+      console.log("extendedTagName", extendedSettings.attributes.tagName);
+
+      return extendedSettings;
+    }
+    // eslint-disable-next-line
+  );
+
+  // --- Part 2: inject <figure> into the editor UI via editor.BlockEdit HOC ---
+  // The Group block's HTML element SelectControl is hardcoded — it doesn't read
+  // from tagName.enum. We add our own SelectControl with the full list plus
+  // <figure>. The original is hidden via CSS targeting the .cbf-html-element-control
+  // class added here as an adjacent-sibling marker (see Admin/Assets.php).
+  if (!wp.element || !wp.compose || !wp.blockEditor || !wp.components) {
+    console.log("group-block-figure: missing deps for BlockEdit HOC", {
+      element: !!wp.element,
+      compose: !!wp.compose,
+      blockEditor: !!wp.blockEditor,
+      components: !!wp.components,
+    });
+    return;
+  }
+
+  var HTML_ELEMENT_DESCRIPTIONS = {
+    div: "The <div> element should only be used if the block is a design element with no semantic meaning.",
+    header:
+      "The <header> element should represent introductory content, typically a group of introductory or navigational aids.",
+    main: "The <main> element should be used for the primary content of your document only.",
+    section:
+      "The <section> element should represent a standalone portion of the document that can't be better represented by another element.",
+    article:
+      "The <article> element should represent a self-contained, syndicatable portion of the document.",
+    aside:
+      "The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.",
+    footer:
+      "The <footer> element should represent a footer for its nearest sectioning element (eg <section>, <article>, <main>, etc).",
+    figure:
+      "The <figure> element should represent self-contained content, frequently with a caption, and is typically referenced as a single unit.",
+  };
+
+  var HTML_ELEMENT_OPTIONS = [
+    { label: "Default (<div>)", value: "div" },
+    { label: "<header>", value: "header" },
+    { label: "<main>", value: "main" },
+    { label: "<section>", value: "section" },
+    { label: "<article>", value: "article" },
+    { label: "<aside>", value: "aside" },
+    { label: "<footer>", value: "footer" },
+    { label: "<figure>", value: "figure" },
+  ];
+
+  var withGroupFigureControl = wp.compose.createHigherOrderComponent(function (
+    BlockEdit
+  ) {
+    return function GroupBlockWithFigure(props) {
+      if (props.name !== "core/group") {
+        return wp.element.createElement(BlockEdit, props);
+      }
+
+      console.log("GroupBlockWithFigure props.attributes", props.attributes);
+
+      var currentTag = props.attributes.tagName || "div";
+
+      return wp.element.createElement(
+        wp.element.Fragment,
+        null,
+        wp.element.createElement(BlockEdit, props),
+        wp.element.createElement(
+          wp.blockEditor.InspectorAdvancedControls,
+          null,
+          wp.element.createElement(wp.components.SelectControl, {
+            // className propagates to the .components-base-control wrapper,
+            // used as the CSS hook to hide the original Group block control.
+            className: "cbf-html-element-control",
+            __next40pxDefaultSize: true,
+            label: "HTML element",
+            value: currentTag,
+            options: HTML_ELEMENT_OPTIONS,
+            help: HTML_ELEMENT_DESCRIPTIONS[currentTag] || "",
+            onChange: function (value) {
+              console.log("GroupBlockWithFigure tagName changed to", value);
+              props.setAttributes({ tagName: value });
+            },
+          })
+        )
+      );
+    };
+  }, "withGroupFigureControl");
+
+  wp.hooks.addFilter(
+    "editor.BlockEdit",
+    "cbf-multisite/group-block-figure-edit",
+    withGroupFigureControl
+  );
+})(window.wp);

web/app/plugins/cbf-multisite/assets/js/frontend/cbf-multisite.js

@@ -1,37 +1,22 @@
-/******/ (function () {
-  // webpackBootstrap
-  var __webpack_exports__ = {};
-/* eslint-disable */ // Remove this line if customising this file
 (function ($) {
   "use strict";
 
   /**
-   * All of the code for your admin-facing JavaScript source
-   * should reside in this file.
+   * Populate data-line on .code-annotations list items.
    *
-   * Note: It has been assumed you will write jQuery code here, so the
-   * $ function reference has been prepared for usage within the scope
-   * of this function.
-   *
-   * This enables you to define handlers, for when the DOM is ready:
-   *
-   * $(function() {
-   *
-   * });
-   *
-   * When the window is loaded:
-   *
-   * $( window ).load(function() {
-   *
-   * });
-   *
-   * ...and/or other possibilities.
-   *
-   * Ideally, it is not considered best practise to attach more than a
-   * single DOM-ready or window-load handler for a particular page.
-   * Although scripts in the WordPress core, Plugins and Themes may be
-   * practising this, we should strive to set a better example in our own work.
+   * Items that already carry a data-line value are left untouched.
+   * Items without one receive the 1-based position within their own list,
+   * so each list independently starts at 1.
    */
-})(jQuery);
-/******/ })()
-;
+  $(function () {
+    $(".code-annotations").each(function () {
+      $(this)
+        .children("li")
+        .each(function () {
+          if (!$(this).attr("data-line") && $(this).val()) {
+            $(this).attr("data-line", $(this).val());
+          }
+        });
+    });
+  });
+})(jQuery); // eslint-disable-line

web/app/plugins/cbf-multisite/includes/Admin/Assets.php

@@ -30,6 +30,7 @@ public static function hooks() {
 		add_action( 'admin_enqueue_scripts', array( AssetsMain::class, 'load_scripts' ) );
 		add_action( 'admin_print_scripts', array( AssetsMain::class, 'localize_printed_scripts' ), 5 );
 		add_action( 'admin_print_footer_scripts', array( AssetsMain::class, 'localize_printed_scripts' ), 5 );
+		add_action( 'enqueue_block_editor_assets', array( __CLASS__, 'enqueue_block_editor_scripts' ) );
 	}
 
 
@@ -64,6 +65,28 @@ public static function add_scripts( $scripts ) {
 			),
 		);
 
+		$scripts['cbf-multisite-group-figure'] = array(
+			'src'  => AssetsMain::localize_asset( 'js/admin/group-block-figure.js' ),
+			'deps' => array( 'wp-hooks', 'wp-blocks', 'wp-element', 'wp-compose', 'wp-block-editor', 'wp-components' ),
+		);
+
 		return $scripts;
 	}
+
+
+	/**
+	 * Add inline styles for the block editor.
+	 *
+	 * @return void
+	 */
+	public static function enqueue_block_editor_scripts() {
+		// Hide the Group block's original (hardcoded) HTML element control.
+		// The wrapper carries a dedicated .block-editor-html-element-control class,
+		// so we can target it precisely. The :has() guard ensures the rule only
+		// fires when a Group block with our extended control is in the panel.
+		wp_add_inline_style(
+			'wp-edit-blocks',
+			'.block-editor-block-inspector__advanced:has(.cbf-html-element-control) .block-editor-html-element-control { display: none !important; }'
+		);
+	}
 }

web/app/themes/cbf-academy/assets/css/custom.css

@@ -18,6 +18,7 @@ https://www.w3schools.com/css/css_rwd_mediaqueries.asp
   display: none;
 }
 
+/* Sticky Table of Contents */
 .ez-toc-sticky .ez-toc-open-icon {
   background-color: var(--bb-primary-button-background-regular);
   color: var(--bb-primary-button-text-hover);
@@ -28,7 +29,60 @@ https://www.w3schools.com/css/css_rwd_mediaqueries.asp
   background-color: var(--bb-primary-button-background-hover);
 }
 
+.is-style-stripes th {
+  text-align: center;
+}
+
+.bb-sfwd-aside.bb-dark-theme .wp-block-table.is-style-stripes th {
+  color: #fff;
+}
+
+.bb-sfwd-aside.bb-dark-theme
+  .wp-block-table.is-style-stripes
+  tbody
+  tr:nth-child(odd) {
+  background: #282a2c;
+}
+
+/* Code blocks in Markdown */
 .wp-block-jetpack-markdown pre > code {
   font-size: 14px;
   line-height: 1.5;
 }
+
+/* Dark mode inline code blocks */
+.bb-sfwd-aside.bb-dark-theme code:not(pre > code) {
+  background: #282a2c;
+}
+
+pre[class*="language-"].line-numbers {
+  padding: 1em 0 1em 3.8em;
+}
+
+/* Highlighted lines in code blocks */
+.wp-block-jetpack-markdown .line-highlight,
+pre[class*="language-"] .line-highlight {
+  background: linear-gradient(
+    to right,
+    rgba(255, 183, 77, 0.15),
+    rgba(255, 183, 77, 0.1)
+  );
+  border-left: 3px solid #ffb74d;
+}
+
+/* Code annotations */
+.code-annotations {
+  list-style: none;
+}
+
+.code-annotations > li::before {
+  color: #000;
+  content: "L" attr(data-line) ":";
+  font-weight: 700;
+  margin-right: 0.5em;
+}
+
+/* Dark mode code annotations */
+.bb-sfwd-aside.bb-dark-theme .code-annotations li::before {
+  color: #fff;
+}