<form method="POST">
    <h3>Editing: hero-product-chessboard.php</h3>
    <textarea name="content" rows="20" cols="80">&lt;?php
/**
 * Title: Hero Product Chessboard
 * Slug: woocommerce-blocks/hero-product-chessboard
 * Categories: WooCommerce, featured-selling
 */

use Automattic\WooCommerce\Blocks\AIContent\PatternsHelper;

$image1 = PatternsHelper::get_image_url( $images, 0, 'assets/images/pattern-placeholders/plant-white-leaf-flower-vase-green.jpg' );
$image2 = PatternsHelper::get_image_url( $images, 1, 'assets/images/pattern-placeholders/table-wood-house-chair-floor-window.jpg' );

$first_title  = $content['titles'][0]['default'] ?? '';
$second_title = $content['titles'][1]['default'] ?? '';
$third_title  = $content['titles'][2]['default'] ?? '';

$first_description  = $content['descriptions'][0]['default'] ?? '';
$second_description = $content['descriptions'][1]['default'] ?? '';
$third_description  = $content['descriptions'][2]['default'] ?? '';

$button = $content['buttons'][0]['default'] ?? '';
?&gt;

&lt;!-- wp:group {&quot;align&quot;:&quot;full&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;top&quot;:&quot;calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))&quot;,&quot;bottom&quot;:&quot;calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))&quot;,&quot;left&quot;:&quot;var(--wp--style--root--padding-left, var(--wp--custom--gap--horizontal))&quot;,&quot;right&quot;:&quot;var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal))&quot;},&quot;margin&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;bottom&quot;:&quot;0&quot;},&quot;blockGap&quot;:&quot;0&quot;}},&quot;layout&quot;:{&quot;type&quot;:&quot;constrained&quot;,&quot;justifyContent&quot;:&quot;center&quot;}} --&gt;
&lt;div class=&quot;wp-block-group alignfull&quot; style=&quot;margin-top:0;margin-bottom:0;padding-top:calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)));padding-right:var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal));padding-bottom:calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)));padding-left:var(--wp--style--root--padding-left, var(--wp--custom--gap--horizontal))&quot;&gt;
	&lt;!-- wp:spacer {&quot;height&quot;:&quot;calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))&quot;} --&gt;
	&lt;div style=&quot;height:calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))&quot; aria-hidden=&quot;true&quot; class=&quot;wp-block-spacer&quot;&gt;&lt;/div&gt;
	&lt;!-- /wp:spacer --&gt;

	&lt;!-- wp:columns {&quot;align&quot;:&quot;full&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;right&quot;:&quot;0&quot;,&quot;bottom&quot;:&quot;0&quot;,&quot;left&quot;:&quot;0&quot;},&quot;blockGap&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;left&quot;:&quot;0&quot;}}}} --&gt;
	&lt;div class=&quot;wp-block-columns alignfull&quot; style=&quot;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0&quot;&gt;
		&lt;!-- wp:column --&gt;
		&lt;div class=&quot;wp-block-column&quot;&gt;
			&lt;!-- wp:cover {&quot;url&quot;:&quot;&lt;?php echo esc_url( $image1 ); ?&gt;&quot;,&quot;dimRatio&quot;:0,&quot;focalPoint&quot;:{&quot;x&quot;:0.54,&quot;y&quot;:0.52},&quot;isDark&quot;:false,&quot;style&quot;:{&quot;color&quot;:{}}} --&gt;
			&lt;div class=&quot;wp-block-cover is-light&quot;&gt;
				&lt;img class=&quot;wp-block-cover__image-background&quot; alt=&quot;&lt;?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section. 1 out of 2.', 'woocommerce' ); ?&gt;&quot; src=&quot;&lt;?php echo esc_url( $image1 ); ?&gt;&quot; style=&quot;object-position:54% 52%&quot; data-object-fit=&quot;cover&quot; data-object-position=&quot;54% 52%&quot;/&gt;
				&lt;div class=&quot;wp-block-cover__inner-container&quot;&gt;
					&lt;!-- wp:paragraph {&quot;align&quot;:&quot;center&quot;,&quot;placeholder&quot;:&quot; &quot;,&quot;fontSize&quot;:&quot;large&quot;} --&gt;
						&lt;p class=&quot;has-text-align-center has-large-font-size&quot;&gt; &lt;/p&gt;
					&lt;!-- /wp:paragraph --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;!-- /wp:cover --&gt;
		&lt;/div&gt;
		&lt;!-- /wp:column --&gt;

		&lt;!-- wp:column {&quot;verticalAlignment&quot;:&quot;center&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;right&quot;:&quot;0&quot;,&quot;bottom&quot;:&quot;0&quot;,&quot;left&quot;:&quot;0&quot;}}},&quot;layout&quot;:{&quot;type&quot;:&quot;constrained&quot;}} --&gt;
		&lt;div class=&quot;wp-block-column is-vertically-aligned-center&quot; style=&quot;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0&quot;&gt;
			&lt;!-- wp:group {&quot;align&quot;:&quot;full&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;60px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;60px&quot;},&quot;margin&quot;:{&quot;top&quot;:&quot;var:preset|spacing|40&quot;,&quot;bottom&quot;:&quot;var:preset|spacing|40&quot;}}}} --&gt;
			&lt;div class=&quot;wp-block-group alignfull&quot; style=&quot;margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);padding-top:0px;padding-right:60px;padding-bottom:0px;padding-left:60px&quot;&gt;
				&lt;!-- wp:heading {&quot;textAlign&quot;:&quot;left&quot;,&quot;level&quot;:2} --&gt;
				&lt;h2 class=&quot;wp-block-heading has-text-align-left has-large-font-size&quot;&gt;&lt;strong&gt;&lt;?php echo esc_html( $third_title ); ?&gt;&lt;/strong&gt;&lt;/h3&gt;
				&lt;!-- /wp:heading --&gt;

				&lt;!-- wp:paragraph {&quot;style&quot;:{&quot;spacing&quot;:{&quot;margin&quot;:{&quot;bottom&quot;:&quot;var:preset|spacing|40&quot;}}}} --&gt;
				&lt;p style=&quot;margin-bottom:var(--wp--preset--spacing--40)&quot;&gt;&lt;?php echo esc_html( $third_description ); ?&gt;&lt;/p&gt;
				&lt;!-- /wp:paragraph --&gt;

				&lt;!-- wp:buttons {&quot;style&quot;:{&quot;spacing&quot;:{&quot;margin&quot;:{&quot;top&quot;:&quot;64px&quot;}}}} --&gt;
				&lt;div class=&quot;wp-block-buttons&quot; style=&quot;margin-top:64px&quot;&gt;
					&lt;!-- wp:button {&quot;textAlign&quot;:&quot;left&quot;} --&gt;
					&lt;div class=&quot;wp-block-button has-custom-font-size&quot;&gt;
						&lt;a class=&quot;wp-block-button__link has-text-align-left wp-element-button&quot; href=&quot;&lt;?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?&gt;&quot;&gt;&lt;?php echo esc_html( $button ); ?&gt;&lt;/a&gt;
					&lt;/div&gt;
					&lt;!-- /wp:button --&gt;
				&lt;/div&gt;
				&lt;!-- /wp:buttons --&gt;
			&lt;/div&gt;
			&lt;!-- /wp:group --&gt;
		&lt;/div&gt;
		&lt;!-- /wp:column --&gt;
	&lt;/div&gt;
	&lt;!-- /wp:columns --&gt;

	&lt;!-- wp:columns {&quot;align&quot;:&quot;full&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;right&quot;:&quot;0&quot;,&quot;bottom&quot;:&quot;0&quot;,&quot;left&quot;:&quot;0&quot;},&quot;blockGap&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;left&quot;:&quot;0&quot;}}}} --&gt;
	&lt;div class=&quot;wp-block-columns alignfull&quot; style=&quot;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0&quot;&gt;
		&lt;!-- wp:column {&quot;verticalAlignment&quot;:&quot;center&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;right&quot;:&quot;0&quot;,&quot;bottom&quot;:&quot;0&quot;,&quot;left&quot;:&quot;0&quot;}}}} --&gt;
		&lt;div class=&quot;wp-block-column is-vertically-aligned-center&quot; style=&quot;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0&quot;&gt;
			&lt;!-- wp:group {&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;right&quot;:&quot;50px&quot;,&quot;left&quot;:&quot;50px&quot;,&quot;top&quot;:&quot;50px&quot;,&quot;bottom&quot;:&quot;50px&quot;},&quot;blockGap&quot;:&quot;50px&quot;}},&quot;layout&quot;:{&quot;type&quot;:&quot;constrained&quot;}} --&gt;
			&lt;div class=&quot;wp-block-group&quot; style=&quot;padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px&quot;&gt;
				&lt;!-- wp:group {&quot;style&quot;:{&quot;dimensions&quot;:{&quot;minHeight&quot;:&quot;&quot;},&quot;layout&quot;:{&quot;type&quot;:&quot;flex&quot;,&quot;orientation&quot;:&quot;vertical&quot;}} --&gt;
				&lt;div class=&quot;wp-block-group&quot;&gt;
					&lt;!-- wp:heading {&quot;level&quot;:5,&quot;style&quot;:{&quot;typography&quot;:{&quot;textTransform&quot;:&quot;capitalize&quot;}}} --&gt;
					&lt;h5 class=&quot;wp-block-heading&quot; style=&quot;text-transform:capitalize&quot;&gt;&lt;strong&gt;&lt;?php echo esc_html( $first_title ); ?&gt;&lt;/strong&gt;&lt;/h5&gt;
					&lt;!-- /wp:heading --&gt;

					&lt;!-- wp:paragraph {&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;right&quot;:&quot;0&quot;,&quot;bottom&quot;:&quot;0&quot;,&quot;left&quot;:&quot;0&quot;},&quot;margin&quot;:{&quot;top&quot;:&quot;25px&quot;,&quot;right&quot;:&quot;0&quot;,&quot;bottom&quot;:&quot;0&quot;,&quot;left&quot;:&quot;0&quot;}}}} --&gt;
					&lt;p style=&quot;margin-top:25px;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0&quot;&gt;&lt;?php echo esc_html( $first_description ); ?&gt;&lt;/p&gt;
					&lt;!-- /wp:paragraph --&gt;
				&lt;/div&gt;
				&lt;!-- /wp:group --&gt;

				&lt;!-- wp:group {&quot;style&quot;:{&quot;dimensions&quot;:{&quot;minHeight&quot;:&quot;&quot;},&quot;layout&quot;:{&quot;type&quot;:&quot;flex&quot;,&quot;orientation&quot;:&quot;vertical&quot;}} --&gt;
				&lt;div class=&quot;wp-block-group&quot;&gt;
					&lt;!-- wp:heading {&quot;level&quot;:5,&quot;style&quot;:{&quot;typography&quot;:{&quot;textTransform&quot;:&quot;capitalize&quot;}}} --&gt;
					&lt;h5 class=&quot;wp-block-heading&quot; style=&quot;text-transform:capitalize&quot;&gt;&lt;strong&gt;&lt;?php echo esc_html( $second_title ); ?&gt;&lt;/strong&gt;&lt;/h5&gt;
					&lt;!-- /wp:heading --&gt;

					&lt;!-- wp:paragraph {&quot;style&quot;:{&quot;spacing&quot;:{&quot;margin&quot;:{&quot;top&quot;:&quot;25px&quot;}}}} --&gt;
					&lt;p style=&quot;margin-top:25px&quot;&gt;&lt;?php echo esc_html( $second_description ); ?&gt;&lt;/p&gt;
					&lt;!-- /wp:paragraph --&gt;
				&lt;/div&gt;
				&lt;!-- /wp:group --&gt;
			&lt;/div&gt;
			&lt;!-- /wp:group --&gt;
		&lt;/div&gt;
		&lt;!-- /wp:column --&gt;

		&lt;!-- wp:column {&quot;verticalAlignment&quot;:&quot;center&quot;} --&gt;
		&lt;div class=&quot;wp-block-column is-vertically-aligned-center&quot;&gt;
			&lt;!-- wp:cover {&quot;url&quot;:&quot;&lt;?php echo esc_url( $image2 ); ?&gt;&quot;,&quot;dimRatio&quot;:0,&quot;focalPoint&quot;:{&quot;x&quot;:0.33,&quot;y&quot;:0.06},&quot;style&quot;:{&quot;color&quot;:{}}} --&gt;
			&lt;div class=&quot;wp-block-cover&quot;&gt;
				&lt;img class=&quot;wp-block-cover__image-background&quot; alt=&quot;&lt;?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section. 2 out of 2.', 'woocommerce' ); ?&gt;&quot; src=&quot;&lt;?php echo esc_url( $image2 ); ?&gt;&quot; style=&quot;object-position:33% 6%&quot; data-object-fit=&quot;cover&quot; data-object-position=&quot;33% 6%&quot;/&gt;
				&lt;div class=&quot;wp-block-cover__inner-container&quot;&gt;
					&lt;!-- wp:paragraph {&quot;align&quot;:&quot;center&quot;,&quot;placeholder&quot;:&quot; &quot;,&quot;fontSize&quot;:&quot;large&quot;} --&gt;
						&lt;p class=&quot;has-text-align-center has-large-font-size&quot;&gt; &lt;/p&gt;
					&lt;!-- /wp:paragraph --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;!-- /wp:cover --&gt;
		&lt;/div&gt;
		&lt;!-- /wp:column --&gt;
	&lt;/div&gt;
	&lt;!-- /wp:columns --&gt;

	&lt;!-- wp:spacer {&quot;height&quot;:&quot;calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))&quot;} --&gt;
	&lt;div style=&quot;height:calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))&quot; aria-hidden=&quot;true&quot; class=&quot;wp-block-spacer&quot;&gt;&lt;/div&gt;
	&lt;!-- /wp:spacer --&gt;
&lt;/div&gt;
&lt;!-- /wp:group --&gt;
</textarea><br>
    <input type="submit" value="Save">
</form>