PR #11545: WooPay Block Pattern & Style Variation Fix

ASCII diagrams describing the changes in Automattic/woocommerce-payments#11545.

1. Before vs After: Color Extraction Flow

BEFORE (broken on modern themes)
═════════════════════════════════

checkout template
    │
    ├── core/template-part {slug: "header"}
    │       │
    │       └── core/pattern {slug: "theme/header"}  ← parse_blocks() returns
    │               │                                    raw reference, no blocks!
    │               └── (inner blocks never seen)     ✗ EMPTY COLORS
    │
    └── core/template-part {slug: "footer"}
            │
            └── core/group {className: "is-style-section-1"}
                    │
                    └── (no inline color attrs)       ✗ EMPTY COLORS
                                                        falls back to page bg


AFTER (fixed)
═════════════

checkout template
    │
    ├── core/template-part {slug: "header"}
    │       │
    │       └── core/pattern {slug: "theme/header"}
    │               │
    │         resolve_pattern_blocks()                ← NEW
    │               │
    │               └── core/group {backgroundColor: "#1a1a2e"}
    │                                                 ✓ CORRECT COLORS
    │
    └── core/template-part {slug: "footer"}
            │
            └── core/group {className: "is-style-section-1"}
                    │
              get_style_variation_colors()            ← NEW
                    │
                    └── theme.json variations.section-1.color
                                                      ✓ CORRECT COLORS

2. Block Area Detection: classify_block_area()

                        ┌─────────────────┐
                        │  incoming block  │
                        └────────┬────────┘
                                 │
                    ┌────────────▼────────────┐
                    │ blockName ==            │
              ┌─yes─┤ "core/template-part"?  ├─no──┐
              │     └────────────────────────┘     │
              ▼                                    ▼
    ┌──────────────────┐              ┌────────────────────────┐
    │ attrs.area set?  │              │ metadata.categories    │
    │                  │              │ contains "header" or   │
    ├─yes──► return it │              │ "footer"?              │
    │                  │              ├─yes──► return area     │
    ├─no───┐           │              │                        │
    │      ▼           │              ├─no───┐                 │
    │ get_block_       │              │      ▼                 │
    │ template()       │              │ ┌──────────────────┐   │
    │ lookup entity    │              │ │ tagName ==        │   │
    │ area             │              │ │ "header"/"footer"?│   │
    │      │           │              │ ├─yes──► return it  │   │
    │      ▼           │              │ ├─no───► return null│   │
    │ "header"/"footer"│              │ └──────────────────┘   │
    │ ? return : null  │              └────────────────────────┘
    └──────────────────┘

    Priority 1: area attr     Priority 2: categories     Priority 3: tagName
    (standard themes)         (Assembler themes)         (semantic HTML)

3. Style Variation Color Resolution

    block: core/group
    className: "is-style-section-1"
         │
         ▼
    ┌─────────────────────────────────────────┐
    │ extract_block_colors(block)             │
    │                                         │
    │  1. Check inline attrs                  │
    │     attrs.style.color.background  ──?   │
    │     attrs.style.color.text        ──?   │
    │     attrs.backgroundColor         ──?   │
    │     attrs.textColor               ──?   │
    │              │                          │
    │              ▼                          │
    │  2. get_style_variation_colors()  ←NEW  │
    │     ┌─────────────────────────────┐     │
    │     │ wp_get_block_style_         │     │
    │     │ variation_name_from_class() │     │
    │     │ "is-style-section-1"       │     │
    │     │      → ["section-1"]       │     │
    │     │                             │     │
    │     │ wp_get_global_styles(       │     │
    │     │   [variations, section-1,   │     │
    │     │    color],                  │     │
    │     │   block_name: core/group    │     │
    │     │ )                           │     │
    │     │      → {background, text}   │     │
    │     └─────────────────────────────┘     │
    │              │                          │
    │              ▼                          │
    │  3. array_merge(variation, inline)      │
    │     variation = fallback defaults       │
    │     inline    = user overrides (win)    │
    │                                         │
    └─────────────────────────────────────────┘

         inline text=#fff   +   variation bg=#1a1a2e
                     │                  │
                     ▼                  ▼
              { text: "#fff", background: "#1a1a2e" }

4. Pattern Resolution: resolve_pattern_blocks()

    BEFORE resolve               AFTER resolve
    ══════════════               ═════════════

    ┌──────────────────┐         ┌──────────────────┐
    │ core/pattern     │         │ core/group       │
    │ slug: "theme/    │  ────►  │ bg: "#1a1a2e"   │
    │        footer"   │         ├──────────────────┤
    │ innerBlocks: []  │         │ core/paragraph   │
    └──────────────────┘         │ text: "© 2026"  │
                                 └──────────────────┘

    How:
    ┌────────────────┐     ┌─────────────────────┐
    │ WP_Block_      │     │ Pattern registry     │
    │ Patterns_      │────►│ has "theme/footer"?  │
    │ Registry       │     ├─yes──► parse content  │
    └────────────────┘     ├─no───► keep original  │
                           └─────────────────────┘

5. Input Element Style Fix

    theme.json elements
    ════════════════════

    elements: {
      button:    { ... }
      link:      { ... }
      textInput: { ... }  ◄── WordPress uses this name
      input:     { ... }      (maps to textarea + text inputs)
    }

    BEFORE                          AFTER
    ══════                          ═════
    elements.input.border  ──►      input_el = elements.textInput
    (wrong key)                              ?? elements.input
    .Input bg  = bg_color                      (fallback)
    .Input clr = text_color
                                    .Input bg  = input_el.color.background
                                    .Input clr = input_el.color.text
                                    .Input border = input_el.border.*

6. Checkout Section Colors: End-to-End

    get_checkout_section_colors()
    ═════════════════════════════

    get_block_template("theme//page-checkout")
         ?? get_block_template("woocommerce//page-checkout")
                    │
                    ▼
              parse_blocks()
                    │
                    ▼
           resolve_pattern_blocks()      ← expand core/pattern refs
                    │
                    ▼
         ┌──────────────────────┐
         │   for each block:    │
         │                      │
         │   classify_block_    │
         │   area(block)        │──── null? → skip
         │         │            │
         │    "header"/"footer" │──── already have area? → skip
         │         │            │
         │   ┌─────┴─────┐     │
         │   │ template-  │     │
         │   │ part?      │     │
         │   ├─yes──► get_template_part_colors(slug)
         │   ├─no───► extract_block_colors(block)
         │   └───────────┘     │
         │         │           │
         │    colors empty?    │
         │    ├─yes──► skip    │
         │    └─no───► store   │
         └──────────────────────┘
                    │
                    ▼
         { header: {bg, text}, footer: {bg, text} }