opencode-skills-antigravity 1.0.11 → 1.0.13

package/bundled-skills/wordpress-theme-development/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: wordpress-theme-development
-description: "WordPress theme development workflow covering theme architecture, template hierarchy, custom post types, block editor support, and responsive design."
+description: "WordPress theme development workflow covering theme architecture, template hierarchy, custom post types, block editor support, responsive design, and WordPress 7.0 features: DataViews, Pattern Editing, Navigation Overlays, and admin refresh."
 category: granular-workflow-bundle
 risk: safe
 source: personal
@@ -11,7 +11,37 @@ date_added: "2026-02-27"
 
 ## Overview
 
-Specialized workflow for creating custom WordPress themes from scratch, including modern block editor (Gutenberg) support, template hierarchy, and responsive design.
+Specialized workflow for creating custom WordPress themes from scratch, including modern block editor (Gutenberg) support, template hierarchy, responsive design, and WordPress 7.0 enhancements.
+
+## WordPress 7.0 Theme Features
+
+1. **Admin Refresh**
+   - New default color scheme
+   - View transitions between admin screens
+   - Modern typography and spacing
+
+2. **Pattern Editing**
+   - ContentOnly mode defaults for unsynced patterns
+   - `disableContentOnlyForUnsyncedPatterns` setting
+   - Per-block instance custom CSS
+
+3. **Navigation Overlays**
+   - Customizable navigation overlays
+   - Improved mobile navigation
+
+4. **New Blocks**
+   - Icon block
+   - Breadcrumbs block with filters
+   - Responsive grid block
+
+5. **Theme.json Enhancements**
+   - Pseudo-element support
+   - Block-defined feature selectors honored
+   - Enhanced custom CSS
+
+6. **Iframed Editor**
+   - Block API v3+ enables iframed post editor
+   - Full enforcement in 7.1, opt-in in 7.0
 
 ## When to Use This Workflow
 
@@ -21,6 +51,7 @@ Use this workflow when:
 - Adding block editor support
 - Implementing custom post types
 - Building child themes
+- Implementing WordPress 7.0 design features
 
 ## Workflow Phases
 
@@ -37,6 +68,24 @@ Use this workflow when:
 4. Configure theme support
 5. Set up enqueue scripts/styles
 
+#### WordPress 7.0 Theme Header
+```css
+/*
+Theme Name: My Custom Theme
+Theme URI: https://example.com
+Author: Developer Name
+Author URI: https://example.com
+Description: A WordPress 7.0 compatible theme with modern design
+Version: 1.0.0
+Requires at least: 6.0
+Requires PHP: 7.4
+License: GNU General Public License v2
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: my-custom-theme
+Tags: block-patterns, block-styles, editor-style, wide-blocks
+*/
+```
+
 #### Copy-Paste Prompts
 ```
 Use @app-builder to scaffold a new WordPress theme project
@@ -55,6 +104,11 @@ Use @app-builder to scaffold a new WordPress theme project
 5. Add archive.php for archives
 6. Implement search.php and 404.php
 
+#### WordPress 7.0 Template Considerations
+- Test with iframed editor
+- Verify view transitions work
+- Check new admin color scheme compatibility
+
 #### Copy-Paste Prompts
 ```
 Use @frontend-developer to create WordPress template files
@@ -72,6 +126,66 @@ Use @frontend-developer to create WordPress template files
 4. Create custom template tags
 5. Implement helper functions
 
+#### WordPress 7.0 theme.json Configuration
+```json
+{
+  "$schema": "https://schemas.wp.org/trunk/theme.json",
+  "version": 3,
+  "settings": {
+    "appearanceTools": true,
+    "layout": {
+      "contentSize": "1200px",
+      "wideSize": "1400px"
+    },
+    "background": {
+      "backgroundImage": true
+    },
+    "typography": {
+      "fontFamilies": true,
+      "fontSizes": true
+    },
+    "spacing": {
+      "margin": true,
+      "padding": true
+    },
+    "blocks": {
+      "core/heading": {
+        "typography": {
+          "fontSizes": ["24px", "32px", "48px"]
+        }
+      }
+    }
+  },
+  "styles": {
+    "color": {
+      "background": "#ffffff",
+      "text": "#1a1a1a"
+    },
+    "elements": {
+      "link": {
+        "color": {
+          "text": "#0066cc"
+        }
+      }
+    }
+  },
+  "customTemplates": [
+    {
+      "name": "page-home",
+      "title": "Homepage",
+      "postTypes": ["page"]
+    }
+  ],
+  "templateParts": [
+    {
+      "name": "header",
+      "title": "Header",
+      "area": "header"
+    }
+  ]
+}
+```
+
 #### Copy-Paste Prompts
 ```
 Use @backend-dev-guidelines to create theme functions
@@ -89,6 +203,29 @@ Use @backend-dev-guidelines to create theme functions
 4. Implement custom fields
 5. Create archive templates
 
+#### RTC-Compatible CPT Registration
+```php
+register_post_type('portfolio', [
+    'labels' => [
+        'name' => __('Portfolio', 'my-theme'),
+        'singular_name' => __('Portfolio Item', 'my-theme')
+    ],
+    'public' => true,
+    'has_archive' => true,
+    'show_in_rest' => true,  // Enable for RTC
+    'supports' => ['title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'],
+    'menu_icon' => 'dashicons-portfolio',
+]);
+
+// Register meta for collaboration
+register_post_meta('portfolio', 'client_name', [
+    'type' => 'string',
+    'single' => true,
+    'show_in_rest' => true,
+    'sanitize_callback' => 'sanitize_text_field',
+]);
+```
+
 #### Copy-Paste Prompts
 ```
 Use @wordpress-penetration-testing to understand WordPress CPT patterns
@@ -106,6 +243,72 @@ Use @wordpress-penetration-testing to understand WordPress CPT patterns
 4. Add block patterns
 5. Configure block templates
 
+#### WordPress 7.0 Block Features
+- Block API v3 is reference model
+- PHP-only block registration
+- Per-instance custom CSS
+- Block visibility controls (viewport-based)
+
+#### Block Pattern with ContentOnly (WP 7.0)
+```json
+{
+    "name": "my-theme/hero-section",
+    "title": "Hero Section",
+    "contentOnly": true,
+    "content": [
+        {
+            "name": "core/cover",
+            "attributes": {
+                "url": "{{hero_image}}",
+                "overlay": "black",
+                "dimRatio": 50
+            },
+            "innerBlocks": [
+                {
+                    "name": "core/heading",
+                    "attributes": {
+                        "level": 1,
+                        "textAlign": "center",
+                        "content": "{{hero_title}}"
+                    }
+                },
+                {
+                    "name": "core/paragraph",
+                    "attributes": {
+                        "align": "center",
+                        "content": "{{hero_description}}"
+                    }
+                }
+            ]
+        }
+    ]
+}
+```
+
+#### Navigation Overlay Template Part
+```php
+// template-parts/header-overlay.php
+?>
+<nav class="header-navigation-overlay" aria-label="<?php esc_attr_e('Overlay Menu', 'my-theme'); ?>">
+    <button class="overlay-close" aria-label="<?php esc_attr_e('Close menu', 'my-theme'); ?>">
+        <span class="close-icon" aria-hidden="true">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+        </span>
+    </button>
+    <?php
+    wp_nav_menu([
+        'theme_location' => 'primary',
+        'container' => false,
+        'menu_class' => 'overlay-menu',
+        'fallback_cb' => false,
+    ]);
+    ?>
+</nav>
+```
+
 #### Copy-Paste Prompts
 ```
 Use @frontend-developer to create custom Gutenberg blocks
@@ -124,12 +327,92 @@ Use @frontend-developer to create custom Gutenberg blocks
 4. Implement theme customizer
 5. Add accessibility features
 
+#### WordPress 7.0 Admin Refresh Considerations
+```css
+/* Support new admin color scheme */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --admin-color: modern;
+    }
+}
+
+/* View transitions */
+.wp-admin {
+    view-transition-name: none;
+}
+
+body {
+    view-transition-name: page;
+}
+```
+
+#### CSS Custom Properties (WP 7.0)
+```css
+:root {
+    /* New DataViews colors */
+    --wp-dataviews-color-background: #ffffff;
+    --wp-dataviews-color-border: #e0e0e0;
+    
+    /* Navigation overlay */
+    --wp-overlay-menu-background: #1a1a1a;
+    --wp-overlay-menu-text: #ffffff;
+}
+```
+
 #### Copy-Paste Prompts
 ```
 Use @frontend-design to create responsive theme design
 ```
 
-### Phase 7: Testing
+### Phase 7: WordPress 7.0 Features Integration
+
+#### Breadcrumbs Block Support
+```php
+// Add breadcrumb filters for custom post types
+add_filter('wp_breadcrumb_args', function($args) {
+    $args['separator'] = '<span class="breadcrumb-separator"> / </span>';
+    $args['before'] = '<nav class="breadcrumb" aria-label="Breadcrumb">';
+    $args['after'] = '</nav>';
+    return $args;
+});
+
+// Add custom breadcrumb trail for CPT
+add_action('breadcrumb_items', function($trail, $crumbs) {
+    if (is_singular('portfolio')) {
+        $portfolio_page = get_page_by_path('portfolio');
+        if ($portfolio_page) {
+            array_splice($trail->crumbs, 1, 0, [
+                [
+                    'title' => get_the_title($portfolio_page),
+                    'url' => get_permalink($portfolio_page)
+                ]
+            ]);
+        }
+    }
+}, 10, 2);
+```
+
+#### Icon Block Support
+```php
+// Add custom icons for Icon block via pattern category
+add_action('init', function() {
+    register_block_pattern_category('my-theme/icons', [
+        'label' => __('Theme Icons', 'my-theme'),
+        'description' => __('Custom icons for use in the Icon block', 'my-theme'),
+    ]);
+});
+
+// For actual SVG icons in the Icon block, use block.json or PHP registration
+add_action('init', function() {
+    register_block_pattern('my-theme/custom-icons', [
+        'title' => __('Custom Icon Set', 'my-theme'),
+        'categories' => ['my-theme/icons'],
+        'content' => '<!-- Pattern content with Icon blocks -->'
+    ]);
+});
+```
+
+### Phase 8: Testing
 
 #### Skills to Invoke
 - `playwright-skill` - Browser testing
@@ -142,6 +425,14 @@ Use @frontend-design to create responsive theme design
 4. Check accessibility
 5. Performance testing
 
+#### WordPress 7.0 Testing Checklist
+- [ ] Test with iframed editor
+- [ ] Verify view transitions
+- [ ] Check admin color scheme
+- [ ] Test navigation overlays
+- [ ] Verify contentOnly patterns
+- [ ] Test breadcrumbs on CPT archives
+
 #### Copy-Paste Prompts
 ```
 Use @playwright-skill to test WordPress theme
@@ -164,7 +455,15 @@ theme-name/
 ├── 404.php
 ├── comments.php
 ├── template-parts/
+│   ├── header/
+│   ├── footer/
+│   ├── navigation/
+│   └── content/
+├── patterns/           # Block patterns (WP 7.0)
+├── templates/          # Site editor templates
 ├── inc/
+│   ├── class-theme.php
+│   └── supports.php
 ├── assets/
 │   ├── css/
 │   ├── js/
@@ -172,6 +471,19 @@ theme-name/
 └── languages/
 ```
 
+## WordPress 7.0 Theme Checklist
+
+- [ ] PHP 7.4+ requirement documented
+- [ ] theme.json v3 schema used
+- [ ] Block patterns tested
+- [ ] ContentOnly editing supported
+- [ ] Navigation overlays implemented
+- [ ] Breadcrumb filters added for CPT
+- [ ] View transitions working
+- [ ] Admin refresh compatible
+- [ ] CPT meta shows_in_rest
+- [ ] Iframe editor tested
+
 ## Quality Gates
 
 - [ ] All templates working
@@ -180,6 +492,7 @@ theme-name/
 - [ ] Accessibility checked
 - [ ] Performance optimized
 - [ ] Cross-browser tested
+- [ ] WordPress 7.0 compatibility verified
 
 ## Related Workflow Bundles