Home Forums Gutenberg Radio button that will add a color class to a list item


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

  • 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:

    * Item one
    * Item two

    Here is my code for it:

    <div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    $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; ?>

    Thank you!

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.