Block preview is wrapped in “extra” div (same classes), affects appearance

• lepardman

• August 23, 2023 at 7:37 am

I would love to hear some thoughts on this one.

I have multiple blocks on which I have a custom field for adding width classes to the block (I don’t like Gutenbergs approach, I need my own). The selected class is appended to the blocks other regular css classes on the object.

On my ACF blocks I use get_block_wrapper_attributes() to get the classes and then add them to a wrapper div. Apparently these classes is also added to the preview wrapping div in admin which means I get a double effect of my css rules.

It removes the attribute classes on the inner div whenever clicking on the block but it’s back again whenever I reload the page.

Anyone got a clue on why this happens and how I can solve it (my soultion mught be bad, I’m of course open for other totally different solutions)? This worked fine, as far as I know, before the summer (just got back to work and discovered this after updating WP 6.2.2 -> 6.3. and ACF 6.1.7 -> 6.2.0).

Preferably I would not want these classes on the preview wrapping div, however they should in that case not be removed on the inner div when clicking on the preview.

My block code:

<?php
$custom_wrapper_classes = 'my-block';
include_once (get_stylesheet_directory() . '/includes/blocks/block-functions.php');

if (function_exists('hest_get_wrapper_attr')) :
	$wrapper_attributes = hest_get_wrapper_attr($block, $custom_wrapper_classes);
endif;

$posts = get_field('my_relationship_field');

if( $posts ): ?>

	<div <?php echo wp_kses_data($wrapper_attributes); ?>>	

		<div class="my-grid">
			<?php
			global $post;
			foreach( $posts as $post): 
				setup_postdata($post);?>

				 <!-- Code for outputting data -->
			<?php
			endforeach; ?>
		</div><!-- .my-grid -->

	</div><!-- .wrapper -->

	<?php
	wp_reset_postdata();

endif; ?>

hest_get_wrapper_attr() looks like this:

<?php
/*
 * Converts Gutenberg saved data attributes (input field by IPM plugin) to 
 * a string to echo on the wrapping div
 */
function conv_data_attributes($data_attributes) {

    $data_attr = '';
    // Regular expression pattern to match the value inside the brackets
    $pattern = '/\[(.*?)\]/';

    // Perform the regular expression match
    if (preg_match_all($pattern, $data_attributes, $matches)) {
        // Extract the matched values
        $values = $matches[1];
        // Remove the commas from each extracted value
        $data_attr = array_map(function ($value) {
            return str_replace(',', '', $value);
        }, $values);
        // Convert the array into a space-separated string
        $data_attr = implode(' ', $data_attr);
    }

    return $data_attr;
}

/*
 * Converts Gutenberg saved gap value to CSS
 * 
 */
function conv_blockgap_value($gap) {
    
    $pattern = "/var:([^|]+)\|([^|]+)\|([^|]+)/";

    $result = preg_replace_callback($pattern, function ($matches) {
        $lastValue = $matches[3];
        $updatedLastValue = preg_replace("/(\d+)([a-zA-Z]?)/", "$1-$2", $lastValue);
        return "var(--wp--{$matches[1]}--{$matches[2]}--{$updatedLastValue})";
    }, $gap);

    $gap = "gap: " . $result . ";";
    
    return $gap;
}

/*
 * Main function to prepare all wrapper classes, styles and attributes
 * 
 */
function hest_get_wrapper_attr($block, $custom_wrapper_classes) {
    
    $wrapper_attributes = '';
    $alignment_classes = '';
    $style = '';

    // Support custom anchor values.
    $anchor = '';
    if ( ! empty( $block['anchor'] ) ) {
        $anchor = 'id="' . esc_attr( $block['anchor'] ) . '" ';
        $wrapper_attributes .= $anchor;
    }

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

    if ($block['supports']['alignContent'] == 'matrix') {
        // If matrix
        // Replace spaces: center left becomes center-left
        $alignment_classes .= ' has-custom-content-position is-position-' . str_replace(" ", "-", $block['alignContent']);
    } else {
        if ( ! empty( $block['alignContent'] ) ) {
            // If not matrix, get the alignContent
            // either top, center, or bottom
            $alignment_classes .= ' is-vertically-aligned-' . $block['alignContent'];
        }
    }

    // Block text alignment
    if( !empty($block['alignText']) ) {
        $alignment_classes .= ' has-text-align-' . $block['alignText'];
    }

    // Check if the block has fullHeight turned on
    if( !empty($block['fullHeight']) ) {
        $style .= 'min-height: 100vh;';
    }
    
    // Check if we got custom data attributes to add to our main div
    $data_attr = $block['dataAttributes'] ?? null;
    if ($data_attr && function_exists('conv_data_attributes') ) :
        $data_attr = conv_data_attributes($data_attr);
    endif;

    // Add blockGap value to wrapper attributes
    $gap = $block['style']['spacing']['blockGap'] ?? null;
    if ($gap && function_exists('conv_blockgap_value') ) :
        $gap = conv_blockgap_value($gap);
    endif;

    $style .= $gap;

    $wrapper_attributes .= get_block_wrapper_attributes(
        [
            'class' => $custom_wrapper_classes . $alignment_classes,
            'style' => $style,
        ]
    );

    $wrapper_attributes = $wrapper_attributes . ' ' . $data_attr;

    return $wrapper_attributes;
}

• Vitalii Kaplia

• November 3, 2023 at 1:18 pm

+

• vellkan

• September 26, 2024 at 2:25 pm

Did You managed that to work properly?
Cause I’ve got similar problem with my blocks, much simpler code:

<?php

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

  if ( ! empty( $block['align'] ) ) {
    $class_name .= ' align' . $block['align'];
  }

  if ( ! empty( $block['alignText'] ) ) {
    $class_name .= ' text-align-' . $block['alignText'];
  }

  $anchor = '';
  if ( ! empty( $block['anchor'] ) ) {
    $anchor = 'id="' . esc_attr( $block['anchor'] ) . '" ';
  }

  $custom_id = wp_unique_id( 'custom-' );

  $attrs = $is_preview ? 'class="'.$class_name.'"' : get_block_wrapper_attributes(
    [
      'class' => $class_name
    ]
  );

?>

  <section <?php echo $anchor; ?> <?php echo $attrs; ?>>

    <!-- my block content -->

  </section><!-- /.full-section -->

In admin panel my SECTION is wrapped with extra div, on frontend everything is fine.
I’ve got problem with double classes in frontend too, when I remove this code:
$class_name .= ' ' . $block['className'];
it’s better, but in admin panel it’s a little pain in ass.