编辑文件

编辑文件：intro-centered-content-with-image-below.php

<?php
/**
 * Title: Centered Content with Image Below
 * Slug: woocommerce-blocks/centered-content-with-image-below
 * Categories: WooCommerce, Intro
 */

declare(strict_types=1);

$header  = __( 'Find your shade', 'woocommerce' );
$content = __( 'Explore our exclusive collection of sunglasses, crafted to elevate your look and safeguard your eyes. Find your perfect pair and see the world through a new lens.', 'woocommerce' );
$button  = __( 'Shop now', 'woocommerce' );
$image_0 = plugins_url( 'assets/images/pattern-placeholders/girls-in-the-hills.jpg', WC_PLUGIN_FILE );

<div class="wp-block-group alignfull" style="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))">
<div style="height:calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))" aria-hidden="true" class="wp-block-spacer"></div>

<div class="wp-block-group">
<h2 class="wp-block-heading alignwide has-text-align-center has-xx-large-font-size"><?php echo esc_html( $header ); ?></h2>

<p class="has-text-align-center"><?php echo esc_html( $content ); ?></p>

<div class="wp-block-buttons"><div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button"><?php echo esc_html( $button ); ?></a></div></div>
</div>

<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>

<figure class="wp-block-image alignwide size-full"><img src="<?php echo esc_url( $image_0 ); ?>" alt="" class="wp-image-13691" /></figure>

<div style="height:calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))" aria-hidden="true" class="wp-block-spacer"></div>
</div>