Feature/gh169 add ai wide template dev fix

.gitignore

@@ -21,6 +21,7 @@ mu-plugins/*
 !mu-plugins/osi-sponsors-list
 !websub-compat.php
 !mu-plugins/osi-events-manager-tweaks
+!mu-plugins/osi-editor-tweaks
 
 themes/*
 !themes/osi

mu-plugins/osi-editor-tweaks/build/scripts/editor/editor.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '162399256cc2e0280b43');

mu-plugins/osi-editor-tweaks/build/scripts/theme/theme.asset.php

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

mu-plugins/osi-editor-tweaks/build/styles/editor/editor.scss.asset.php

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

mu-plugins/osi-editor-tweaks/build/styles/theme/theme.scss.asset.php

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

mu-plugins/osi-editor-tweaks/osi-editor-tweaks.php

@@ -0,0 +1,76 @@
+<?php
+/**
+ * Plugin Name: OSI Event List
+ * Version: 1.0.0
+ * Author: WordPress.com Special Projects
+ * Author URI: https://wpspecialprojects.wordpress.com/
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	return;
+}
+
+define( 'OSI_ET_VERSION', '1.0.0' );
+define( 'OSI_BUILD_PATH', plugin_dir_path( __FILE__ ) . 'build/' );
+define( 'OSI_BUILD_URL', plugin_dir_url( __FILE__ ) . 'build/' );
+
+
+/**
+ * Renders the block editor scripts.
+ *
+ * @return void
+ */
+function osi_et_admin_scripts() {
+	// If file exists, enqueue the script.
+	if ( file_exists( OSI_BUILD_PATH . 'scripts/editor/editor.asset.php' ) ) {
+		$assets = include OSI_BUILD_PATH . 'scripts/editor/editor.asset.php';
+		wp_enqueue_script(
+			'osi-event-list',
+			OSI_BUILD_URL . 'scripts/editor/editor.js',
+			$assets['dependencies'],
+			$assets['version'],
+			true
+		);
+	}
+
+	// If file exists, enqueue the editor styles.
+	if ( file_exists( OSI_BUILD_PATH . 'styles/editor/editor.scss.css' ) ) {
+		wp_enqueue_style(
+			'osi-event-list-editor',
+			OSI_BUILD_URL . 'styles/editor/editor.scss.css',
+			array(),
+			OSI_ET_VERSION
+		);
+	}
+}
+add_action( 'enqueue_block_editor_assets', 'osi_et_admin_scripts' );
+
+/**
+ * Renders the front-end scripts.
+ *
+ * @return void
+ */
+function osi_et_frontend_scripts() {
+	// If file exists, enqueue the script.
+	if ( file_exists( OSI_BUILD_PATH . 'scripts/theme/theme.asset.php' ) ) {
+		$assets = include OSI_BUILD_PATH . 'scripts/theme/theme.asset.php';
+		wp_enqueue_script(
+			'osi-et-theme',
+			OSI_BUILD_URL . 'scripts/theme/theme.js',
+			$assets['dependencies'],
+			$assets['version'],
+			true
+		);
+	}
+
+	// If file exists, enqueue the front-end styles.
+	if ( file_exists( OSI_BUILD_PATH . 'styles/theme/theme.scss.css' ) ) {
+		wp_enqueue_style(
+			'osi-et-theme',
+			OSI_BUILD_URL . 'styles/theme/theme.scss.css',
+			array(),
+			OSI_ET_VERSION
+		);
+	}
+}
+add_action( 'wp_enqueue_scripts', 'osi_et_frontend_scripts' );

mu-plugins/osi-editor-tweaks/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "osi-editor-tweaks",
+    "version": "1.0.0",
+    "scripts": {
+        "build:scripts:editor": "wp-scripts build src/editor.js --output-path=build/scripts/editor",
+        "build:scripts:theme": "wp-scripts build src/theme.js --output-path=build/scripts/theme",
+        "build:scripts": "npm run build:scripts:editor && npm run build:scripts:theme",
+
+        "build:styles:editor": "wp-scripts build src/editor.scss --output-path=build/styles/editor",
+        "build:styles:theme": "wp-scripts build src/theme.scss --output-path=build/styles/theme",
+        "build:styles": "npm run build:styles:editor && npm run build:styles:theme",
+
+        "build": "npm-run-all --sequential build:scripts build:styles",
+        "watch:scripts:editor": "wp-scripts start src/editor.js --output-path=build/scripts/editor",
+        "watch:scripts:theme": "wp-scripts start src/theme.js --output-path=build/scripts/theme",
+        "watch:scripts": "npm run watch:scripts:editor && npm run watch:scripts:theme",
+
+        "watch:styles:editor": "wp-scripts start src/editor.scss --output-path=build/styles/editor",
+        "watch:styles:theme": "wp-scripts start src/theme.scss --output-path=build/styles/theme",
+        "watch:styles": "npm run watch:styles:editor && npm run watch:styles:theme",
+
+        "watch": "npm-run-all --parallel watch:scripts watch:styles"
+    },
+    "author": "",
+    "license": "GPL-3.0-or-later",
+    "devDependencies": {
+        "@wordpress/scripts": "^26.3.0",
+        "npm-run-all": "^4.1.5"
+    }
+}

mu-plugins/osi-editor-tweaks/src/common.scss

@@ -0,0 +1,81 @@
+/* Image Styles */
+
+.wp-block-image {
+    &.is-style-custom-filter-blackwhite {
+        img {
+            filter: grayscale(100%);
+            transition: filter 0.5s ease-in-out;
+            &:hover {
+                filter: grayscale(0%);
+            }
+        }
+    }
+    &.is-style-round-logo-border {
+        img {
+            padding: 10px;
+            border: 1px solid #E9E9E9;
+            border-radius: 50%;
+        }
+    }
+}
+
+
+/* Card Styles */
+
+.wp-block-group {
+    &.osi-card {
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.03);
+        margin-bottom: 20px !important;
+        h3 {
+            line-height: 30px !important;
+        }
+    }
+}
+
+
+/* Slide-Up Animation */
+
+.content .wp-block-heading {
+    &.slide-up {
+        transform: translateY(20px);
+        opacity: 0;
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0.5s;
+        overflow: hidden;
+        &.visible {
+            transform: translateY(0);
+            opacity: 1;
+            overflow: hidden;
+        }
+    }
+}
+
+.plethoraplugins-tabs-container.button-tabs {
+    h3 {
+        line-height: 36px !important;
+    }
+    .plethoraplugins-tabs {
+        margin-bottom: 26px;
+    }
+    .js-plethoraplugins-tabs {
+        li {
+            a {
+                font-weight: 600;
+                font-size: 16px;
+                line-height: 19px;
+                color: rgb(31, 31, 37);
+                padding: 15px 33px;
+                background: rgb(255, 255, 255);
+                border-radius: 5px;
+                text-decoration: none;
+                &.active {
+                    background-color: #3Ea638;
+                    color: #fff;
+                    text-decoration: none !important;
+                    span {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+}

mu-plugins/osi-editor-tweaks/src/editor.js

@@ -0,0 +1,143 @@
+import { registerBlockStyle } from '@wordpress/blocks';
+import { addFilter } from '@wordpress/hooks';
+import { Fragment } from '@wordpress/element';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+// Register the custom style for the core/image block
+registerBlockStyle('core/image', {
+	name: 'custom-filter-blackwhite',
+	label: __('Black & White with Fade', 'osi-et'),
+});
+
+registerBlockStyle('core/image', {
+	name: 'round-logo-border',
+	label: __('Round Logo with Border', 'osi-et'),
+});
+
+/**
+ * Custom filter to add an "Animations" panel to the Inspector Controls of Heading blocks.
+ *
+ * @param {Function} BlockEdit The original BlockEdit component.
+ * @returns {Function} Modified BlockEdit component with additional Inspector Controls.
+ */
+addFilter('editor.BlockEdit', 'custom/animation-panel', (BlockEdit) => {
+	return (props) => {
+		// Only modify the core/heading block
+		if (props.name !== 'core/heading') {
+			return <BlockEdit {...props} />;
+		}
+
+		const { attributes, setAttributes } = props;
+
+		/**
+		 * Handles the toggle switch change to enable or disable the "slide-up" class.
+		 *
+		 * @param {boolean} value Whether the "slide-up" class should be added or removed.
+		 */
+		const handleToggleChange = (value) => {
+			const classList = attributes.className ? attributes.className.split(' ') : [];
+
+			if (value) {
+				// Add the class if it doesn’t already exist
+				if (!classList.includes('slide-up')) {
+					classList.push('slide-up');
+				}
+			} else {
+				// Remove the class if it exists
+				const index = classList.indexOf('slide-up');
+				if (index > -1) {
+					classList.splice(index, 1);
+				}
+			}
+
+			// Update both enableSlider attribute and className
+			setAttributes({
+				enableSlider: value,
+				className: classList.join(' '),
+			});
+		};
+
+		return (
+			<Fragment>
+				{/* Render the original block edit component */}
+				<BlockEdit {...props} />
+
+				{/* Add custom Inspector Controls for animation */}
+				<InspectorControls>
+					<PanelBody title={__("Animations", 'osi-et')}>
+						<ToggleControl
+							label={__("Slide Up", 'osi-et')}
+							checked={attributes.className && attributes.className.includes('slide-up')}
+							onChange={handleToggleChange}
+						/>
+					</PanelBody>
+				</InspectorControls>
+			</Fragment>
+		);
+	};
+});
+
+/**
+ * Custom filter to add an "OSI Card" panel to the Inspector Controls of Group blocks.
+ *
+ * @param {Function} BlockEdit The original BlockEdit component.
+ * @returns {Function} Modified BlockEdit component with additional Inspector Controls.
+ */
+addFilter('editor.BlockEdit', 'custom/group-panel', (BlockEdit) => {
+	return (props) => {
+		// Only modify the core/group block
+		if (props.name !== 'core/group') {
+			return <BlockEdit {...props} />;
+		}
+
+		const { attributes, setAttributes } = props;
+
+		/**
+		 * Handles the toggle switch change to enable or disable the "osi-card" class.
+		 *
+		 * @param {boolean} value Whether the "osi-card" class should be added or removed.
+		 */
+		const handleToggleChange = (value) => {
+			const classList = attributes.className ? attributes.className.split(' ') : [];
+
+			if (value) {
+				// Add the class if it doesn’t already exist
+				if (!classList.includes('osi-card')) {
+					classList.push('osi-card');
+				}
+			} else {
+				// Remove the class if it exists
+				const index = classList.indexOf('osi-card');
+				if (index > -1) {
+					classList.splice(index, 1);
+				}
+			}
+
+			// Update both isCard attribute and className
+			setAttributes({
+				isCard: value,
+				className: classList.join(' '),
+			});
+		};
+
+		return (
+			<Fragment>
+				{/* Render the original block edit component */}
+				<BlockEdit {...props} />
+
+				{/* Add custom Inspector Controls for OSI Card toggle */}
+				<InspectorControls>
+					<PanelBody title={__("OSI Card", 'osi-et')}>
+						<ToggleControl
+							label={__("Show as Card", 'osi-et')}
+							checked={attributes.className && attributes.className.includes('osi-card')}
+							onChange={handleToggleChange}
+						/>
+					</PanelBody>
+				</InspectorControls>
+			</Fragment>
+		);
+	};
+});

mu-plugins/osi-editor-tweaks/src/editor.scss

@@ -0,0 +1 @@
+@import "common";