Dynamic Preview – Style Overlap

Hi there! I’m having some issues with the Dynamic Preview of Flexible Content layouts displaying repeated styling. My setup is as follows and screenshots are linked below.

Firstly, I have a page builder file that pulls in all my flexible content layouts onto the page:

<?php

// Template Name: Page Builder
get_header();
get_template_part('partials/style');

// This should be set to the name of your flexible content field.
$pageBuilderComponents = get_field('drag-and-drop');

// Checks for modules in order to avoid displaying an error if the page is empty.
if ($pageBuilderComponents) {

	// Counts the number of layouts/modules on the page.
	$componentCount = count($pageBuilderComponents);

	// Sets the count to zero to start at the first index of the outputted array from the $pageBuilderComponents variable.
	$count = 0;

	// Sets the $templatePart variable to null.
	$templatePart;

	// Iterates through the flexible content field. The have_rows() function should have the name inside of the flexible content field.
	while (have_rows('drag-and-drop')) {

		// Grabs the ACF components from the specific layout.
		the_row();
		// Checks to make sure that the count is still less than or equal to the number of 	layouts/modules.
		if ($count <= $componentCount) {
			// Gets the partial based on the name of the specific layout. So if you have a layout named 'header', it will grab the header.php template.
			// $templatePart = 'partials/' . $pageBuilderComponents[$count]['acf_fc_layout'] . '.php';
			// include( locate_template($templatePart, false, false) );
			set_query_var( 'componentID', absint( $count ) );
			$templatePart = 'partials/' . $pageBuilderComponents[$count]['acf_fc_layout'];
			get_template_part($templatePart);
		}

		// Increases index number.
		$count++;
	}
}

get_footer();

That pulls a template part automatically based on the layout name. This layout name is what I’m using for the Dynamic Preview template file. In this case, I’m managing the Basic Heading layout.

<?php $uniqueID = $componentID; ?>

<?php while(have_settings()): the_setting(); 

	$responsive_display_array =  get_sub_field( 'responsive_display' );

	if (get_sub_field( 'section_target' )) {
		$pageLink = ' ' . get_sub_field( 'section_target' );
	}
	

	if ( $responsive_display_array ):
		$display;
		foreach ( $responsive_display_array as $responsive_display_item ):
		 	$display .= $responsive_display_item . ' ';
		endforeach;
	endif; 

	if ( have_rows( 'section_padding' ) ):
		while ( have_rows( 'section_padding' ) ) : the_row();
			$paddingTop = get_sub_field( 'top' ) . 'px';
			$paddingBottom = get_sub_field( 'bottom' ) . 'px';
			$paddingLeft = get_sub_field( 'left' ) . 'px';
			$paddingRight = get_sub_field( 'right' ) . 'px';
		endwhile;
	endif;

	$backgroundType = get_sub_field( 'background_type' );
	$backgroundColor = get_sub_field( 'background_color' );
	$backgroundSize = get_sub_field( 'background_size' );
	$backgroundPosition = get_sub_field( 'background_position' );
	$backgroundRepeat = get_sub_field( 'background_repeat' );
	$backgroundAttachment = get_sub_field( 'background_attachment' );
	$backgroundClip = get_sub_field( 'background_clip' );
	$backgroundOrigin = get_sub_field( 'background_origin' );
	$backgroundOverlay = get_sub_field( 'overlay' );
	$backgroundImage = get_sub_field( 'background_image' );

	?>

<?php endwhile; ?>

<style>

	.page_<?= get_the_id(); ?>-layout_5ec449f872530-identifier_<?= $uniqueID; ?> {
		<?php if (!$backgroundType) : ?>
			background-color: <?= $backgroundColor; ?>;
		<?php else : ?>
			background: linear-gradient(<?= $backgroundOverlay; ?>, <?= $backgroundOverlay; ?>), url('<?= $backgroundImage; ?>');
			background-size: <?= $backgroundSize; ?>;
			background-position: <?= $backgroundPosition; ?>;
			background-repeat: <?= $backgroundRepeat; ?>;
			background-attachment: <?= $backgroundAttachment; ?>;
			background-clip: <?= $backgroundClip; ?>;
			background-origin: <?= $backgroundOrigin; ?>;
		<?php endif; ?>

		padding-top: <?= $paddingTop; ?>;
		padding-bottom: <?= $paddingBottom; ?>;
		padding-left: <?= $paddingLeft; ?>;
		padding-right: <?= $paddingRight; ?>;
	}

</style>

<div id="<?= $pageLink ?>" class="clearfix page_<?= get_the_id(); ?>-layout_5ec449f872530-identifier_<?= $uniqueID; ?>">
	<div id="<?= $pageLink ?>" class="<?php echo $display; ?>">
		<div class="grid-container center">
			<div class="grid-100">
				<h1><?php the_sub_field( 'heading' ); ?></h1>
			</div>
			<div class="grid-100">
				<p class="mb0"><?php the_sub_field( 'sub-heading' ); ?></p>
			</div>

			<div class="grid-100 pt3">
				<?php 
					$count = 0;
					$cards = get_sub_field('card');
					if (is_array($cards)) {
						$count = count($cards);
					}

				?>

				<?php if ( have_rows( 'card' ) ) : ?>
					<div class="display-grid<?= $count; ?>">
						<?php while ( have_rows( 'card' ) ) : the_row(); ?>
							<div class="mx2">
								<h2 class="pb2"><?php the_sub_field( 'heading' ); ?></h2>
								<?php $image = get_sub_field( 'image' ); ?>
								<?php if ( $image ) : ?>
									<div>
										<img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" style="max-width: 100%;" />
									</div>
								<?php endif; ?>
							</div>
						<?php endwhile; ?>
					</div>
				<?php endif; ?>
			</div>
		</div>
	</div>
</div>

Note that I’m giving each layout a unique key for styling purposes; this is where the problem arises. In the backend, the first instance of Basic Heading seems to be styling all the rest until the dynamic preview is refreshed. I have no issues with styling on the front end and everything appears perfectly as intended. It’s just the Dynamic Preview that is pulling styles from the first, and applying it to all of the rest.

Screenshots:
Front End – https://i.imgur.com/aF5915q.png
Back End (before opening and closing the layout editor) – https://i.imgur.com/OoTIPCR.png
Back End (after opening and closing the layout editor) – https://i.imgur.com/dF3mdoP.png

Is there any unique key that is associated with every single layout that I can use instead of the unique key I’m creating using a combination of the page id, layout key, and count of the layout on the page? I believe this would be how to fix the solution from my end, however I wasn’t able to find any documentation that includes how to find that unique key.

I appreciate any support you can provide, as this is an incredible addition to ACF and has me excited to continue working with it!