@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/inc/components/sheet.php

@@ -0,0 +1,88 @@
+<?php
+/**
+ * Baseline Sheet for template code and the acf/sheet block (spec: components/sheet/spec.md). Dialog's machinery drawn as
+ * an edge panel: a native <dialog closedby="any"> opened by a Button with command="show-modal" commandfor (no JavaScript).
+ * Same markup and classes as the React Sheet (registry/src/ui/sheet/sheet.tsx):
+ *
+ *   echo baseline_sheet(['id' => 'menu', 'trigger' => 'Menu', 'side' => 'left', 'title' => 'Menu', 'body' => $nav]);
+ *
+ * Class strings are static maps (ADR-0008), kept identical to React's.
+ */
+
+declare(strict_types=1);
+
+const BASELINE_SHEET_CONTENT = 'group/sheet-content fixed m-0 max-h-none max-w-none p-0 hidden open:flex flex-col gap-(--bl-sheet-gap) border-0 border-border bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg outline-none opacity-0 open:opacity-100 open:translate-x-0 open:translate-y-0 starting:open:opacity-0 transition-[opacity,translate,display,overlay] transition-discrete duration-200 ease-in-out motion-reduce:transition-none backdrop:bg-(--overlay) supports-backdrop-filter:backdrop:backdrop-blur-xs backdrop:opacity-0 open:backdrop:opacity-100 starting:open:backdrop:opacity-0 backdrop:transition-[opacity,display,overlay] backdrop:transition-discrete backdrop:duration-150 motion-reduce:backdrop:transition-none';
+
+const BASELINE_SHEET_SIDES = [
+    'right'  => 'inset-y-0 right-0 left-auto h-full w-3/4 sm:max-w-(--bl-sheet-max-width) border-l-(length:--bl-sheet-border-width) translate-x-10 starting:open:translate-x-10',
+    'left'   => 'inset-y-0 left-0 right-auto h-full w-3/4 sm:max-w-(--bl-sheet-max-width) border-r-(length:--bl-sheet-border-width) -translate-x-10 starting:open:-translate-x-10',
+    'top'    => 'inset-x-0 top-0 bottom-auto h-auto w-full border-b-(length:--bl-sheet-border-width) -translate-y-10 starting:open:-translate-y-10',
+    'bottom' => 'inset-x-0 bottom-0 top-auto h-auto w-full border-t-(length:--bl-sheet-border-width) translate-y-10 starting:open:translate-y-10',
+];
+
+// The block editor shows the panel in place (a closed <dialog> would hide the blocks editors need to reach).
+const BASELINE_SHEET_PREVIEW = 'relative flex w-full max-w-(--bl-sheet-max-width) flex-col gap-(--bl-sheet-gap) border-(length:--bl-sheet-border-width) border-border bg-popover text-sm text-popover-foreground shadow-lg';
+
+const BASELINE_SHEET_HEADER = 'flex flex-col gap-(--bl-sheet-header-gap) p-(--bl-sheet-padding)';
+const BASELINE_SHEET_TITLE = 'm-0 font-heading text-(length:--bl-sheet-title-font-size) leading-(--bl-sheet-title-line-height) font-(--bl-sheet-title-font-weight) text-foreground';
+const BASELINE_SHEET_DESCRIPTION = 'm-0 text-(length:--bl-sheet-description-font-size) leading-(--bl-sheet-description-line-height) text-muted-foreground';
+const BASELINE_SHEET_FOOTER = 'mt-auto flex flex-col gap-(--bl-sheet-footer-gap) p-(--bl-sheet-padding)';
+const BASELINE_SHEET_CLOSE = 'absolute top-(--bl-sheet-close-inset) right-(--bl-sheet-close-inset)';
+
+/** The footer: pushed to the bottom, buttons stacked. `$close_label` adds an outline button that closes the sheet. */
+function baseline_sheet_footer(string $actions, string $close_label = '', string $root_attrs = ''): string
+{
+    $close = $close_label === '' ? '' : '<form method="dialog" class="contents">'
+        . baseline_button(['label' => $close_label, 'variant' => 'outline', 'type' => 'submit']) . '</form>';
+    $root = $root_attrs !== '' ? $root_attrs : 'class="' . esc_attr(BASELINE_SHEET_FOOTER) . '"';
+    return '<div data-slot="sheet-footer" ' . $root . '>' . $actions . $close . '</div>';
+}
+
+/**
+ * @param array{
+ *   id?: string, trigger?: string|false, trigger_variant?: string, trigger_size?: string, side?: string, title?: string,
+ *   description?: string, body?: string, footer?: string, show_close?: bool, preview?: bool
+ * } $args `body` and `footer` are ready markup; `trigger` false leaves the trigger out; `preview` renders the panel in place
+ */
+function baseline_sheet(array $args): string
+{
+    $id      = sanitize_html_class((string) ($args['id'] ?? '')) ?: wp_unique_id('sheet-');
+    $side    = (string) ($args['side'] ?? 'right');
+    $side    = isset(BASELINE_SHEET_SIDES[$side]) ? $side : 'right';
+    $title   = (string) ($args['title'] ?? '');
+    $desc    = (string) ($args['description'] ?? '');
+    $preview = !empty($args['preview']);
+
+    $header = '';
+    if ($title !== '' || $desc !== '') {
+        $header = '<div data-slot="sheet-header" class="' . BASELINE_SHEET_HEADER . '">'
+            . ($title !== '' ? '<h2 id="' . esc_attr($id . '-title') . '" data-slot="sheet-title" class="' . BASELINE_SHEET_TITLE . '">' . esc_html($title) . '</h2>' : '')
+            . ($desc !== '' ? '<p id="' . esc_attr($id . '-description') . '" data-slot="sheet-description" class="' . BASELINE_SHEET_DESCRIPTION . '">' . esc_html($desc) . '</p>' : '')
+            . '</div>';
+    }
+    $close = '';
+    if ($args['show_close'] ?? true) {
+        $close = baseline_button([
+            'variant'  => 'ghost',
+            'size'     => 'sm',
+            'class'    => 'is-icon-only has-icon ' . BASELINE_SHEET_CLOSE,
+            'children' => baseline_icon('close') . '<span class="sr-only">' . esc_html__('Close', 'baseline') . '</span>',
+            'attrs'    => ['command' => 'close', 'commandfor' => $id, 'data-slot' => 'sheet-close'],
+        ]);
+    }
+    $inner   = $header . (string) ($args['body'] ?? '') . (string) ($args['footer'] ?? '') . $close;
+    $trigger = ($args['trigger'] ?? null) === false ? '' : baseline_button([
+        'label'   => (string) ($args['trigger'] ?? __('Open', 'baseline')),
+        'variant' => (string) ($args['trigger_variant'] ?? 'outline'),
+        'size'    => (string) ($args['trigger_size'] ?? 'md'),
+        'attrs'   => ['command' => 'show-modal', 'commandfor' => $id, 'data-slot' => 'sheet-trigger'],
+    ]);
+
+    if ($preview) {
+        return $trigger . '<div data-slot="sheet-content" data-side="' . esc_attr($side) . '" class="' . BASELINE_SHEET_PREVIEW . '">' . $inner . '</div>';
+    }
+    $labelled  = $title !== '' ? ' aria-labelledby="' . esc_attr($id . '-title') . '"' : '';
+    $described = $desc !== '' ? ' aria-describedby="' . esc_attr($id . '-description') . '"' : '';
+    return $trigger . '<dialog id="' . esc_attr($id) . '" data-slot="sheet-content" data-side="' . esc_attr($side) . '" closedby="any"'
+        . $labelled . $described . ' class="' . BASELINE_SHEET_CONTENT . ' ' . BASELINE_SHEET_SIDES[$side] . '">' . $inner . '</dialog>';
+}

package/templates/wordpress/theme/inc/components/toggle.php

@@ -0,0 +1,127 @@
+<?php
+/**
+ * Baseline Toggle and Toggle Group for template code (specs: components/toggle/spec.md, components/toggle-group/spec.md).
+ * Emits the same markup and classes as the React components (registry/src/ui/toggle, toggle-group): a <label> drawn as
+ * a button around a visually hidden <input type="checkbox"> (a toggle), or radios sharing a name (a single-choice
+ * group) / checkboxes (multiple). Native (ADR-0030, user 2026-10-06): no JavaScript, and the choice submits with a form.
+ *
+ *   echo baseline_toggle(['label' => 'Bold', 'name' => 'bold', 'pressed' => true]);
+ *   echo baseline_toggle_group([
+ *       'name' => 'weight', 'variant' => 'outline', 'spacing' => 0, 'value' => ['normal'],
+ *       'items' => [['value' => 'light', 'label' => 'Light'], ['value' => 'normal', 'label' => 'Normal']],
+ *   ]);
+ *
+ * Class strings are static (ADR-0008) and React's, except that icons are always baseline_icon()'s unsized svg, so
+ * they are sized with a plain [&_svg] (an escaped quote in a PHP string would not match the class Tailwind compiles).
+ * The input is .sr-only, which checkbox.css and radio.css exclude, so the element styling never draws it.
+ * Single choice keeps one selected once chosen (radio behaviour, accepted 2026-10-06). The joined group's corners and borders are src/toggle-group.css.
+ */
+
+declare(strict_types=1);
+
+const BASELINE_TOGGLE_BASE = 'group/toggle relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap select-none font-(--bl-toggle-font-weight) transition-all outline-none hover:bg-muted hover:text-foreground has-checked:bg-muted has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-(length:--bl-control-ring-width) has-focus-visible:ring-ring has-disabled:pointer-events-none has-disabled:opacity-50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-(length:--bl-control-ring-width) has-[[aria-invalid=true]]:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0';
+
+const BASELINE_TOGGLE_VARIANTS = [
+    'default' => 'bg-transparent',
+    'outline' => 'border-(length:--bl-toggle-border-width) border-input bg-transparent hover:bg-muted',
+];
+
+const BASELINE_TOGGLE_SIZES = [
+    'sm' => 'h-(--bl-toggle-sm-height) min-w-(--bl-toggle-sm-height) gap-(--bl-toggle-sm-gap) px-(--bl-toggle-sm-padding-x) [--toggle-radius:var(--bl-toggle-sm-radius)] rounded-(--toggle-radius) text-(length:--bl-toggle-sm-font-size) leading-(--bl-toggle-sm-line-height) has-data-[icon=inline-start]:ps-(--bl-toggle-sm-padding-x-icon) has-data-[icon=inline-end]:pe-(--bl-toggle-sm-padding-x-icon) [&_svg]:size-(--bl-toggle-sm-icon-size)',
+    'md' => 'h-(--bl-toggle-md-height) min-w-(--bl-toggle-md-height) gap-(--bl-toggle-md-gap) px-(--bl-toggle-md-padding-x) [--toggle-radius:var(--bl-toggle-md-radius)] rounded-(--toggle-radius) text-(length:--bl-toggle-md-font-size) leading-(--bl-toggle-md-line-height) has-data-[icon=inline-start]:ps-(--bl-toggle-md-padding-x-icon) has-data-[icon=inline-end]:pe-(--bl-toggle-md-padding-x-icon) [&_svg]:size-(--bl-toggle-md-icon-size)',
+    'lg' => 'h-(--bl-toggle-lg-height) min-w-(--bl-toggle-lg-height) gap-(--bl-toggle-lg-gap) px-(--bl-toggle-lg-padding-x) [--toggle-radius:var(--bl-toggle-lg-radius)] rounded-(--toggle-radius) text-(length:--bl-toggle-lg-font-size) leading-(--bl-toggle-lg-line-height) has-data-[icon=inline-start]:ps-(--bl-toggle-lg-padding-x-icon) has-data-[icon=inline-end]:pe-(--bl-toggle-lg-padding-x-icon) [&_svg]:size-(--bl-toggle-lg-icon-size)',
+];
+
+const BASELINE_TOGGLE_GROUP = 'group/toggle-group not-typeset flex w-fit flex-row items-center gap-(--bl-toggle-group-gap) data-[spacing=0]:gap-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch';
+
+/**
+ * @param array{
+ *   label?: string, children?: string, icon?: string, icon_position?: string, variant?: string, size?: string,
+ *   pressed?: bool, disabled?: bool, name?: string, value?: string, type?: string, aria_label?: string, id?: string,
+ *   class?: string, slot?: string
+ * } $args `children` is ready markup (it replaces label and icon); `icon` a Baseline system icon name; `type` "radio"
+ *   for a single-choice group's item; `aria_label` names an icon-only toggle (it goes on the input).
+ */
+function baseline_toggle(array $args): string
+{
+    $variant = array_key_exists((string) ($args['variant'] ?? ''), BASELINE_TOGGLE_VARIANTS) ? (string) $args['variant'] : 'default';
+    $size    = array_key_exists((string) ($args['size'] ?? ''), BASELINE_TOGGLE_SIZES) ? (string) $args['size'] : 'md';
+    $type    = ($args['type'] ?? 'checkbox') === 'radio' ? 'radio' : 'checkbox';
+    $label   = (string) ($args['label'] ?? '');
+
+    $inner = (string) ($args['children'] ?? '');
+    if ($inner === '') {
+        $icon = '';
+        if (!empty($args['icon'])) {
+            $at = ($args['icon_position'] ?? 'start') === 'end' ? 'inline-end' : 'inline-start';
+            // no size-* class: the toggle's size sets the icon size (toggle/<size>/icon-size); data-icon tightens its side
+            $icon = baseline_icon((string) $args['icon'], 'shrink-0');
+            if ($label !== '') {
+                $icon = preg_replace('/^<svg\b/', '<svg data-icon="' . $at . '"', $icon, 1) ?? $icon;
+            }
+        }
+        $text  = $label !== '' ? esc_html($label) : '';
+        $inner = ($args['icon_position'] ?? 'start') === 'end' ? $text . $icon : $icon . $text;
+    }
+
+    $input = '<input' . baseline_attrs([
+        'type'       => $type,
+        'class'      => 'sr-only',
+        'name'       => $args['name'] ?? null,
+        'value'      => $args['value'] ?? null,
+        'id'         => $args['id'] ?? null,
+        'checked'    => !empty($args['pressed']),
+        'disabled'   => !empty($args['disabled']),
+        'aria-label' => $args['aria_label'] ?? null,
+    ]) . '>';
+
+    $classes = trim(BASELINE_TOGGLE_BASE . ' not-typeset ' . BASELINE_TOGGLE_VARIANTS[$variant] . ' ' . BASELINE_TOGGLE_SIZES[$size] . ' ' . (string) ($args['class'] ?? ''));
+    return '<label data-slot="' . esc_attr((string) ($args['slot'] ?? 'toggle')) . '" data-variant="' . esc_attr($variant) . '" data-size="' . esc_attr($size) . '" class="' . esc_attr($classes) . '">' . $input . $inner . '</label>';
+}
+
+/**
+ * @param array{
+ *   items: array<int, array{value: string, label?: string, icon?: string, aria_label?: string, disabled?: bool, children?: string}>,
+ *   name?: string, multiple?: bool, value?: string[], variant?: string, size?: string, spacing?: int,
+ *   orientation?: string, disabled?: bool, aria_label?: string, class?: string
+ * } $args `value` lists the items on at first; single choice (the default) is radios sharing `name`.
+ */
+function baseline_toggle_group(array $args): string
+{
+    $name        = sanitize_html_class((string) ($args['name'] ?? '')) ?: wp_unique_id('toggle-group-');
+    $multiple    = !empty($args['multiple']);
+    $value       = array_map('strval', (array) ($args['value'] ?? []));
+    $spacing     = (int) ($args['spacing'] ?? 2);
+    $orientation = ($args['orientation'] ?? 'horizontal') === 'vertical' ? 'vertical' : 'horizontal';
+    $variant     = (string) ($args['variant'] ?? 'default');
+    $size        = (string) ($args['size'] ?? 'md');
+
+    $items = '';
+    foreach ((array) ($args['items'] ?? []) as $item) {
+        $v = (string) ($item['value'] ?? '');
+        $items .= baseline_toggle([
+            'slot'       => 'toggle-group-item',
+            'type'       => $multiple ? 'checkbox' : 'radio',
+            'name'       => $name,
+            'value'      => $v,
+            'pressed'    => in_array($v, $value, true),
+            'variant'    => $variant,
+            'size'       => $size,
+            'label'      => $item['label'] ?? '',
+            'icon'       => $item['icon'] ?? '',
+            'children'   => $item['children'] ?? '',
+            'aria_label' => $item['aria_label'] ?? null,
+            'disabled'   => !empty($item['disabled']) || !empty($args['disabled']),
+            'class'      => 'shrink-0',
+        ]);
+    }
+    return '<div role="group"' . baseline_attrs([
+        'data-slot'        => 'toggle-group',
+        'data-variant'     => $variant,
+        'data-size'        => $size,
+        'data-spacing'     => (string) $spacing,
+        'data-orientation' => $orientation,
+        'aria-label'       => $args['aria_label'] ?? null,
+        'class'            => trim(BASELINE_TOGGLE_GROUP . ' ' . (string) ($args['class'] ?? '')),
+    ]) . '>' . $items . '</div>';
+}

package/templates/wordpress/theme/inc/core-button.php

@@ -0,0 +1,96 @@
+<?php
+/**
+ * core/button IS the Baseline button on WordPress (ADR-0018, supersedes ADR-0016; icons: ADR-0020).
+ *
+ * - Variants are block styles. Core's own `fill` and `outline` ARE the Baseline `default` and `outline` variants;
+ *   `secondary`, `ghost`, `link` and `destructive` are registered here (PHP, no JavaScript).
+ * - Size and icon are server-registered attributes (`baselineSize`, `baselineIcon`, `baselineIconPosition`,
+ *   `baselineIconOnly`). WordPress lets the server definition win for core blocks, so the client needs no attribute
+ *   declaration; the inspector controls live in assets/js/core-button-editor.js. Everything is applied at RENDER
+ *   time (classes on the wrapper, the registered icon's SVG inside the link), so saved markup never changes and
+ *   existing content keeps validating.
+ * - Base look: theme.json `styles.elements.button`; token-controlled panels are switched off in theme.json
+ *   `settings.blocks`; the rest is src/core-button.css. Both read the button/* component tokens (ADR-0017).
+ */
+
+declare(strict_types=1);
+
+const BASELINE_BUTTON_SIZES = ['xs', 'sm', 'md', 'lg'];
+/** Baseline variant => core/button block style name. */
+const BASELINE_BUTTON_STYLES = [
+    'default'     => 'fill',
+    'secondary'   => 'secondary',
+    'outline'     => 'outline',
+    'ghost'       => 'ghost',
+    'link'        => 'link',
+    'destructive' => 'destructive',
+];
+
+add_filter('register_block_type_args', static function (array $args, string $name): array {
+    if ($name === 'core/button') {
+        $args['attributes']['baselineSize']         = ['type' => 'string', 'enum' => BASELINE_BUTTON_SIZES, 'default' => 'md'];
+        $args['attributes']['baselineIcon']         = ['type' => 'string', 'default' => ''];          // registered handle, e.g. baseline/chevron-down
+        $args['attributes']['baselineIconPosition'] = ['type' => 'string', 'enum' => ['start', 'end'], 'default' => 'start'];
+        $args['attributes']['baselineIconOnly']     = ['type' => 'boolean', 'default' => false];
+    }
+    return $args;
+}, 10, 2);
+
+/** The four variants core does not ship; `fill` and `outline` already exist and are restyled by src/core-button.css. */
+add_action('init', static function (): void {
+    foreach (['secondary' => 'Secondary', 'ghost' => 'Ghost', 'link' => 'Link', 'destructive' => 'Destructive'] as $name => $label) {
+        register_block_style('core/button', ['name' => $name, 'label' => __($label, 'baseline')]);
+    }
+});
+
+/**
+ * Render-time axes: size class on the wrapper; icon SVG (from the registry) inside the link, before or after the
+ * text; icon-only keeps the text as the accessible name (visually hidden).
+ */
+add_filter('render_block_core/button', static function (string $content, array $block): string {
+    $attrs = $block['attrs'] ?? [];
+    $size  = $attrs['baselineSize'] ?? 'md';
+    if (!in_array($size, BASELINE_BUTTON_SIZES, true)) {
+        $size = 'md';
+    }
+    // not-typeset: a button inside flowing content must not take typeset's link styling (ADR-0028)
+    $classes = ['is-size-' . $size, 'not-typeset'];
+
+    $icon = (string) ($attrs['baselineIcon'] ?? '');
+    $svg  = $icon !== '' && function_exists('wp_get_icon') ? wp_get_icon($icon, ['size' => null, 'class' => 'wp-block-button__icon']) : '';
+    if ($svg !== '') {
+        $end  = ($attrs['baselineIconPosition'] ?? 'start') === 'end';
+        $only = !empty($attrs['baselineIconOnly']);
+        $classes[] = 'has-icon';
+        if ($end) {
+            $classes[] = 'has-icon-end';
+        }
+        if ($only) {
+            $classes[] = 'is-icon-only';
+        }
+        $content = preg_replace_callback(
+            '/(<(a|button)\b[^>]*\bwp-block-button__link\b[^>]*>)(.*?)(<\/\2>)/s',
+            static function (array $m) use ($svg, $end, $only): string {
+                $text = '<span class="' . ($only ? 'sr-only' : 'wp-block-button__text') . '">' . $m[3] . '</span>';
+                return $m[1] . ($end ? $text . $svg : $svg . $text) . $m[4];
+            },
+            $content,
+            1
+        ) ?? $content;
+    }
+
+    $out = preg_replace('/(<div\b[^>]*\bclass=")([^"]*\bwp-block-button\b[^"]*)"/', '$1$2 ' . implode(' ', $classes) . '"', $content, 1);
+    return is_string($out) ? $out : $content;
+}, 10, 2);
+
+/** Editor script: Size + Icon controls and the editor-side classes; the icon collection is inlined for the picker. */
+add_action('enqueue_block_editor_assets', static function (): void {
+    wp_enqueue_script(
+        'baseline-core-button',
+        BASELINE_URI . '/assets/js/core-button-editor.js',
+        ['wp-hooks', 'wp-compose', 'wp-element', 'wp-components', 'wp-block-editor', 'wp-i18n'],
+        (string) filemtime(BASELINE_DIR . '/assets/js/core-button-editor.js'),
+        true
+    );
+    wp_add_inline_script('baseline-core-button', 'window.baselineIcons = ' . wp_json_encode(baseline_icons_for_editor()) . ';', 'before');
+});

package/templates/wordpress/theme/inc/core-card.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Card on WordPress is core/group (spec: components/card/spec.md; ADR-0018: no core card block, but core/group carries
+ * the anatomy). Block styles name the regions; src/core-card.css ports the React Card's rules onto them:
+ *
+ *   is-style-card / is-style-card-sm   the root (md / sm spacing); every direct child is padded content
+ *   is-style-card-header               title (a heading), description (a paragraph), action (a core/buttons)
+ *   is-style-card-header-bordered      the same header with Figma's Bordered rule beneath it
+ *   is-style-card-footer               the muted, bordered footer; a Row group lays its buttons out, a Stack stacks them
+ *
+ * An image block as the first child is the full-bleed media. patterns/card.php inserts the whole card, so editors delete
+ * regions rather than assemble them. The styles show on every group, not only inside a card: harmless there, and hiding
+ * them would need editor JavaScript.
+ */
+
+declare(strict_types=1);
+
+add_action('init', static function (): void {
+    $styles = [
+        'card'                   => __('Card', 'baseline'),
+        'card-sm'                => __('Card (small)', 'baseline'),
+        'card-header'            => __('Card header', 'baseline'),
+        'card-header-bordered'   => __('Card header (bordered)', 'baseline'),
+        'card-footer'            => __('Card footer', 'baseline'),
+    ];
+    foreach ($styles as $name => $label) {
+        register_block_style('core/group', ['name' => $name, 'label' => $label]);
+    }
+    register_block_pattern_category('baseline', ['label' => __('GC Baseline', 'baseline')]);
+});

package/templates/wordpress/theme/inc/core-layout.php

@@ -0,0 +1,76 @@
+<?php
+/**
+ * Layout on WordPress (B5; specs: components/section, container, columns, panel). Core blocks carry all four
+ * (ADR-0018), so this file only adds what core lacks:
+ *
+ *   Section    core/group, tagName section, align full. `baselineScheme` (server-registered, ADR-0018 §3) renders as
+ *              data-scheme on the group, `baselineSurface` as has-surface-<mode> (Figma's Surface mode: muted for an
+ *              announcement bar); padding top / bottom are the spacing presets theme.json generates from
+ *              spacing/responsive/*.
+ *   Container  no block: core's constrained layout. Content = an unaligned child, Wide = alignwide, Full = alignfull;
+ *              theme.json contentSize / wideSize read layout/*, the inline padding is the root padding.
+ *   Columns    core/columns. `baselineInvertOrder` renders as is-inverted-on-mobile: once stacked, the last column
+ *              comes first. src/core-layout.css sets the gap and shows four columns as 2 x 2 until xl.
+ *   Panel      block style `panel` on core/group: Card's surface around a section's content.
+ *
+ * Render-time only: saved markup never changes, so content keeps validating (ADR-0018).
+ */
+
+declare(strict_types=1);
+
+const BASELINE_SCHEMES = ['scheme-1', 'scheme-2', 'error', 'success', 'warning'];
+const BASELINE_SURFACES = ['muted', 'card', 'primary', 'secondary', 'accent', 'inverse'];
+
+add_filter('register_block_type_args', static function (array $args, string $name): array {
+    if ($name === 'core/group') {
+        $args['attributes']['baselineScheme'] = ['type' => 'string', 'enum' => array_merge([''], BASELINE_SCHEMES), 'default' => ''];
+        $args['attributes']['baselineSurface'] = ['type' => 'string', 'enum' => array_merge([''], BASELINE_SURFACES), 'default' => ''];
+    }
+    if ($name === 'core/columns') {
+        $args['attributes']['baselineInvertOrder'] = ['type' => 'boolean', 'default' => false];
+    }
+    return $args;
+}, 10, 2);
+
+add_action('init', static function (): void {
+    register_block_style('core/group', ['name' => 'panel', 'label' => __('Panel', 'baseline')]);
+});
+
+/** Adds an attribute string to the first opening tag of a block's markup. */
+function baseline_first_tag_attr(string $content, string $attr): string
+{
+    $out = preg_replace('/^(\s*<[a-z][a-z0-9-]*\b)/i', '$1 ' . $attr, $content, 1);
+    return is_string($out) ? $out : $content;
+}
+
+add_filter('render_block_core/group', static function (string $content, array $block): string {
+    $scheme  = (string) ($block['attrs']['baselineScheme'] ?? '');
+    $surface = (string) ($block['attrs']['baselineSurface'] ?? '');
+    if (in_array($surface, BASELINE_SURFACES, true)) {
+        $out     = preg_replace('/(<[a-z][a-z0-9-]*\b[^>]*\bclass=")([^"]*\bwp-block-group\b[^"]*)"/i', '$1$2 has-surface-' . $surface . '"', $content, 1);
+        $content = is_string($out) ? $out : $content;
+    }
+    if (in_array($scheme, BASELINE_SCHEMES, true)) {
+        $content = baseline_first_tag_attr($content, 'data-scheme="' . esc_attr($scheme) . '"');
+    }
+    return $content;
+}, 10, 2);
+
+add_filter('render_block_core/columns', static function (string $content, array $block): string {
+    if (empty($block['attrs']['baselineInvertOrder'])) {
+        return $content;
+    }
+    $out = preg_replace('/(<div\b[^>]*\bclass=")([^"]*\bwp-block-columns\b[^"]*)"/', '$1$2 is-inverted-on-mobile"', $content, 1);
+    return is_string($out) ? $out : $content;
+}, 10, 2);
+
+/** Editor: the Scheme select (groups), the Invert order toggle (columns), the two ratio variations core lacks. */
+add_action('enqueue_block_editor_assets', static function (): void {
+    wp_enqueue_script(
+        'baseline-core-layout',
+        BASELINE_URI . '/assets/js/core-layout-editor.js',
+        ['wp-hooks', 'wp-compose', 'wp-element', 'wp-components', 'wp-block-editor', 'wp-blocks', 'wp-i18n', 'wp-dom-ready'],
+        (string) filemtime(BASELINE_DIR . '/assets/js/core-layout-editor.js'),
+        true
+    );
+});

package/templates/wordpress/theme/inc/core-navigation.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * core/navigation IS the Baseline Navigation Menu on WordPress (ADR-0018; spec: components/navigation-menu/spec.md):
+ * src/core-navigation.css styles it, its mobile overlay as the Sidebar's Sheet (spec: components/sidebar/spec.md).
+ * This file adds `not-typeset` to the <nav>, so a menu placed in post content keeps its own look instead of typeset's
+ * list and link rules (ADR-0028), as core/button's render filter does; and, where the menu has an overlay, enqueues
+ * assets/js/core-navigation.js (a click on the dimmed page closes it).
+ */
+
+declare(strict_types=1);
+
+add_action('wp_enqueue_scripts', static function (): void {
+    wp_register_script(
+        'baseline-core-navigation',
+        BASELINE_URI . '/assets/js/core-navigation.js',
+        [],
+        (string) filemtime(BASELINE_DIR . '/assets/js/core-navigation.js'),
+        ['in_footer' => true, 'strategy' => 'defer']
+    );
+});
+
+add_filter('render_block_core/navigation', static function (string $content): string {
+    $tags = new WP_HTML_Tag_Processor($content);
+    if ($tags->next_tag(['tag_name' => 'nav', 'class_name' => 'wp-block-navigation'])) {
+        $tags->add_class('not-typeset');
+    }
+    if ($tags->next_tag(['class_name' => 'wp-block-navigation__responsive-container'])) {
+        wp_enqueue_script('baseline-core-navigation');
+    }
+    return $tags->get_updated_html();
+});

package/templates/wordpress/theme/inc/core-pagination.php

@@ -0,0 +1,87 @@
+<?php
+/**
+ * Pagination on WordPress (spec: components/pagination/spec.md; ADR-0018): Previous and Next are always rendered, as in
+ * React and Shopify (user, 2026-10-02). Core drops Previous on the first page and Next on the last, which shifts the row;
+ * here the missing one comes back as a disabled link (no href, role="link", aria-disabled="true"), styled by
+ * src/core-pagination.css. A single page still renders nothing: a control is added only beside its counterpart.
+ *
+ * The looks themselves are generated (ADR-0031): src/looks.generated.css and inc/looks.generated.php.
+ */
+
+declare(strict_types=1);
+
+/** Core's arrow characters by paginationArrow (get_query_pagination_arrow()); the stylesheet masks them as chevrons. */
+function baseline_pagination_arrow(string $type, string $direction): string
+{
+    $arrows = [
+        'arrow'   => ['previous' => '←', 'next' => '→'],
+        'chevron' => ['previous' => '«', 'next' => '»'],
+    ];
+    if (!isset($arrows[$type])) {
+        return '';
+    }
+    return sprintf(
+        '<span class="wp-block-query-pagination-%1$s-arrow is-arrow-%2$s" aria-hidden="true">%3$s</span>',
+        $direction,
+        esc_attr($type),
+        $arrows[$type][$direction]
+    );
+}
+
+/** core/query-pagination: put back the Previous or Next that core left out, as a disabled link in its place. */
+add_filter('render_block_core/query-pagination', static function (string $content, array $block): string {
+    if (trim($content) === '') {
+        return $content;
+    }
+    $has = static fn (string $d): bool => str_contains($content, "wp-block-query-pagination-{$d}\"")
+        || str_contains($content, "wp-block-query-pagination-{$d} ");
+    $inner = [];
+    foreach ($block['innerBlocks'] ?? [] as $child) {
+        $inner[$child['blockName'] ?? ''] = $child['attrs'] ?? [];
+    }
+    $arrow = (string) ($block['attrs']['paginationArrow'] ?? 'none');
+    $show_label = (bool) ($block['attrs']['showLabel'] ?? true);
+    $disabled = static function (string $direction) use ($inner, $arrow, $show_label): string {
+        $attrs = $inner["core/query-pagination-{$direction}"];
+        $label = !empty($attrs['label']) ? esc_html($attrs['label']) : ($direction === 'previous' ? __('Previous Page') : __('Next Page'));
+        $arrow_html = baseline_pagination_arrow($arrow, $direction);
+        $text = $show_label ? $label : '';
+        $body = $direction === 'previous' ? $arrow_html . $text : $text . $arrow_html;
+        return sprintf(
+            '<a class="wp-block-query-pagination-%1$s" role="link" aria-disabled="true"%2$s>%3$s</a>',
+            $direction,
+            $show_label ? '' : ' aria-label="' . $label . '"',
+            $body
+        );
+    };
+    $has_previous = $has('previous');
+    $has_next = $has('next');
+    if (!$has_previous && $has_next && isset($inner['core/query-pagination-previous'])) {
+        $content = preg_replace('/(<nav\b[^>]*>)/', '$1' . $disabled('previous'), $content, 1) ?? $content;
+    }
+    if ($has_previous && !$has_next && isset($inner['core/query-pagination-next'])) {
+        $pos = strrpos($content, '</nav>');
+        if ($pos !== false) {
+            $content = substr($content, 0, $pos) . $disabled('next') . substr($content, $pos);
+        }
+    }
+    return $content;
+}, 10, 2);
+
+/**
+ * The classic paginate_links() output (the_posts_pagination(), paginate_comments_links()): the same, for the plain
+ * type. The list type is left as core prints it.
+ */
+add_filter('paginate_links_output', static function (string $output, array $args): string {
+    if ($output === '' || empty($args['prev_next']) || ($args['type'] ?? 'plain') !== 'plain' || (int) ($args['total'] ?? 1) < 2) {
+        return $output;
+    }
+    $current = (int) ($args['current'] ?? 1);
+    if ($current <= 1 && !str_contains($output, 'prev page-numbers')) {
+        $output = '<a class="prev page-numbers" role="link" aria-disabled="true">' . $args['prev_text'] . "</a>\n" . $output;
+    }
+    if ($current >= (int) $args['total'] && !str_contains($output, 'next page-numbers')) {
+        $output .= "\n" . '<a class="next page-numbers" role="link" aria-disabled="true">' . $args['next_text'] . '</a>';
+    }
+    return $output;
+}, 10, 2);

package/templates/wordpress/theme/inc/header.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * The site header on WordPress (B5; spec: components/header/spec.md). Core blocks only (ADR-0018): header.php renders
+ * the `header` template part (parts/header.html, editable in the Site Editor), and patterns/header-inline.php and
+ * header-stacked.php are the two Figma layouts an editor can swap in. src/header.css lays them out.
+ *
+ * Search in a Dialog (user, 2026-10-07): the `dialog` block style on core/search renders a ghost search button that
+ * opens a Baseline Dialog (baseline_dialog()) holding core's own search form, unchanged. No account link (user: almost
+ * never needed on WordPress) and no cart.
+ */
+
+declare(strict_types=1);
+
+add_action('init', static function (): void {
+    register_block_style('core/search', ['name' => 'dialog', 'label' => __('In a dialog', 'baseline')]);
+    register_block_pattern_category('header', ['label' => __('Headers', 'baseline')]);
+});
+
+add_filter('render_block_core/search', static function (string $content, array $block): string {
+    $class = (string) ($block['attrs']['className'] ?? '');
+    if (!preg_match('/(^|\s)is-style-dialog(\s|$)/', $class)) {
+        return $content;
+    }
+    $id      = wp_unique_id('search-dialog-');
+    $trigger = baseline_button([
+        'variant'  => 'ghost',
+        'size'     => 'md',
+        'class'    => 'is-icon-only has-icon',
+        'children' => baseline_icon('search') . '<span class="sr-only">' . esc_html__('Search', 'baseline') . '</span>',
+        'attrs'    => ['command' => 'show-modal', 'commandfor' => $id, 'aria-label' => __('Search', 'baseline')],
+    ]);
+    $dialog = baseline_dialog([
+        'id'      => $id,
+        'trigger' => false,
+        'title'   => __('Search', 'baseline'),
+        'body'    => $content,
+    ]);
+    return '<div class="bl-search-dialog not-typeset">' . $trigger . $dialog . '</div>';
+}, 10, 2);