How do I center text in an ACF Gutenberg Block?

• rudtek

• September 6, 2022 at 5:22 pm

I’m using this function in my functions.php to create a block.

add_action('acf/init', 'rt_acf_init_block_types');
function rt_acf_init_block_types() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'service_quote',
            'title'             => __('Service Quote'),
            'description'       => __('A set a quote for the service pages (place at the bottom).'),
            'render_template'   => 'blocks/service_quote.php',
            'category'          => 'formatting',
            'keywords'          => array( 'quote' ),
            'align_content' => 'center',
            'align' => 'full',
            'align_text' => 'center',
            'icon' => array(
                'background' => '#032c41',
                'foreground' => '#fff',
                'src' => 'format-quote',
            ),
        ));
    }
}

Then using this code in a service-quote.php

<?php

/**
 * Service Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'servicequote-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'service_quote';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// Load values and handle defaults.
$text = get_field('service_quote') ?: 'A quote about this service here...';
$image = get_the_post_thumbnail(NULL, 'thumb');
if ( get_field('background_color') ) {
    $background_color = get_field('background_color');
} else {
    $background_color = '#032c41';
}
if ( get_field('text_color') ) {
    $text_color = get_field('text_color');
} else {
    $text_color = 'white';
}
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="wp-block-group__inner-container">

        <span class="service-quote-text"><?php echo $text; ?></span>
    
    <div class="service-quote-image">
        <?php echo $image;?>
    </div>
    <style type="text/css">
        #<?php echo $id; ?> {
            background: <?php echo $background_color; ?>;
            color: <?php echo $text_color; ?>;
        }
    </style></div>
</div>

When the block is created, my featured image shows up and my text is editable, but when I view the block on the front end it remains left justified. What am I missing to have it be centered?