@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/blocks/carousel/carousel.figma.ts

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4557-180
+// source=platforms/wordpress/theme/blocks/carousel/render.php
+// component=acf/carousel
+// WordPress Code Connect template (label "WordPress"): Carousel is the ACF block acf/carousel (core has none, ADR-0018),
+// its slides acf/carousel-slide blocks around any blocks. Show Controls / Show Dots are the block's fields; the block
+// has no vertical form, so Orientation is not read.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const controls = instance.getBoolean("Show Controls") ? "1" : "0";
+const dots = instance.getBoolean("Show Dots") ? "1" : "0";
+const slide = (n: number) => `<!-- wp:acf/carousel-slide {"name":"acf/carousel-slide","mode":"preview"} -->
+<!-- wp:paragraph --><p>Slide ${n}</p><!-- /wp:paragraph -->
+<!-- /wp:acf/carousel-slide -->`;
+
+export default {
+  example: figma.code`<!-- wp:acf/carousel {"name":"acf/carousel","data":{"aria_label":"Featured","slides_per_view":"1","loop":"0","autoplay":"0","show_controls":"${controls}","show_dots":"${dots}"},"mode":"preview"} -->
+${[1, 2, 3].map(slide).join("\n")}
+<!-- /wp:acf/carousel -->`,
+  id: "wp-acf-carousel",
+  metadata: { nestable: true },
+};

package/templates/wordpress/theme/blocks/carousel/render.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * acf/carousel (spec: components/carousel/spec.md; user 2026-10-06): core has no carousel block, so ADR-0018 allows
+ * ACF. React's markup (role=region, a viewport, a track of acf/carousel-slide blocks, Previous / Next, CarouselDots),
+ * run by the shared Embla script (assets/js/carousel.js, the block's viewScript; built from src/carousel.js by
+ * `npm run build`). ACF wraps the inner blocks in div.acf-innerblocks-container on the front end too, so the viewport
+ * names that wrapper as the track (data-track). Settings: slides per view, loop, autoplay, controls, dots.
+ */
+
+declare(strict_types=1);
+
+$per_view = (string) (get_field('slides_per_view') ?: '1');
+$loop     = (bool) get_field('loop');
+$autoplay = max(0, (int) get_field('autoplay')) * 1000;
+// ACF returns "1" / "0" (or null before the block is first saved, which keeps the defaults: on)
+$on       = static fn($v): bool => $v === null || $v === '' ? true : (bool) (int) $v;
+$controls = $on(get_field('show_controls'));
+$dots     = $on(get_field('show_dots'));
+$label    = (string) (get_field('aria_label') ?: __('Carousel', 'baseline'));
+$template = [
+    ['acf/carousel-slide', [], [['core/paragraph', ['content' => __('Slide one', 'baseline')]]]],
+    ['acf/carousel-slide', [], [['core/paragraph', ['content' => __('Slide two', 'baseline')]]]],
+    ['acf/carousel-slide', [], [['core/paragraph', ['content' => __('Slide three', 'baseline')]]]],
+];
+$control = static fn(string $slot, string $icon, string $text): string => baseline_button([
+    'variant'  => 'outline',
+    'size'     => 'sm',
+    'class'    => 'is-icon-only bl-carousel__control bl-carousel__control--' . $slot,
+    'attrs'    => ['data-slot' => 'carousel-' . $slot],
+    'children' => baseline_icon($icon) . '<span class="sr-only">' . esc_html($text) . '</span>',
+]);
+?>
+<div <?php echo get_block_wrapper_attributes([ // phpcs:ignore WordPress.Security.EscapeOutput
+    'class'                => 'bl-carousel' . ($dots ? ' has-dots' : ''), // slides keep typeset; data-slot gives the flow gap
+    'role'                 => 'region',
+    'aria-roledescription' => 'carousel',
+    'aria-label'           => $label,
+    'data-slot'            => 'carousel',
+    'data-orientation'     => 'horizontal',
+    'data-slides'          => $per_view,
+    'data-options'         => wp_json_encode(['loop' => $loop, 'align' => 'start']),
+    'data-autoplay'        => $autoplay ? (string) $autoplay : null,
+]); ?>>
+    <div class="bl-carousel__viewport" data-slot="carousel-content" data-track=".acf-innerblocks-container">
+        <InnerBlocks allowedBlocks="<?php echo esc_attr(wp_json_encode(['acf/carousel-slide'])); ?>" template="<?php echo esc_attr(wp_json_encode($template)); ?>" />
+    </div>
+    <?php if ($controls) : ?>
+        <?php echo $control('previous', 'chevron-left', __('Previous slide', 'baseline')); // phpcs:ignore WordPress.Security.EscapeOutput ?>
+        <?php echo $control('next', 'chevron-right', __('Next slide', 'baseline')); // phpcs:ignore WordPress.Security.EscapeOutput ?>
+    <?php endif; ?>
+    <?php if ($dots) : ?>
+        <div class="bl-carousel__dots" data-slot="carousel-dots" data-dot-class="bl-carousel__dot"></div>
+    <?php endif; ?>
+</div>

package/templates/wordpress/theme/blocks/carousel-slide/block.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "acf/carousel-slide",
+  "title": "Carousel Slide",
+  "description": "One slide of a Carousel: any blocks (spec: components/carousel/spec.md).",
+  "category": "design",
+  "icon": "format-image",
+  "parent": ["acf/carousel"],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "render.php",
+    "blockVersion": 3
+  },
+  "supports": {
+    "anchor": true,
+    "html": false,
+    "align": false,
+    "color": false,
+    "typography": false,
+    "spacing": false,
+    "jsx": true
+  }
+}

package/templates/wordpress/theme/blocks/carousel-slide/render.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * acf/carousel-slide: one slide of acf/carousel (spec: components/carousel/spec.md), React's CarouselItem
+ * (role=group, aria-roledescription=slide) around any blocks; an optional accessible name (aria_label).
+ */
+
+declare(strict_types=1);
+
+$label = (string) (get_field('aria_label') ?: '');
+?>
+<div <?php echo get_block_wrapper_attributes(['class' => 'bl-carousel__slide', 'role' => 'group', 'aria-roledescription' => 'slide', 'aria-label' => $label !== '' ? $label : null, 'data-slot' => 'carousel-item']); // phpcs:ignore WordPress.Security.EscapeOutput ?>>
+    <InnerBlocks />
+</div>

package/templates/wordpress/theme/blocks/dialog/block.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "acf/dialog",
+  "title": "Dialog",
+  "description": "A button that opens a modal dialog: title, description, any blocks as the body and an optional footer (spec: components/dialog/spec.md).",
+  "category": "design",
+  "icon": "welcome-widgets-menus",
+  "keywords": ["dialog", "modal", "popup", "lightbox"],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "render.php",
+    "blockVersion": 3
+  },
+  "supports": {
+    "anchor": true,
+    "html": false,
+    "align": false,
+    "color": false,
+    "typography": false,
+    "spacing": false,
+    "jsx": true
+  }
+}

package/templates/wordpress/theme/blocks/dialog/dialog.figma.ts

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4461-13577
+// source=platforms/wordpress/theme/blocks/dialog/render.php
+// component=acf/dialog
+// WordPress Code Connect template (label "WordPress"): Figma's Dialog is the acf/dialog block (no comparable core
+// block, ADR-0018). Title, description and the corner close are fields; the body is InnerBlocks; Show Footer adds the
+// child acf/dialog-footer with a core/buttons and its Close button. Show Media and Footer Orientation have no field.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const showHeader = instance.getBoolean("Show Header");
+const showFooter = instance.getBoolean("Show Footer");
+const showClose = instance.getBoolean("Show Close Button");
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+
+const fields = [
+  `"trigger_label":"Open"`,
+  showHeader ? `"title":"${title}"` : `"title":""`,
+  showHeader && description ? `"description":"${description}"` : "",
+  showClose ? "" : `"show_close":"0"`,
+].filter(Boolean).join(",");
+
+const footer = showFooter
+  ? `
+<!-- wp:acf/dialog-footer {"name":"acf/dialog-footer","data":{"close_label":"Cancel"},"mode":"preview"} -->
+<!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Continue</a></div><!-- /wp:button --></div><!-- /wp:buttons -->
+<!-- /wp:acf/dialog-footer -->`
+  : "";
+
+export default {
+  example: figma.code`<!-- wp:acf/dialog {"name":"acf/dialog","data":{${fields}},"mode":"preview"} -->
+<!-- wp:paragraph --><p>Dialog content goes here.</p><!-- /wp:paragraph -->${footer}
+<!-- /wp:acf/dialog -->`,
+  id: "wp-acf-dialog",
+  metadata: { nestable: true },
+};

package/templates/wordpress/theme/blocks/dialog/render.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * acf/dialog: the Baseline Dialog (spec: components/dialog/spec.md). WordPress has no comparable core block
+ * (ADR-0018), so this is an ACF block: the trigger, title and description are fields; the body is InnerBlocks, with an
+ * optional acf/dialog-footer last. Markup from baseline_dialog() (inc/components/dialog.php), shared with template code.
+ *
+ * On the front end it is a native <dialog> opened by the trigger's command="show-modal" (no JavaScript). In the editor
+ * the panel renders in place, because a closed <dialog> would hide the blocks editors need to reach.
+ *
+ * @var array $block
+ * @var bool  $is_preview
+ */
+
+declare(strict_types=1);
+
+// The anchor is the block wrapper's id (get_block_wrapper_attributes), so the <dialog> takes "<anchor>-dialog": a
+// shared id made the trigger's commandfor find the wrapper (found 2026-10-02 rendering through DDEV).
+$anchor   = (string) ($block['anchor'] ?? '');
+$id       = ($anchor !== '' ? $anchor : 'dialog-' . substr(md5((string) ($block['id'] ?? wp_unique_id())), 0, 8)) . '-dialog';
+$close    = get_field('show_close'); // ACF stores the toggle as "1"/"0"; null until the block is first saved
+$template = [
+    ['core/paragraph', ['content' => __('Dialog content goes here.', 'baseline')]],
+    ['acf/dialog-footer', []],
+];
+$body = '<InnerBlocks template="' . esc_attr(wp_json_encode($template)) . '" templateLock="false" />';
+?>
+<div <?php echo get_block_wrapper_attributes(['class' => 'not-typeset']); // phpcs:ignore WordPress.Security.EscapeOutput ?>>
+    <?php
+    echo baseline_dialog([ // phpcs:ignore WordPress.Security.EscapeOutput -- built and escaped by baseline_dialog()
+        'id'              => $id,
+        'trigger'         => (string) (get_field('trigger_label') ?: __('Open', 'baseline')),
+        'trigger_variant' => (string) (get_field('trigger_variant') ?: 'outline'),
+        'trigger_size'    => (string) (get_field('trigger_size') ?: 'md'),
+        'title'           => (string) (get_field('title') ?: ''),
+        'description'     => (string) (get_field('description') ?: ''),
+        'show_close'      => $close === null || (bool) $close,
+        'body'            => $body,
+        'preview'         => !empty($is_preview),
+    ]);
+    ?>
+</div>

package/templates/wordpress/theme/blocks/dialog-footer/block.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "acf/dialog-footer",
+  "title": "Dialog Footer",
+  "description": "The footer of a Dialog: its buttons, bordered and muted, stacked on small screens. Place it last (spec: components/dialog/spec.md).",
+  "category": "design",
+  "icon": "button",
+  "parent": ["acf/dialog"],
+  "keywords": ["dialog", "footer", "actions"],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "render.php",
+    "blockVersion": 3
+  },
+  "supports": {
+    "html": false,
+    "align": false,
+    "color": false,
+    "typography": false,
+    "spacing": false,
+    "multiple": false,
+    "jsx": true
+  }
+}

package/templates/wordpress/theme/blocks/dialog-footer/render.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * acf/dialog-footer: the Dialog's footer (spec: components/dialog/spec.md), a child of acf/dialog. Its actions are one
+ * core/buttons (real core/button blocks with their block styles); the Close field adds an outline button that closes
+ * the dialog through <form method="dialog">, which needs neither the dialog's id nor JavaScript.
+ */
+
+declare(strict_types=1);
+
+$template = [['core/buttons', [], [['core/button', ['text' => __('Continue', 'baseline')]]]]];
+$actions  = '<InnerBlocks allowedBlocks="' . esc_attr(wp_json_encode(['core/buttons'])) . '" template="'
+    . esc_attr(wp_json_encode($template)) . '" templateLock="false" />';
+
+echo baseline_dialog_footer( // phpcs:ignore WordPress.Security.EscapeOutput -- built and escaped by baseline_dialog_footer()
+    $actions,
+    (string) (get_field('close_label') ?? __('Cancel', 'baseline')),
+    get_block_wrapper_attributes(['class' => BASELINE_DIALOG_FOOTER])
+);

package/templates/wordpress/theme/blocks/item/block.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "acf/item",
+  "title": "Item",
+  "description": "A row: optional media, a title and description, and actions at the end (spec: components/item/spec.md).",
+  "category": "design",
+  "icon": "list-view",
+  "keywords": ["item", "row", "list", "person", "file", "setting"],
+  "usesContext": ["baseline/itemGroup"],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "render.php",
+    "blockVersion": 3
+  },
+  "supports": {
+    "anchor": true,
+    "html": false,
+    "align": false,
+    "color": false,
+    "typography": false,
+    "spacing": false,
+    "jsx": true
+  }
+}

package/templates/wordpress/theme/blocks/item/item.figma.ts

@@ -0,0 +1,43 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4360-299
+// source=platforms/wordpress/theme/blocks/item/render.php
+// component=acf/item
+// WordPress Code Connect template (label "WordPress"): Figma's Item is the acf/item block. Variant and Size are fields;
+// Show Media picks the media field (icon or image); Show Actions turns on the block's core/buttons InnerBlocks. Header
+// and footer rows have no WordPress field.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum("Variant", { default: "default", outline: "outline", muted: "muted" });
+const size = instance.getEnum("Size", { md: "md", sm: "sm", xs: "xs" });
+const showMedia = instance.getBoolean("Show Media");
+const showActions = instance.getBoolean("Show Actions");
+
+// Title and description are component properties (2026-10-02): the Content slot became a fixed title and
+// description, since they are not drop-in content.
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+
+let media = "";
+if (showMedia) {
+  const part = instance.findInstance(".Item/Media");
+  const kind = part && part.type === "INSTANCE" ? part.getEnum("Variant", { icon: "icon", image: "image" }) : "icon";
+  media = kind === "image" ? `"media":"image"` : `"media":"icon","icon":"success"`;
+}
+const fields = [
+  variant !== "default" ? `"variant":"${variant}"` : "",
+  size !== "md" ? `"size":"${size}"` : "",
+  media,
+  `"title":"${title}"`,
+  description ? `"description":"${description}"` : "",
+  showActions ? `"show_actions":"1"` : "",
+].filter(Boolean).join(",");
+
+export default {
+  example: showActions
+    ? figma.code`<!-- wp:acf/item {"name":"acf/item","data":{${fields}},"mode":"preview"} -->
+<!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","baselineSize":"sm"} --><div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Action</a></div><!-- /wp:button --></div><!-- /wp:buttons -->
+<!-- /wp:acf/item -->`
+    : figma.code`<!-- wp:acf/item {"name":"acf/item","data":{${fields}},"mode":"preview"} /-->`,
+  id: "wp-acf-item",
+  metadata: { nestable: true },
+};

package/templates/wordpress/theme/blocks/item/render.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * acf/item: the Baseline Item (spec: components/item/spec.md). An ACF block rather than core/group because Item's
+ * anatomy is fixed (a one-line title, a two-line description) and core cannot enforce that typography (user decision,
+ * 2026-09-30). Markup from baseline_item() (inc/components/item.php); the item itself is the block's root.
+ *
+ * Actions are InnerBlocks limited to core/buttons, so they are real core/button blocks with their block styles. A Link
+ * makes the whole row one <a>, which renders no actions: nothing interactive may sit inside a link. Size "Group" (the
+ * default) takes the enclosing acf/item-group's size through block context.
+ *
+ * @var array $context
+ */
+
+declare(strict_types=1);
+
+$group   = is_array($context['baseline/itemGroup'] ?? null) ? $context['baseline/itemGroup'] : [];
+$size    = (string) (get_field('size') ?: 'group');
+$size    = $size === 'group' ? (string) ($group['size'] ?? 'md') : $size;
+$variant = (string) (get_field('variant') ?: 'default');
+$media   = (string) (get_field('media') ?: 'none');
+$image   = $media === 'image' ? get_field('image') : null;
+$link    = get_field('link');
+$href    = is_array($link) ? (string) ($link['url'] ?? '') : '';
+$actions = '<InnerBlocks allowedBlocks="' . esc_attr(wp_json_encode(['core/buttons'])) . '" template="'
+    . esc_attr(wp_json_encode([['core/buttons', [], [['core/button', ['className' => 'is-style-outline', 'baselineSize' => 'sm']]]]]))
+    . '" templateLock="false" />';
+
+echo baseline_item([ // phpcs:ignore WordPress.Security.EscapeOutput -- built and escaped by baseline_item()
+    'title'       => (string) (get_field('title') ?: ''),
+    'description' => (string) (get_field('description') ?: ''),
+    'icon'        => $media === 'icon' ? (string) (get_field('icon') ?: '') : '',
+    'image'       => is_array($image) ? (string) ($image['sizes']['thumbnail'] ?? $image['url'] ?? '') : '',
+    'image_alt'   => is_array($image) ? (string) ($image['alt'] ?? '') : '',
+    'size'        => $size,
+    'href'        => $href,
+    'actions'     => get_field('show_actions') ? $actions : '',
+    'root_attrs'  => get_block_wrapper_attributes(['class' => baseline_item_classes($variant, $size)]),
+]);

package/templates/wordpress/theme/blocks/item-group/block.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "acf/item-group",
+  "title": "Item Group",
+  "description": "A list of Items; the gap follows their size (spec: components/item/spec.md).",
+  "category": "design",
+  "icon": "list-view",
+  "keywords": ["item", "list", "group"],
+  "providesContext": { "baseline/itemGroup": "data" },
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "render.php",
+    "blockVersion": 3
+  },
+  "supports": {
+    "anchor": true,
+    "html": false,
+    "align": false,
+    "color": false,
+    "typography": false,
+    "spacing": false,
+    "jsx": true
+  }
+}

package/templates/wordpress/theme/blocks/item-group/item-group.figma.ts

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2600-28149
+// source=platforms/wordpress/theme/blocks/item-group/render.php
+// component=acf/item-group
+// WordPress Code Connect template (label "WordPress"): Figma's Item Group is the acf/item-group block; its Size is the
+// group's field, which items left on size "Group" follow. The slot's Items render their own acf/item templates.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum("Size", { md: "md", sm: "sm", xs: "xs" });
+const items = (instance.children ?? [])
+  .flatMap((c: any) => (c.type === "INSTANCE" ? [c] : c.children ?? []))
+  .filter((c: any) => c.type === "INSTANCE")
+  .map((c: any) => {
+    try {
+      return c.executeTemplate().example;
+    } catch {
+      return undefined;
+    }
+  })
+  .filter(Boolean);
+
+export default {
+  example: figma.code`<!-- wp:acf/item-group {"name":"acf/item-group","data":{"size":"${size}"},"mode":"preview"} -->
+${items.length ? items : figma.code`<!-- wp:acf/item {"name":"acf/item","data":{"title":"Item"},"mode":"preview"} /-->`}
+<!-- /wp:acf/item-group -->`,
+  id: "wp-acf-item-group",
+  metadata: { nestable: true },
+};

package/templates/wordpress/theme/blocks/item-group/render.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * acf/item-group: a list of acf/item blocks (spec: components/item/spec.md; user-approved 2026-09-30). Mirrors React's
+ * ItemGroup: role="list", and the gap between items follows their size. Items whose size is "Group" take the group's
+ * Size through block context (the group provides its ACF `data` as baseline/itemGroup).
+ *
+ * ACF wraps InnerBlocks in div.acf-innerblocks-container on the front end as well as in the editor, so the gap is
+ * carried through those wrappers in src/item.css, as Avatar Group does.
+ */
+
+declare(strict_types=1);
+
+$size     = baseline_item_size((string) (get_field('size') ?: 'md'));
+$allowed  = ['acf/item'];
+$template = [
+    ['acf/item', ['data' => ['title' => __('First item', 'baseline'), 'description' => __('A short description.', 'baseline')]]],
+    ['acf/item', ['data' => ['title' => __('Second item', 'baseline'), 'description' => __('A short description.', 'baseline')]]],
+];
+?>
+<div <?php echo get_block_wrapper_attributes(['class' => BASELINE_ITEM_GROUP, 'role' => 'list', 'data-slot' => 'item-group', 'data-size' => $size]); // phpcs:ignore WordPress.Security.EscapeOutput ?>>
+    <InnerBlocks allowedBlocks="<?php echo esc_attr(wp_json_encode($allowed)); ?>" template="<?php echo esc_attr(wp_json_encode($template)); ?>" />
+</div>

package/templates/wordpress/theme/blocks/sheet/block.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "acf/sheet",
+  "title": "Sheet",
+  "description": "A button that opens a panel against one edge of the screen: title, description, any blocks as the body and an optional footer (spec: components/sheet/spec.md).",
+  "category": "design",
+  "icon": "align-pull-right",
+  "keywords": ["sheet", "drawer", "panel", "offcanvas", "side"],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "render.php",
+    "blockVersion": 3
+  },
+  "supports": {
+    "anchor": true,
+    "html": false,
+    "align": false,
+    "color": false,
+    "typography": false,
+    "spacing": false,
+    "jsx": true
+  }
+}

package/templates/wordpress/theme/blocks/sheet/render.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * acf/sheet: the Baseline Sheet (spec: components/sheet/spec.md), Dialog's machinery drawn as an edge panel. No core
+ * block is comparable (ADR-0018). The trigger, side, title and description are fields; the body is InnerBlocks, with an
+ * optional acf/sheet-footer last. Markup from baseline_sheet() (inc/components/sheet.php), shared with template code.
+ * In the editor the panel renders in place, because a closed <dialog> would hide the blocks editors need to reach.
+ *
+ * @var array $block
+ * @var bool  $is_preview
+ */
+
+declare(strict_types=1);
+
+// The anchor is the block wrapper's id, so the <dialog> takes "<anchor>-sheet" (a shared id breaks commandfor).
+$anchor   = (string) ($block['anchor'] ?? '');
+$id       = ($anchor !== '' ? $anchor : 'sheet-' . substr(md5((string) ($block['id'] ?? wp_unique_id())), 0, 8)) . '-sheet';
+$close    = get_field('show_close'); // ACF stores the toggle as "1"/"0"; null until the block is first saved
+$template = [
+    ['core/paragraph', ['content' => __('Sheet content goes here.', 'baseline')]],
+    ['acf/sheet-footer', []],
+];
+$body = '<InnerBlocks template="' . esc_attr(wp_json_encode($template)) . '" templateLock="false" />';
+?>
+<div <?php echo get_block_wrapper_attributes(['class' => 'not-typeset']); // phpcs:ignore WordPress.Security.EscapeOutput ?>>
+    <?php
+    echo baseline_sheet([ // phpcs:ignore WordPress.Security.EscapeOutput -- built and escaped by baseline_sheet()
+        'id'              => $id,
+        'trigger'         => (string) (get_field('trigger_label') ?: __('Open', 'baseline')),
+        'trigger_variant' => (string) (get_field('trigger_variant') ?: 'outline'),
+        'trigger_size'    => (string) (get_field('trigger_size') ?: 'md'),
+        'side'            => (string) (get_field('side') ?: 'right'),
+        'title'           => (string) (get_field('title') ?: ''),
+        'description'     => (string) (get_field('description') ?: ''),
+        'show_close'      => $close === null || (bool) $close,
+        'body'            => $body,
+        'preview'         => !empty($is_preview),
+    ]);
+    ?>
+</div>

package/templates/wordpress/theme/blocks/sheet/sheet.figma.ts

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4467-82
+// source=platforms/wordpress/theme/blocks/sheet/render.php
+// component=acf/sheet
+// WordPress Code Connect template (label "WordPress"): Figma's Sheet is the acf/sheet block (no comparable core block,
+// ADR-0018). Side, title, description and the corner close are fields; the body is InnerBlocks; Show Footer adds the
+// child acf/sheet-footer with a core/buttons and its Close button.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const side = instance.getEnum("Side", { right: "right", left: "left", top: "top", bottom: "bottom" });
+const showHeader = instance.getBoolean("Show Header");
+const showFooter = instance.getBoolean("Show Footer");
+const showClose = instance.getBoolean("Show Close Button");
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+
+const fields = [
+  `"trigger_label":"Open"`,
+  side !== "right" ? `"side":"${side}"` : "",
+  showHeader ? `"title":"${title}"` : `"title":""`,
+  showHeader && description ? `"description":"${description}"` : "",
+  showClose ? "" : `"show_close":"0"`,
+].filter(Boolean).join(",");
+
+const footer = showFooter
+  ? `
+<!-- wp:acf/sheet-footer {"name":"acf/sheet-footer","data":{"close_label":"Close"},"mode":"preview"} -->
+<!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Save changes</a></div><!-- /wp:button --></div><!-- /wp:buttons -->
+<!-- /wp:acf/sheet-footer -->`
+  : "";
+
+export default {
+  example: figma.code`<!-- wp:acf/sheet {"name":"acf/sheet","data":{${fields}},"mode":"preview"} -->
+<!-- wp:paragraph --><p>Sheet content goes here.</p><!-- /wp:paragraph -->${footer}
+<!-- /wp:acf/sheet -->`,
+  id: "wp-acf-sheet",
+  metadata: { nestable: true },
+};

package/templates/wordpress/theme/blocks/sheet-footer/block.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "acf/sheet-footer",
+  "title": "Sheet Footer",
+  "description": "The footer of a Sheet: its buttons, at the bottom of the panel, stacked. Place it last (spec: components/sheet/spec.md).",
+  "category": "design",
+  "icon": "button",
+  "parent": ["acf/sheet"],
+  "keywords": ["sheet", "footer", "actions"],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "render.php",
+    "blockVersion": 3
+  },
+  "supports": {
+    "html": false,
+    "align": false,
+    "color": false,
+    "typography": false,
+    "spacing": false,
+    "multiple": false,
+    "jsx": true
+  }
+}

package/templates/wordpress/theme/blocks/sheet-footer/render.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * acf/sheet-footer: the Sheet's footer (spec: components/sheet/spec.md), a child of acf/sheet, pushed to the bottom of the
+ * panel with its buttons stacked. Its actions are one core/buttons; the Close field adds an outline button after them
+ * that closes the sheet through <form method="dialog"> (no id, no JavaScript).
+ */
+
+declare(strict_types=1);
+
+$template = [['core/buttons', [], [['core/button', ['text' => __('Save changes', 'baseline')]]]]];
+$actions  = '<InnerBlocks allowedBlocks="' . esc_attr(wp_json_encode(['core/buttons'])) . '" template="'
+    . esc_attr(wp_json_encode($template)) . '" templateLock="false" />';
+
+echo baseline_sheet_footer( // phpcs:ignore WordPress.Security.EscapeOutput -- built and escaped by baseline_sheet_footer()
+    $actions,
+    (string) (get_field('close_label') ?? __('Close', 'baseline')),
+    get_block_wrapper_attributes(['class' => BASELINE_SHEET_FOOTER])
+);

package/templates/wordpress/theme/build-js.mjs

@@ -0,0 +1,22 @@
+// Bundles the theme's scripts that import npm packages (spec: components/carousel/spec.md). Run by `npm run build`.
+// src/carousel.js is a copy of platforms/html/src/carousel.js (scripts/gen-html.mjs refreshes it in the monorepo); in a
+// project scaffolded from this theme, update Embla with `npm install embla-carousel@<v> embla-carousel-autoplay@<v>`
+// and run `npm run build` again: the bundle's banner names the version it was built with.
+import { build } from "esbuild";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const v = (p) => JSON.parse(readFileSync(join(here, "node_modules", p, "package.json"), "utf8")).version;
+await build({
+  entryPoints: [join(here, "src", "carousel.js")],
+  bundle: true,
+  minify: true,
+  format: "iife",
+  target: "es2020",
+  outfile: join(here, "assets", "js", "carousel.js"),
+  banner: { js: `/* Baseline carousel (src/carousel.js) bundled with embla-carousel ${v("embla-carousel")} and embla-carousel-autoplay ${v("embla-carousel-autoplay")}. Generated: do not edit. */` },
+  logLevel: "warning",
+});
+console.log("build-js: assets/js/carousel.js");