@times-design-system/components-wordpress 0.4.0 → 1.2.0

package/rollup.config.js

@@ -15,44 +15,61 @@ export default {
       sourcemap: true
     },
     {
-      file: 'dist/index.cjs.js',
+      file: 'dist/index.cjs',
       format: 'cjs',
       sourcemap: true
     }
   ],
   plugins: [
     resolve({
-      extensions: ['.js', '.jsx', '.ts', '.tsx']
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      browser: true,
+      preferBuiltins: false
     }),
-    commonjs(),
     json(),
     typescript({
-      tsconfig: './tsconfig.json',
-      declaration: true,
-      declarationDir: 'dist'
-    }),
-    postcss({
-      extract: false, // Inject CSS into JS
-      inject: true, // Inject CSS into the head
-      minimize: true,
-      sourceMap: true,
-      modules: {
-        generateScopedName: '[name]__[local]___[hash:base64:5]'
-      },
-      use: {
-        sass: {
-          data: `@import "src/styles/variables.scss";` // Global SCSS variables
-        }
+      tsconfig: false,
+      compilerOptions: {
+        jsx: 'react',
+        target: 'es2021',
+        module: 'es2015',
+        allowJs: true,
+        declaration: true,
+        declarationDir: 'dist',
+        strict: false
       }
     }),
     babel({
       babelHelpers: 'bundled',
       exclude: 'node_modules/**',
-      extensions: ['.js', '.jsx', '.ts', '.tsx']
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      presets: [
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react'
+      ]
+    }),
+    commonjs(),
+    postcss({
+      extract: 'index.css',
+      inject: false,
+      minimize: true,
+      sourceMap: true
     }),
     copy({
-      targets: [{ src: 'src/**/*.css', dest: 'dist', flatten: false }]
+      targets: [
+        { src: 'src/blocks', dest: 'dist' },
+        { src: 'src/utils', dest: 'dist' },
+        { src: 'plugin.php', dest: 'dist' },
+        { src: 'block.json', dest: 'dist' }
+      ],
+      flatten: false
     })
   ],
-  external: ['react', 'react-dom'] // Don't bundle React
+  external: [
+    '@wordpress/blocks',
+    '@wordpress/block-editor',
+    '@wordpress/components',
+    '@wordpress/element'
+  ],
+  preserveEntrySignatures: 'strict'
 };

package/scripts/build-plugin.cjs

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+
+/**
+ * Build script to generate WordPress plugin structure
+ * Organizes compiled blocks and plugin files for distribution
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const distDir = path.join(__dirname, '../dist');
+const srcDir = path.join(__dirname, '../src');
+const pluginFile = path.join(distDir, 'plugin.php');
+
+console.log('📦 Building WordPress plugin structure...\n');
+
+// Ensure dist directory exists
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir, { recursive: true });
+  console.log('✓ Created dist directory');
+}
+
+// Copy plugin.php entry point
+const srcPluginFile = path.join(__dirname, '../plugin.php');
+if (fs.existsSync(srcPluginFile)) {
+  fs.copyFileSync(srcPluginFile, pluginFile);
+  console.log('✓ Plugin entry point created: dist/plugin.php');
+} else {
+  console.warn('⚠ plugin.php not found, skipping');
+}
+
+// Ensure blocks directory structure
+const blocksDistDir = path.join(distDir, 'blocks');
+if (!fs.existsSync(blocksDistDir)) {
+  fs.mkdirSync(blocksDistDir, { recursive: true });
+}
+
+// Verify block.json files exist in dist
+const blockDirs = fs.readdirSync(blocksDistDir, { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .map(dirent => dirent.name);
+
+if (blockDirs.length === 0) {
+  console.warn('⚠ No block directories found in dist/blocks');
+} else {
+  console.log(`✓ Found ${blockDirs.length} block(s): ${blockDirs.join(', ')}`);
+  
+  // Verify each block has required files
+  blockDirs.forEach(blockName => {
+    const blockDir = path.join(blocksDistDir, blockName);
+    const blockJsonPath = path.join(blockDir, 'block.json');
+    const indexPath = path.join(blockDir, 'index.js');
+    
+    const hasBlockJson = fs.existsSync(blockJsonPath);
+    const hasIndex = fs.existsSync(indexPath);
+    
+    if (!hasBlockJson) {
+      console.warn(`  ⚠ ${blockName}/block.json missing`);
+    }
+    if (!hasIndex) {
+      console.warn(`  ⚠ ${blockName}/index.js missing`);
+    }
+    if (hasBlockJson && hasIndex) {
+      console.log(`  ✓ ${blockName} (block.json + index.js)`);
+    }
+  });
+}
+
+// Create or verify root block.json
+const blockJsonRoot = path.join(distDir, 'block.json');
+if (fs.existsSync(blockJsonRoot)) {
+  console.log('✓ Root block.json found');
+} else {
+  console.warn('⚠ Root block.json not found in dist');
+}
+
+// Verify utilities are copied
+const utilsDir = path.join(distDir, 'utils');
+if (fs.existsSync(utilsDir)) {
+  const utilFiles = fs.readdirSync(utilsDir).filter(f => f.endsWith('.js'));
+  console.log(`✓ Utilities copied: ${utilFiles.join(', ')}`);
+} else {
+  console.warn('⚠ Utils directory not found in dist');
+}
+
+// Summary
+console.log('\n📁 Plugin Structure:');
+console.log(`dist/
+├── plugin.php              # WordPress plugin entry point
+├── block.json              # Root block manifest
+├── index.js               # Main entry point
+├── index.cjs              # CommonJS build
+├── index.css              # Compiled styles
+├── blocks/
+│   └── [block-name]/       # Individual block folders
+│       ├── block.json      # Block manifest
+│       ├── index.js        # Block registration
+│       ├── edit.js         # Editor component
+│       ├── save.js         # Frontend output
+│       ├── style.css       # Frontend styles
+│       └── style-editor.css # Editor styles
+└── utils/
+    └── *.js                # Utility functions
+`);
+
+console.log('✅ WordPress plugin structure built successfully!');
+console.log(`\n📦 Ready for distribution: ${distDir}\n`);
+
+// Report any issues
+const issues = [];
+if (!fs.existsSync(pluginFile)) issues.push('plugin.php');
+if (!fs.existsSync(blockJsonRoot)) issues.push('block.json');
+if (blockDirs.length === 0) issues.push('No blocks');
+
+if (issues.length > 0) {
+  console.error(`\n⚠️  Warning: Missing files - ${issues.join(', ')}`);
+  console.error('Build may not work correctly in WordPress\n');
+  process.exit(1);
+} else {
+  console.log('All components present and ready!\n');
+}

package/scripts/create-block.sh

@@ -0,0 +1,141 @@
+#!/bin/bash
+
+# WordPress Block Creation Script
+# Usage: ./scripts/create-block.sh <component-name>
+# Example: ./scripts/create-block.sh text
+
+set -e
+
+if [ -z "$1" ]; then
+  echo "Usage: $0 <component-name>"
+  echo "Example: $0 text"
+  exit 1
+fi
+
+COMPONENT_NAME=$1
+COMPONENT_NAME_PASCAL=$(echo "$COMPONENT_NAME" | sed 's/\b\(.\)/\U\1/g')
+COMPONENT_DIR="src/blocks/$COMPONENT_NAME"
+
+# Create directory structure
+mkdir -p "$COMPONENT_DIR"
+
+echo "Creating WordPress block: $COMPONENT_NAME"
+
+# Create block.json
+cat > "$COMPONENT_DIR/block.json" << 'EOF'
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/COMPONENT_NAME",
+  "title": "COMPONENT_TITLE",
+  "category": "common",
+  "description": "A COMPONENT_TITLE component for Times Design System",
+  "icon": "admin-generic",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true,
+      "padding": false
+    },
+    "align": true,
+    "customClassName": true
+  },
+  "textdomain": "times-design-system",
+  "attributes": {
+  },
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./style-editor.css",
+  "style": "file:./style.css"
+}
+EOF
+
+# Create index.js
+cat > "$COMPONENT_DIR/index.js" << 'EOF'
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit.js';
+import Save from './save.js';
+import metadata from './block.json';
+
+registerBlockType(metadata.name, {
+  ...metadata,
+  edit: Edit,
+  save: Save,
+});
+EOF
+
+# Create edit.js
+cat > "$COMPONENT_DIR/edit.js" << 'EOF'
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import './style-editor.css';
+
+export default function Edit({ attributes, setAttributes }) {
+  const blockProps = useBlockProps({
+    className: 'tds-COMPONENT_NAME-wrapper',
+  });
+
+  return (
+    <>
+      <div {...blockProps}>
+        {/* Component preview */}
+      </div>
+
+      <InspectorControls>
+        <PanelBody title="Component Settings">
+          {/* Add inspector controls here */}
+        </PanelBody>
+      </InspectorControls>
+    </>
+  );
+}
+EOF
+
+# Create save.js
+cat > "$COMPONENT_DIR/save.js" << 'EOF'
+import { useBlockProps } from '@wordpress/block-editor';
+
+export default function Save({ attributes }) {
+  const blockProps = useBlockProps.save({
+    className: 'tds-COMPONENT_NAME-wrapper',
+  });
+
+  return (
+    <div {...blockProps}>
+      {/* Component output */}
+    </div>
+  );
+}
+EOF
+
+# Create style.css
+cat > "$COMPONENT_DIR/style.css" << 'EOF'
+/* COMPONENT_TITLE Block Frontend Styles */
+
+.tds-COMPONENT_NAME-wrapper {
+  /* Component wrapper styles */
+}
+
+.tds-COMPONENT_NAME {
+  /* Component styles - mostly inherited from @times-design-system/theme-scss */
+}
+EOF
+
+# Create style-editor.css
+cat > "$COMPONENT_DIR/style-editor.css" << 'EOF'
+/* COMPONENT_TITLE Block Editor Styles */
+
+.tds-COMPONENT_NAME-wrapper {
+  /* Editor-specific overrides */
+}
+EOF
+
+echo ""
+echo "✓ Block scaffold created at: $COMPONENT_DIR"
+echo ""
+echo "Next steps:"
+echo "1. Edit $COMPONENT_DIR/block.json to add component attributes"
+echo "2. Edit $COMPONENT_DIR/edit.js to add inspector controls"
+echo "3. Edit $COMPONENT_DIR/save.js to define frontend output"
+echo "4. Edit $COMPONENT_DIR/style.css to add component styles"
+echo "5. Add import to src/index.js: import './blocks/$COMPONENT_NAME/index.js';"
+echo ""

package/src/blocks/ad-container/block.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/ad-container",
+  "title": "Ad Container",
+  "category": "common",
+  "description": "Advertising container placeholder",
+  "icon": "image",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true,
+      "padding": true
+    }
+  },
+  "attributes": {
+    "type": {
+      "type": "string",
+      "default": "inline",
+      "enum": ["header", "inline"]
+    },
+    "slotID": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "example": {}
+}

package/src/blocks/ad-container/edit.js

@@ -0,0 +1,42 @@
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const { type, slotID } = attributes;
+  const blockProps = useBlockProps();
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Ad Container Settings">
+          <SelectControl
+            label="Type"
+            value={type}
+            options={[
+              { label: 'Header', value: 'header' },
+              { label: 'Inline', value: 'inline' }
+            ]}
+            onChange={(val) => setAttributes({ type: val })}
+          />
+          <TextControl
+            label="Slot ID"
+            value={slotID}
+            onChange={(val) => setAttributes({ slotID: val })}
+            placeholder="e.g., /123456789/section/article-top"
+          />
+        </PanelBody>
+      </InspectorControls>
+      <div
+        {...blockProps}
+        className={`tds-ad-container tds-ad-container--${type}`}
+        data-slot-id={slotID}
+      >
+        <div className="tds-ad-container__placeholder">
+          <p>Ad Slot: {slotID || '(not configured)'}</p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default edit;

package/src/blocks/ad-container/index.js

@@ -0,0 +1,10 @@
+import { registerBlockType } from '@wordpress/blocks';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+registerBlockType(metadata.name, {
+  ...metadata,
+  edit,
+  save
+});

package/src/blocks/ad-container/save.js

@@ -0,0 +1,16 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const { type, slotID } = attributes;
+  const blockProps = useBlockProps.save();
+
+  return (
+    <div
+      {...blockProps}
+      className={`tds-ad-container tds-ad-container--${type}`}
+      data-slot-id={slotID}
+    />
+  );
+};
+
+export default save;

package/src/blocks/ad-container/style-editor.css

@@ -0,0 +1,4 @@
+/* Ad Container Editor Styles */
+.wp-block-times-ad-container {
+  margin: var(--spacing-m) 0;
+}

package/src/blocks/ad-container/style.css

@@ -0,0 +1,27 @@
+/* Ad Container Styles */
+.tds-ad-container {
+  display: block;
+  min-height: 250px;
+  background-color: var(--color-fill-secondary);
+  border: 1px dashed var(--color-border-secondary);
+  border-radius: var(--border-radius-s);
+}
+
+.tds-ad-container--header {
+  min-height: 90px;
+}
+
+.tds-ad-container--inline {
+  min-height: 250px;
+}
+
+.tds-ad-container__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  color: var(--color-text-secondary);
+  font: var(--typography-body-small);
+}

package/src/blocks/button/block.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/button",
+  "title": "Button",
+  "category": "common",
+  "description": "A customizable button component for user interactions",
+  "icon": "admin-generic",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true,
+      "padding": false
+    },
+    "align": true,
+    "customClassName": true
+  },
+  "textdomain": "times-design-system",
+  "attributes": {
+    "label": {
+      "type": "string",
+      "default": "Button label",
+      "description": "The text label displayed inside the button"
+    },
+    "intent": {
+      "type": "string",
+      "enum": ["primary", "secondary", "negative"],
+      "default": "primary",
+      "description": "Visual style variant"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["small", "medium", "large"],
+      "default": "large",
+      "description": "Controls the overall dimensions of the button"
+    },
+    "behaviour": {
+      "type": "string",
+      "enum": ["hug", "full"],
+      "default": "hug",
+      "description": "Controls the width behaviour"
+    },
+    "state": {
+      "type": "string",
+      "enum": ["base", "hover", "pressed", "loading", "disabled", "focus"],
+      "default": "base",
+      "description": "The interaction state"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the button is disabled"
+    },
+    "href": {
+      "type": "string",
+      "description": "Optional href to render as a link"
+    },
+    "target": {
+      "type": "string",
+      "enum": ["_blank", "_self", "_parent", "_top"],
+      "description": "Optional target attribute for links"
+    },
+    "rel": {
+      "type": "string",
+      "description": "Optional rel attribute for links"
+    },
+    "type": {
+      "type": "string",
+      "enum": ["button", "submit", "reset"],
+      "default": "button",
+      "description": "Button type"
+    },
+    "iconLeft": {
+      "type": "string",
+      "description": "Icon name to display on the left side of the label"
+    },
+    "iconRight": {
+      "type": "string",
+      "description": "Icon name to display on the right side of the label"
+    },
+    "ariaLabel": {
+      "type": "string",
+      "description": "Accessible name for icon-only buttons"
+    }
+  },
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./style-editor.css",
+  "style": "file:./style.css"
+}