ViewFromTheBox · May 16, 2026 · May 16, 2026 · May 16, 2026 · May 16, 2026 · May 16, 2026
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/callout.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/callout.blade.php
@@ -1,4 +1,6 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
 	$validSeverities = [ 'info', 'success', 'warning', 'error' ];
 	$validIcons      = [ 'info', 'check', 'warning', 'error', 'lightbulb' ];
 
@@ -24,16 +26,12 @@
 		'lightbulb' => 'M9 21h6v-1H9Zm3-19a7 7 0 0 0-4 12.74V17h8v-2.26A7 7 0 0 0 12 2Zm1 12h-2v-2h2Z',
 	];
 
-	$classes = [
+	$baseClasses = [
 		'ap-callout',
 		'ap-callout--' . $severity,
 	];
-
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
-	}
 @endphp
-<div class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}" data-severity="{{ $severity }}">
+<div{!! BlockSupports::wrapperAttrs( $attributes, $baseClasses ) !!} data-severity="{{ $severity }}">
 	<span class="ap-callout__icon" aria-hidden="true">
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
 			<path d="{{ $iconPaths[ $icon ] }}"></path>

diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/audio.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/audio.blade.php
@@ -1,20 +1,12 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
 	$src      = (string) ( $attributes['src'] ?? '' );
 	$caption  = (string) ( $attributes['caption'] ?? '' );
 	$autoplay = ! empty( $attributes['autoplay'] );
 	$loop     = ! empty( $attributes['loop'] );
 	$preload  = isset( $attributes['preload'] ) ? (string) $attributes['preload'] : 'none';
 
-	$classes = [ 'wp-block-audio' ];
-
-	if ( ! empty( $attributes['align'] ) ) {
-		$classes[] = 'align' . $attributes['align'];
-	}
-
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
-	}
-
 	$audioAttrs = ' controls';
 	$audioAttrs .= sprintf( ' src="%s"', e( $src ) );
 	$audioAttrs .= sprintf( ' preload="%s"', e( $preload ) );
@@ -27,7 +19,7 @@
 		$audioAttrs .= ' loop';
 	}
 @endphp
-<figure class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}">
+<figure{!! BlockSupports::wrapperAttrs( $attributes, [ 'wp-block-audio' ] ) !!}>
 	@if ( '' !== $src )
 		<audio{!! $audioAttrs !!}></audio>
 	@endif

diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/block.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/block.blade.php
@@ -1,4 +1,6 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
 	$ref = isset( $attributes['ref'] ) ? $attributes['ref'] : null;
 	$trimmedRef = is_string( $ref ) ? trim( $ref ) : $ref;
 	$refString = is_int( $ref ) || ( is_string( $trimmedRef ) && '' !== $trimmedRef ) ? (string) $trimmedRef : '';
@@ -7,15 +9,11 @@
 		? $attributes['_resolutionError']
 		: null;
 
-	$classes = [ 'wp-block-block' ];
-
-	if ( ! empty( $attributes['className'] ) && is_string( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
-	}
-
 	$inDev = function_exists( 'app' ) ? ! app()->environment( 'production' ) : false;
+
+	$dataRefAttr = '' !== $refString ? sprintf( ' data-ve-pattern-ref="%s"', e( $refString ) ) : '';
 @endphp
-<div class="{{ implode( ' ', $classes ) }}"@if( '' !== $refString ) data-ve-pattern-ref="{{ $refString }}"@endif>
+<div{!! BlockSupports::wrapperAttrs( $attributes, [ 'wp-block-block' ] ) !!}{!! $dataRefAttr !!}>
 @if( null !== $resolutionError )
 @if( $inDev )
 <!-- visual-editor: synced pattern{{ '' !== $refString ? ' "' . $refString . '"' : '' }} failed to resolve ({{ $resolutionError }}) -->

diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/button.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/button.blade.php
@@ -1,4 +1,5 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
 	use ArtisanPackUI\VisualEditorRendererBlade\Support\UrlSanitizer;
 
 	$text   = (string) ( $attributes['text'] ?? '' );
@@ -19,32 +20,40 @@
 		$rel = implode( ' ', $relTokens );
 	}
 
-	$wrapperClasses = [ 'wp-block-button' ];
+	// `core/button` splits its attributes between the outer wrapper
+	// (block-level — align + className + style variations) and the
+	// inner link / span (visual — color, border, spacing, typography).
+	// This mirrors WP core's behavior: theme.json's
+	// `styles.elements.button` targets `.wp-element-button`, which is
+	// the inner element, so the visual block-supports have to land
+	// there to take effect.
+	$wrapperAttrs = [
+		'align'     => $attributes['align'] ?? null,
+		'className' => $attributes['className'] ?? null,
+		'anchor'    => $attributes['anchor'] ?? null,
+	];
 
-	if ( ! empty( $attributes['className'] ) ) {
-		$wrapperClasses[] = $attributes['className'];
-	}
-
-	$linkClasses = [ 'wp-block-button__link', 'wp-element-button' ];
+	$innerAttrs = $attributes;
+	unset( $innerAttrs['align'], $innerAttrs['className'], $innerAttrs['anchor'] );
 
-	$linkAttrs = '';
+	$linkAttrString = '';
 
 	if ( '' !== $target ) {
-		$linkAttrs .= sprintf( ' target="%s"', e( $target ) );
+		$linkAttrString .= sprintf( ' target="%s"', e( $target ) );
 	}
 
 	if ( '' !== $rel ) {
-		$linkAttrs .= sprintf( ' rel="%s"', e( $rel ) );
+		$linkAttrString .= sprintf( ' rel="%s"', e( $rel ) );
 	}
 
 	if ( '' !== $title ) {
-		$linkAttrs .= sprintf( ' title="%s"', e( $title ) );
+		$linkAttrString .= sprintf( ' title="%s"', e( $title ) );
 	}
 @endphp
-<div class="{{ implode( ' ', array_map( 'trim', $wrapperClasses ) ) }}">
+<div{!! BlockSupports::wrapperAttrs( $wrapperAttrs, [ 'wp-block-button' ] ) !!}>
 	@if ( '' !== $url )
-		<a class="{{ implode( ' ', $linkClasses ) }}" href="{{ $url }}"{!! $linkAttrs !!}>{!! $text !!}</a>
+		<a{!! BlockSupports::wrapperAttrs( $innerAttrs, [ 'wp-block-button__link', 'wp-element-button' ] ) !!} href="{{ $url }}"{!! $linkAttrString !!}>{!! $text !!}</a>
 	@else
-		<span class="{{ implode( ' ', $linkClasses ) }}">{!! $text !!}</span>
+		<span{!! BlockSupports::wrapperAttrs( $innerAttrs, [ 'wp-block-button__link', 'wp-element-button' ] ) !!}>{!! $text !!}</span>
 	@endif
 </div>
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/buttons.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/buttons.blade.php
@@ -1,16 +1,14 @@
 @php
-	$classes = [ 'wp-block-buttons', 'is-layout-flex' ];
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
 
-	$justify = $attributes['layout']['justifyContent'] ?? '';
+	$justify = (string) ( $attributes['layout']['justifyContent'] ?? '' );
 
-	$classes[] = '' !== $justify
-		? 'is-content-justification-' . $justify
-		: 'is-content-justification-left';
-
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
-	}
+	$baseClasses = [
+		'wp-block-buttons',
+		'is-layout-flex',
+		'' !== $justify ? 'is-content-justification-' . $justify : 'is-content-justification-left',
+	];
 @endphp
-<div class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}">
+<div{!! BlockSupports::wrapperAttrs( $attributes, $baseClasses ) !!}>
 	{!! $innerBlocksHtml !!}
 </div>
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/code.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/code.blade.php
@@ -1,4 +1,6 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
 	$content = (string) ( $attributes['content'] ?? '' );
 @endphp
-<pre class="wp-block-code"><code>{!! $content !!}</code></pre>
+<pre{!! BlockSupports::wrapperAttrs( $attributes, [ 'wp-block-code' ] ) !!}><code>{!! $content !!}</code></pre>
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/column.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/column.blade.php
@@ -1,15 +1,20 @@
 @php
-	$classes = [ 'wp-block-column' ];
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
 
-	if ( ! empty( $attributes['verticalAlignment'] ) ) {
-		$classes[] = 'is-vertically-aligned-' . $attributes['verticalAlignment'];
-	}
+	$baseClasses = [ 'wp-block-column' ];
 
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
+	if ( ! empty( $attributes['verticalAlignment'] ) ) {
+		$baseClasses[] = 'is-vertically-aligned-' . $attributes['verticalAlignment'];
 	}
 
-	$styleAttr = '';
+	// `flex-basis` from the column's `width` attribute has to merge
+	// with any block-supports inline style — compile() lets us splice
+	// it in alongside the support declarations rather than emitting
+	// two `style="…"` attributes (the second one would override the
+	// first in some user agents).
+	$compiled = BlockSupports::compile( $attributes );
+	$classes  = array_values( array_unique( array_merge( $baseClasses, $compiled['classes'] ) ) );
+	$styles   = '' !== $compiled['style'] ? rtrim( $compiled['style'], ';' ) : '';
 
 	if ( ! empty( $attributes['width'] ) ) {
 		$width = $attributes['width'];
@@ -21,9 +26,12 @@
 			$basis = (string) $width;
 		}
 
-		$styleAttr = sprintf( ' style="flex-basis: %s;"', e( $basis ) );
+		$styles = ( '' !== $styles ? $styles . '; ' : '' ) . 'flex-basis: ' . $basis;
 	}
+
+	$styleAttr = '' !== $styles ? sprintf( ' style="%s"', e( $styles . ';' ) ) : '';
+	$idAttr    = null !== $compiled['id'] ? sprintf( ' id="%s"', e( $compiled['id'] ) ) : '';
 @endphp
-<div class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}"{!! $styleAttr !!}>
+<div class="{{ implode( ' ', $classes ) }}"{!! $styleAttr !!}{!! $idAttr !!}>
 	{!! $innerBlocksHtml !!}
 </div>
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/columns.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/columns.blade.php
@@ -1,18 +1,16 @@
 @php
-	$classes = [ 'wp-block-columns' ];
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
+	$baseClasses = [ 'wp-block-columns' ];
 
 	if ( ! empty( $attributes['isStackedOnMobile'] ) || ! isset( $attributes['isStackedOnMobile'] ) ) {
-		$classes[] = 'is-stacked-on-mobile';
+		$baseClasses[] = 'is-stacked-on-mobile';
 	}
 
 	if ( ! empty( $attributes['verticalAlignment'] ) ) {
-		$classes[] = 'are-vertically-aligned-' . $attributes['verticalAlignment'];
-	}
-
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
+		$baseClasses[] = 'are-vertically-aligned-' . $attributes['verticalAlignment'];
 	}
 @endphp
-<div class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}">
+<div{!! BlockSupports::wrapperAttrs( $attributes, $baseClasses ) !!}>
 	{!! $innerBlocksHtml !!}
 </div>
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/cover.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/cover.blade.php
@@ -1,4 +1,6 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
 	$url    = (string) ( $attributes['url'] ?? '' );
 	$isDark = ! isset( $attributes['isDark'] ) || ! empty( $attributes['isDark'] );
 
@@ -17,25 +19,22 @@
 		}
 	}
 
-	$classes = [ 'wp-block-cover' ];
-
-	$classes[] = $isDark ? 'is-dark' : 'is-light';
+	$baseClasses = [ 'wp-block-cover', $isDark ? 'is-dark' : 'is-light' ];
 
-	if ( ! empty( $attributes['align'] ) ) {
-		$classes[] = 'align' . $attributes['align'];
-	}
-
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
-	}
-
-	$styleAttr = '';
+	// Merge cover's own `min-height` declaration with whatever
+	// block-supports style emerges from compile().
+	$compiled = BlockSupports::compile( $attributes );
+	$classes  = array_values( array_unique( array_merge( $baseClasses, $compiled['classes'] ) ) );
+	$style    = '' !== $compiled['style'] ? rtrim( $compiled['style'], ';' ) : '';
 
 	if ( null !== $minHeight ) {
-		$styleAttr = sprintf( ' style="min-height: %s%s;"', e( (string) $minHeight ), e( $minHeightUnit ) );
+		$style = ( '' !== $style ? $style . '; ' : '' ) . sprintf( 'min-height: %s%s', (string) $minHeight, $minHeightUnit );
 	}
+
+	$styleAttr = '' !== $style ? sprintf( ' style="%s"', e( $style . ';' ) ) : '';
+	$idAttr    = null !== $compiled['id'] ? sprintf( ' id="%s"', e( $compiled['id'] ) ) : '';
 @endphp
-<div class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}"{!! $styleAttr !!}>
+<div class="{{ implode( ' ', $classes ) }}"{!! $styleAttr !!}{!! $idAttr !!}>
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="opacity: {{ $dimRatio / 100 }};"></span>
 	@if ( '' !== $url )
 		<img class="wp-block-cover__image-background" alt="" src="{{ $url }}"/>

diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/details.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/details.blade.php
@@ -1,16 +1,12 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
 	$summary     = (string) ( $attributes['summary'] ?? '' );
 	$showContent = ! empty( $attributes['showContent'] );
 
-	$classes = [ 'wp-block-details' ];
-
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
-	}
-
 	$openAttr = $showContent ? ' open' : '';
 @endphp
-<details class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}"{!! $openAttr !!}>
+<details{!! BlockSupports::wrapperAttrs( $attributes, [ 'wp-block-details' ] ) !!}{!! $openAttr !!}>
 	<summary>{!! $summary !!}</summary>
 	{!! $innerBlocksHtml !!}
 </details>
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/embed.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/embed.blade.php
@@ -1,26 +1,28 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
 	$url      = (string) ( $attributes['url'] ?? '' );
 	$provider = (string) ( $attributes['providerNameSlug'] ?? '' );
 	$caption  = (string) ( $attributes['caption'] ?? '' );
 	$ratio    = (string) ( $attributes['aspectRatio'] ?? '' );
 
-	$classes = [ 'wp-block-embed' ];
+	$baseClasses = [ 'wp-block-embed' ];
 
 	if ( '' !== $provider ) {
-		$classes[] = 'is-provider-' . preg_replace( '/[^a-z0-9\-]/i', '-', $provider );
-		$classes[] = 'wp-block-embed-' . preg_replace( '/[^a-z0-9\-]/i', '-', $provider );
+		$baseClasses[] = 'is-provider-' . preg_replace( '/[^a-z0-9\-]/i', '-', $provider );
+		$baseClasses[] = 'wp-block-embed-' . preg_replace( '/[^a-z0-9\-]/i', '-', $provider );
 	}
 
 	if ( ! empty( $attributes['type'] ) ) {
-		$classes[] = 'is-type-' . $attributes['type'];
+		$baseClasses[] = 'is-type-' . $attributes['type'];
 	}
 
 	if ( '' !== $ratio ) {
-		$classes[] = 'wp-embed-aspect-' . str_replace( '/', '-', $ratio );
-		$classes[] = 'wp-has-aspect-ratio';
+		$baseClasses[] = 'wp-embed-aspect-' . str_replace( '/', '-', $ratio );
+		$baseClasses[] = 'wp-has-aspect-ratio';
 	}
 @endphp
-<figure class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}">
+<figure{!! BlockSupports::wrapperAttrs( $attributes, $baseClasses ) !!}>
 	<div class="wp-block-embed__wrapper">
 		@if ( '' !== $url )
 			{{ $url }}

diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/file.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/file.blade.php
@@ -1,4 +1,5 @@
 @php
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
 	use ArtisanPackUI\VisualEditorRendererBlade\Support\UrlSanitizer;
 
 	$href         = UrlSanitizer::safe( (string) ( $attributes['href'] ?? '' ) );
@@ -7,14 +8,8 @@
 	$download     = (string) ( $attributes['downloadButtonText'] ?? 'Download' );
 	$showDownload = ! isset( $attributes['showDownloadButton'] ) || ! empty( $attributes['showDownloadButton'] );
 	$linkLabel    = '' !== $fileName ? $fileName : $href;
-
-	$classes = [ 'wp-block-file' ];
-
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
-	}
 @endphp
-<div class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}">
+<div{!! BlockSupports::wrapperAttrs( $attributes, [ 'wp-block-file' ] ) !!}>
 	@if ( '' !== $href )
 		<a href="{{ '' !== $textLinkHref ? $textLinkHref : $href }}">{{ $linkLabel }}</a>
 		@if ( $showDownload )

diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/core/gallery.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/core/gallery.blade.php
@@ -1,21 +1,19 @@
 @php
-	$classes = [ 'wp-block-gallery', 'has-nested-images' ];
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
+	$baseClasses = [ 'wp-block-gallery', 'has-nested-images' ];
 
 	if ( ! empty( $attributes['columns'] ) ) {
-		$classes[] = 'columns-' . (int) $attributes['columns'];
+		$baseClasses[] = 'columns-' . (int) $attributes['columns'];
 	}
 
 	if ( ! empty( $attributes['imageCrop'] ) ) {
-		$classes[] = 'is-cropped';
-	}
-
-	if ( ! empty( $attributes['className'] ) ) {
-		$classes[] = $attributes['className'];
+		$baseClasses[] = 'is-cropped';
 	}
 
 	$caption = (string) ( $attributes['caption'] ?? '' );
 @endphp
-<figure class="{{ implode( ' ', array_map( 'trim', $classes ) ) }}">
+<figure{!! BlockSupports::wrapperAttrs( $attributes, $baseClasses ) !!}>
 	{!! $innerBlocksHtml !!}
 	@if ( '' !== trim( $caption ) )
 		<figcaption class="blocks-gallery-caption">{!! $caption !!}</figcaption>