Radio button that will add a color class to a list item

• fourwhitesocks

• October 2, 2020 at 12:03 am

I’ve got this very close! This is in a custom Gutenberg block but my issue is just with the basic php or something I have wrong. Here are the parameters:
This is for a stylized unordered list block. I have custom fields in a repeater where they will be able to add each ‘list item/content’ using a text area in case the list will be a short paragraph, they are able to choose a bullet style (an icon), and the color of the bullets which is using a radio button; the radio button selection will add a class to the color (so far lite-color and dark-color). It is all working fine except right before the first list item there is a color choice rendering out to the front end – so for example it looke like:

dark-color
* Item one
* Item two

Here is my code for it:

<div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $classes ); ?>">

<?php
$bullet_color = the_field('bullet_color');
if($bullet_color=="lite-color") {
	echo $lite-color;
}elseif ($bullet_color=="dark-color") {
	echo $dark-color;
}

?>

	<?php if ( have_rows( 'list_item' ) ) : ?>
		<ul class="<?php the_field('center');?>">
		
		<?php while ( have_rows( 'list_item' ) ) : the_row(); 
		
		// var
		$selection = get_sub_field('bullet_style');
	if($selection=="asterisk") {
		echo $ion-asterisk;
	}elseif ($selection=="checkmark")   {
		echo $ion-checkmark;
	}
	?>
	
	<li class="<?php echo $selection?> <?php the_field('bullet_color') ?>">
	
	<?php the_sub_field( 'add_item' ); ?> </li>
			
			
		<?php endwhile; ?>
		
	<?php else : ?>
		
		<?php // no rows found ?>
		
	<?php endif; ?>
	</ul>
	</div>

Thank you!

list-item-ex....jpg

• Paul Bystrzan

• October 14, 2020 at 8:34 am

I believe it’s 1:1 duplicated with: https://support.advancedcustomfields.com/forums/topic/using-a-radio-button-to-add-a-class-to-a-list-item/

• fourwhitesocks

• October 15, 2020 at 12:09 am

I’m sorry I accidentally got that posted twice! I will check the other post; thank you!