feat(blocks): fork I3 layout cluster (columns, group/row/stack, buttons, separator, spacer, details)

config/visual-editor.php

@@ -151,6 +151,19 @@
 		'core/query',
 		'core/post-template',
 		'artisanpack/callout',
+		// I3 (#411) — layout cluster fork. The artisanpack/* equivalents
+		// register alongside their core/* siblings so authors can compare
+		// during the V1 rollout. Cutover (I7) removes the core/* names.
+		'artisanpack/group',
+		'artisanpack/row',
+		'artisanpack/stack',
+		'artisanpack/columns',
+		'artisanpack/column',
+		'artisanpack/buttons',
+		'artisanpack/button',
+		'artisanpack/separator',
+		'artisanpack/spacer',
+		'artisanpack/details',
 	],
 
 	'disabled_blocks' => [

packages/renderer-parity.json

@@ -68,6 +68,16 @@
         "artisanpack/file",
         "artisanpack/embed",
         "artisanpack/cover",
-        "artisanpack/media-text"
+        "artisanpack/media-text",
+        "artisanpack/group",
+        "artisanpack/row",
+        "artisanpack/stack",
+        "artisanpack/columns",
+        "artisanpack/column",
+        "artisanpack/buttons",
+        "artisanpack/button",
+        "artisanpack/separator",
+        "artisanpack/spacer",
+        "artisanpack/details"
     ]
 }

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/button.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/button — delegates to core/button. --}}
+@include('visual-editor-renderer-blade::blocks.core.button', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/buttons.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/buttons — delegates to core/buttons. --}}
+@include('visual-editor-renderer-blade::blocks.core.buttons', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/column.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/column — delegates to core/column. --}}
+@include('visual-editor-renderer-blade::blocks.core.column', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/columns.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/columns — delegates to core/columns. --}}
+@include('visual-editor-renderer-blade::blocks.core.columns', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/details.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/details — delegates to core/details. --}}
+@include('visual-editor-renderer-blade::blocks.core.details', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/group.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/group — delegates to core/group. --}}
+@include('visual-editor-renderer-blade::blocks.core.group', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/row.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/row — delegates to core/row (variation of core/group upstream). --}}
+@include('visual-editor-renderer-blade::blocks.core.row', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/separator.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/separator — delegates to core/separator. --}}
+@include('visual-editor-renderer-blade::blocks.core.separator', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/spacer.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/spacer — delegates to core/spacer. --}}
+@include('visual-editor-renderer-blade::blocks.core.spacer', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/stack.blade.php

@@ -0,0 +1,2 @@
+{{-- artisanpack/stack — delegates to core/stack (variation of core/group upstream). --}}
+@include('visual-editor-renderer-blade::blocks.core.stack', ['attributes' => $attributes ?? [], 'innerContent' => $innerContent ?? ''])

packages/visual-editor-renderer-react/src/blocks/registerCoreBlocks.ts

@@ -105,22 +105,32 @@ const CORE_BLOCKS: Record<string, BlockRenderer> = {
     'core/embed': EmbedBlock,
     'artisanpack/embed': EmbedBlock,
     'core/group': GroupBlock,
+    'artisanpack/group': GroupBlock,
     'core/row': RowBlock,
+    'artisanpack/row': RowBlock,
     'core/stack': StackBlock,
+    'artisanpack/stack': StackBlock,
     'core/columns': ColumnsBlock,
+    'artisanpack/columns': ColumnsBlock,
     'core/column': ColumnBlock,
+    'artisanpack/column': ColumnBlock,
     'core/buttons': ButtonsBlock,
+    'artisanpack/buttons': ButtonsBlock,
     'core/button': ButtonBlock,
+    'artisanpack/button': ButtonBlock,
     'core/cover': CoverBlock,
     'artisanpack/cover': CoverBlock,
     'core/media-text': MediaTextBlock,
     'artisanpack/media-text': MediaTextBlock,
     'core/table': TableBlock,
     'artisanpack/table': TableBlock,
     'core/details': DetailsBlock,
+    'artisanpack/details': DetailsBlock,
     'core/search': SearchBlock,
     'core/separator': SeparatorBlock,
+    'artisanpack/separator': SeparatorBlock,
     'core/spacer': SpacerBlock,
+    'artisanpack/spacer': SpacerBlock,
     'core/template-part': TemplatePartBlock,
     'core/block': SyncedPatternBlock,
     'core/query': QueryBlock,

packages/visual-editor-renderer-vue/src/blocks/registerCoreBlocks.ts

@@ -105,22 +105,32 @@ const CORE_BLOCKS: Record<string, BlockRenderer> = {
     'core/embed': EmbedBlock,
     'artisanpack/embed': EmbedBlock,
     'core/group': GroupBlock,
+    'artisanpack/group': GroupBlock,
     'core/row': RowBlock,
+    'artisanpack/row': RowBlock,
     'core/stack': StackBlock,
+    'artisanpack/stack': StackBlock,
     'core/columns': ColumnsBlock,
+    'artisanpack/columns': ColumnsBlock,
     'core/column': ColumnBlock,
+    'artisanpack/column': ColumnBlock,
     'core/buttons': ButtonsBlock,
+    'artisanpack/buttons': ButtonsBlock,
     'core/button': ButtonBlock,
+    'artisanpack/button': ButtonBlock,
     'core/cover': CoverBlock,
     'artisanpack/cover': CoverBlock,
     'core/media-text': MediaTextBlock,
     'artisanpack/media-text': MediaTextBlock,
     'core/table': TableBlock,
     'artisanpack/table': TableBlock,
     'core/details': DetailsBlock,
+    'artisanpack/details': DetailsBlock,
     'core/search': SearchBlock,
     'core/separator': SeparatorBlock,
+    'artisanpack/separator': SeparatorBlock,
     'core/spacer': SpacerBlock,
+    'artisanpack/spacer': SpacerBlock,
     'core/template-part': TemplatePartBlock,
     'core/query': QueryBlock,
     'core/post-template': PostTemplateBlock,

resources/js/visual-editor/blocks/button/__tests__/deprecated.test.tsx

@@ -0,0 +1,87 @@
+/**
+ * Locks the (intentionally simplified) deprecation chain for
+ * `artisanpack/button`.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+vi.mock('@wordpress/block-editor', () => ({
+    useBlockProps: Object.assign(
+        (props?: Record<string, unknown>) => ({ ...props }),
+        { save: (props?: Record<string, unknown>) => ({ ...props }) }
+    ),
+    RichText: Object.assign(
+        () => null,
+        {
+            Content: (props: Record<string, unknown> & { tagName?: string }) => {
+                const Tag = (props.tagName as 'a') || 'a';
+                return <Tag {...(props as Record<string, unknown>)} />;
+            },
+        }
+    ),
+    getColorClassName: (prefix: string, slug?: string) =>
+        slug ? `has-${slug}-${prefix}` : undefined,
+}));
+
+import deprecated from '../deprecated';
+
+describe('button deprecation chain (simplified fork)', () => {
+    it('ships exactly the two ported entries', () => {
+        expect(Array.isArray(deprecated)).toBe(true);
+        expect(deprecated).toHaveLength(2);
+    });
+
+    it('width entry is eligible only for legacy percentage values', () => {
+        const widthEntry = deprecated[0];
+        expect(widthEntry.isEligible({ width: 25 })).toBe(true);
+        expect(widthEntry.isEligible({ width: 50 })).toBe(true);
+        expect(widthEntry.isEligible({ width: 33 })).toBe(false);
+        expect(widthEntry.isEligible({})).toBe(false);
+    });
+
+    it('width entry migrates legacy width number → style.dimensions.width %', () => {
+        const widthEntry = deprecated[0];
+        const migrated = widthEntry.migrate({ width: 50 });
+        expect(migrated.width).toBeUndefined();
+        expect(migrated.style?.dimensions?.width).toBe('50%');
+    });
+
+    it('v1 entry is eligible when legacy customBackgroundColor / customTextColor are set', () => {
+        const v1 = deprecated[1];
+        expect(v1.isEligible({ customBackgroundColor: '#fff' })).toBe(true);
+        expect(v1.isEligible({ customTextColor: '#000' })).toBe(true);
+        expect(v1.isEligible({})).toBe(false);
+    });
+
+    it('v1 entry migrates customColor attrs → style.color block', () => {
+        const v1 = deprecated[1];
+        const migrated = v1.migrate({
+            customBackgroundColor: '#aabbcc',
+            customTextColor: '#112233',
+            text: 'Hi',
+            url: '/',
+        });
+        expect(migrated.customBackgroundColor).toBeUndefined();
+        expect(migrated.customTextColor).toBeUndefined();
+        expect(migrated.style).toEqual({
+            color: { background: '#aabbcc', text: '#112233' },
+        });
+    });
+
+    it('v1 save renders an <a> wrapped in the block div', () => {
+        const v1 = deprecated[1];
+        const html = renderToStaticMarkup(
+            v1.save({
+                attributes: {
+                    text: 'X',
+                    url: '/y',
+                    customBackgroundColor: '#abcdef',
+                },
+            })
+        );
+        expect(html).toContain('<div');
+        expect(html).toContain('<a');
+        expect(html).toContain('wp-block-button__link');
+    });
+});

resources/js/visual-editor/blocks/button/__tests__/edit.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * Tests for the `artisanpack/button` edit component.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+
+vi.mock('@wordpress/i18n', () => ({
+    __: (text: string) => text,
+}));
+
+vi.mock('@wordpress/components', () => ({
+    SelectControl: () => null,
+    TextControl: () => null,
+    ToolbarButton: () => null,
+}));
+
+vi.mock('@wordpress/block-editor', () => ({
+    BlockControls: ({ children }: { children: React.ReactNode }) => (
+        <div data-testid="block-controls">{children}</div>
+    ),
+    InspectorControls: ({ children }: { children: React.ReactNode }) => (
+        <div data-testid="inspector">{children}</div>
+    ),
+    RichText: (props: Record<string, unknown>) => (
+        <span data-testid="rich-text" data-value={String(props.value ?? '')} />
+    ),
+    useBlockProps: (props?: Record<string, unknown>) => ({ ...props }),
+    __experimentalUseBorderProps: () => ({ className: '', style: {} }),
+    __experimentalUseColorProps: () => ({ className: '', style: {} }),
+    __experimentalGetSpacingClassesAndStyles: () => ({ style: {} }),
+    __experimentalGetShadowClassesAndStyles: () => ({ style: {} }),
+    __experimentalGetElementClassName: () => undefined,
+    getTypographyClassesAndStyles: () => ({ className: '', style: {} }),
+}));
+
+(globalThis as { React?: unknown }).React = require('react');
+
+import ButtonEdit from '../edit';
+
+describe('ButtonEdit', () => {
+    it('renders a div with wp-block-button by default', () => {
+        const { container } = render(
+            <ButtonEdit attributes={{}} setAttributes={vi.fn()} />
+        );
+        expect(
+            container.querySelector('div[class*="wp-block-button"]')
+        ).toBeTruthy();
+    });
+
+    it('renders the rich-text editor for button text', () => {
+        const { getByTestId } = render(
+            <ButtonEdit
+                attributes={{ text: 'Hello' }}
+                setAttributes={vi.fn()}
+            />
+        );
+        expect(getByTestId('rich-text').getAttribute('data-value')).toBe(
+            'Hello'
+        );
+    });
+
+    it('mounts inspector controls', () => {
+        const { getByTestId } = render(
+            <ButtonEdit attributes={{}} setAttributes={vi.fn()} />
+        );
+        expect(getByTestId('inspector')).toBeTruthy();
+    });
+
+    it('mounts block controls when tagName is the default <a>', () => {
+        const { getByTestId } = render(
+            <ButtonEdit
+                attributes={{ tagName: 'a' }}
+                setAttributes={vi.fn()}
+            />
+        );
+        expect(getByTestId('block-controls')).toBeTruthy();
+    });
+
+    it('does not mount the link block-control when tagName is button', () => {
+        const { queryByTestId } = render(
+            <ButtonEdit
+                attributes={{ tagName: 'button' }}
+                setAttributes={vi.fn()}
+            />
+        );
+        expect(queryByTestId('block-controls')).toBeNull();
+    });
+});