Post Field Smart action creates new class="" attribute instead of appending

Pinegrow WP
,
1

Hello,

I’m trying to use an Advanced Custom Field to apply a class to each loop item. It’s technically working, but instead of adding the class (entry-priority-1, in this case) to the existing class=“” attribute, it’s creating a new attribute. The browser only acknowledges one class attribute on the item, so the second is ignored along with my class.

Is there something I can do to make this behave better? Do I have a setting wrong?

I’ve included a screenshot. The left shows my smart action in Pinegrow, and the right shows the relevant code on the rendered page.

Screen Shot 2022-11-27 at 12.31.46 PM
Screen Shot 2022-11-27 at 12.31.46 PM1301×281 133 KB

2

Hi @Beardmancer, thanks for reporting this!

Normally, this should not happen and I’m unable to replicate it. Do you have any other WP actions on the element, or its parent?

3

Hi @matjaz,

Yes, the link element does have another WP action assigned to it: “Post Link - Smart”. I’ve attached a more complete screenshot of the Wordpress actions panel for that element.

Screen Shot 2022-11-29 at 7.07.11 PM

The direct parent of this <a> is the loop container, so it has been assigned the WP action “Show Posts - Smart”

I can also post the PHP code preview for the loop if that would be helpful.

4

@Beardmancer are you using PG 6.8 or 7.0? Please post the HTML snippet of the A element the source with WP actions.

5

@matjaz I believe I was using 6.8 the other day when I posted, but I did upgrade to 7.0 yesterday to try it out and the behavior is the same. So, I’m currently using 7.0.

Here is the HTML for the <a> element:

<a href="https://portfolio.local/responsive-city-web-concept/" class="entry-priority-default link-post-grid" data-pg-ia='{"l":[{"name":"hover-in-post-grid","trg":"mouseenter","a":{"l":[{"t":"#gt# div:nth-of-type(1)","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":1}},{"t":"tween","p":0.1,"d":0.1,"l":{"autoAlpha":0},"e":"Power1.easeOut"}]},{"t":"#gt# div:nth-of-type(2)","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0}},{"t":"tween","p":0,"d":0.2,"l":{"autoAlpha":1},"e":"Power1.easeOut"}]}]}},{"name":"hover-out-post-grid","trg":"mouseleave","a":{"l":[{"t":"#gt# div:nth-of-type(1)","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0}},{"t":"tween","p":0,"d":0.2,"l":{"autoAlpha":1},"e":"Power1.easeOut"}]},{"t":"#gt# div:nth-of-type(2)","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":1}},{"t":"tween","p":0.1,"d":0.1,"l":{"autoAlpha":0}}]}]}},{"name":"resize-post-grid","trg":"resize","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"rotation":0},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":0.1,"l":{"rotation":3},"e":"Power1.easeOut"},{"t":"tween","p":0.1,"d":0.1,"l":{"rotation":-2},"e":"Power1.easeOut"},{"t":"tween","p":0.2,"d":0.1,"l":{"rotation":2},"e":"Power1.easeOut"},{"t":"tween","p":0.3,"d":0.1,"l":{"rotation":-1},"e":"Power1.easeOut"},{"t":"tween","p":0.4,"d":0.1,"l":{"rotation":0},"e":"Power1.easeOut"}]}]}}]}' cms-post-link cms-post-field="entry_priority" cms-post-field-type="class" cms-post-field-attribute="class" cms-post-field-acf cms-post-field-class-replace="entry-priority-default"><div class="feature-post-grid">
        <div>
            <img src="https://portfolio.local/wp-content/uploads/2022/09/IT_CityWebsiteDesign_Mobile_0821_1X.png" cms-post-image="full" alt="Mobile website designs for a city government." loading="lazy" srcset="https://portfolio.local/wp-content/uploads/2022/09/IT_CityWebsiteDesign_Mobile_0821_1X.png 512w, https://portfolio.local/wp-content/uploads/2022/09/IT_CityWebsiteDesign_Mobile_0821_1X-300x169.png 300w" class="img-post-grid" decoding="async"/>
        </div>
    </div><div cms-post-field="entry_colors_entry_gradient" cms-post-field-type="style" cms-post-field-style="background" class="feature-post-grid feature-post-grid-back" style="background:linear-gradient(to right, rgba(0,204,204,0.15) 0%, rgba(255,153,0,0.15) 100%);background:linear-gradient(to right, rgba(0,204,204,0.15) 0%, rgba(255,153,0,0.15) 100%);background:linear-gradient(to right, rgba(0,204,204,0.15) 0%, rgba(255,153,0,0.15) 100%);" cms-post-field-acf>
        <div>
            <img src="https://portfolio.local/wp-content/uploads/2022/09/IT_CityWebsiteDesign_Mobile-Menu_0821_1X.png" cms-post-field="hover_image" cms-post-field-type="image" cms-post-field-acf/>
        </div>
    </div><div class="feature-post-grid-base">
        <img src="https://portfolio.local/wp-content/uploads/2022/09/IT_CityWebsiteDesign_Mobile_0821_1X.png" cms-post-image="full" alt="Mobile website designs for a city government." loading="lazy" srcset="https://portfolio.local/wp-content/uploads/2022/09/IT_CityWebsiteDesign_Mobile_0821_1X.png 512w, https://portfolio.local/wp-content/uploads/2022/09/IT_CityWebsiteDesign_Mobile_0821_1X-300x169.png 300w" decoding="async"/>
    </div></a>

And here is the code from the Wordpress Action code preview:

<a href="<?php echo esc_url( get_permalink() ); ?>" class="link-post-grid <?php echo get_field( 'entry_priority' ); ?>" data-pg-ia='{"l":[{"name":"hover-in-post-grid","trg":"mouseenter","a":{"l":[{"t":"#gt# div:nth-of-type(1)","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":1}},{"t":"tween","p":0.1,"d":0.1,"l":{"autoAlpha":0},"e":"Power1.easeOut"}]},{"t":"#gt# div:nth-of-type(2)","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0}},{"t":"tween","p":0,"d":0.2,"l":{"autoAlpha":1},"e":"Power1.easeOut"}]}]}},{"name":"hover-out-post-grid","trg":"mouseleave","a":{"l":[{"t":"#gt# div:nth-of-type(1)","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0}},{"t":"tween","p":0,"d":0.2,"l":{"autoAlpha":1},"e":"Power1.easeOut"}]},{"t":"#gt# div:nth-of-type(2)","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":1}},{"t":"tween","p":0.1,"d":0.1,"l":{"autoAlpha":0}}]}]}},{"name":"resize-post-grid","trg":"resize","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"rotation":0},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":0.1,"l":{"rotation":3},"e":"Power1.easeOut"},{"t":"tween","p":0.1,"d":0.1,"l":{"rotation":-2},"e":"Power1.easeOut"},{"t":"tween","p":0.2,"d":0.1,"l":{"rotation":2},"e":"Power1.easeOut"},{"t":"tween","p":0.3,"d":0.1,"l":{"rotation":-1},"e":"Power1.easeOut"},{"t":"tween","p":0.4,"d":0.1,"l":{"rotation":0},"e":"Power1.easeOut"}]}]}}]}'><div class="feature-post-grid">
        <div>
            <?php echo PG_Image::getPostImage( null, 'full', array(
                    'class' => 'img-post-grid',
                    'loading' => 'lazy',
                    'decoding' => 'async'
            ), 'both', null ) ?>
        </div>
    </div><div class="feature-post-grid feature-post-grid-back" style="background:<?php echo get_field( 'entry_colors_entry_gradient' ); ?>;background:linear-gradient(to right, rgba(0,204,204,0.15) 0%, rgba(255,153,0,0.15) 100%);background:<?php echo get_field( 'entry_colors_entry_gradient' ); ?>;">
        <div>
            <img src="<?php echo PG_Image::getUrl( get_field( 'hover_image' ), 'large' ) ?>"/>
        </div>
    </div><div class="feature-post-grid-base">
        <?php echo PG_Image::getPostImage( null, 'full', array(
                'loading' => 'lazy',
                'decoding' => 'async'
        ), 'both', null ) ?>
    </div></a>

<!-- Functions.php section Include Resources -->
if( !class_exists( 'PG_Helper' ) ) { require_once "inc/wp_pg_helpers.php"; }
6

@Beardmancer the generated code looks fine. There is only one class on A and the entry_priority field gets echoed there.
What is the value of the field entry_priority? Do you have any plugins that filter the HTML output in some way?

7

@matjaz The field “entry_priority” is a selection field made with ACF that returns a text string. It seems to be returning the correct string as far as I can tell. I’ve attached screenshots of the ACF settings as well as how the selector looks when making a post.

Screen Shot 2022-12-04 at 8.41.13 AM

Screen Shot 2022-12-04 at 8.41.41 AM
Screen Shot 2022-12-04 at 8.41.41 AM755×125 8.68 KB

As far as I know, none of my plugins are filtering the output. I only have three plugins installed: Advanced Custom Fields, SVG Support, and WordPress Importer. I deactivated the latter two and saw no change.

8

@matjaz On a hunch, I inspected the actual “index.php” file that was exported into my theme folder and it appears to be different from what is shown in Pinegrow:

 <a href="<?php echo esc_url( get_permalink() ); ?>" data-pg-ia="{&quot;l&quot;:[{&quot;name&quot;:&quot;hover-in-post-grid&quot;,&quot;trg&quot;:&quot;mouseenter&quot;,&quot;a&quot;:{&quot;l&quot;:[{&quot;t&quot;:&quot;#gt# div:nth-of-type(1)&quot;,&quot;l&quot;:[{&quot;t&quot;:&quot;set&quot;,&quot;p&quot;:0,&quot;d&quot;:0,&quot;l&quot;:{&quot;autoAlpha&quot;:1}},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0.1,&quot;d&quot;:0.1,&quot;l&quot;:{&quot;autoAlpha&quot;:0},&quot;e&quot;:&quot;Power1.easeOut&quot;}]},{&quot;t&quot;:&quot;#gt# div:nth-of-type(2)&quot;,&quot;l&quot;:[{&quot;t&quot;:&quot;set&quot;,&quot;p&quot;:0,&quot;d&quot;:0,&quot;l&quot;:{&quot;autoAlpha&quot;:0}},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0,&quot;d&quot;:0.2,&quot;l&quot;:{&quot;autoAlpha&quot;:1},&quot;e&quot;:&quot;Power1.easeOut&quot;}]}]}},{&quot;name&quot;:&quot;hover-out-post-grid&quot;,&quot;trg&quot;:&quot;mouseleave&quot;,&quot;a&quot;:{&quot;l&quot;:[{&quot;t&quot;:&quot;#gt# div:nth-of-type(1)&quot;,&quot;l&quot;:[{&quot;t&quot;:&quot;set&quot;,&quot;p&quot;:0,&quot;d&quot;:0,&quot;l&quot;:{&quot;autoAlpha&quot;:0}},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0,&quot;d&quot;:0.2,&quot;l&quot;:{&quot;autoAlpha&quot;:1},&quot;e&quot;:&quot;Power1.easeOut&quot;}]},{&quot;t&quot;:&quot;#gt# div:nth-of-type(2)&quot;,&quot;l&quot;:[{&quot;t&quot;:&quot;set&quot;,&quot;p&quot;:0,&quot;d&quot;:0,&quot;l&quot;:{&quot;autoAlpha&quot;:1}},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0.1,&quot;d&quot;:0.1,&quot;l&quot;:{&quot;autoAlpha&quot;:0}}]}]}},{&quot;name&quot;:&quot;resize-post-grid&quot;,&quot;trg&quot;:&quot;resize&quot;,&quot;a&quot;:{&quot;l&quot;:[{&quot;t&quot;:&quot;&quot;,&quot;l&quot;:[{&quot;t&quot;:&quot;set&quot;,&quot;p&quot;:0,&quot;d&quot;:0,&quot;l&quot;:{&quot;rotation&quot;:0},&quot;e&quot;:&quot;Power1.easeOut&quot;},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0,&quot;d&quot;:0.1,&quot;l&quot;:{&quot;rotation&quot;:3},&quot;e&quot;:&quot;Power1.easeOut&quot;},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0.1,&quot;d&quot;:0.1,&quot;l&quot;:{&quot;rotation&quot;:-2},&quot;e&quot;:&quot;Power1.easeOut&quot;},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0.2,&quot;d&quot;:0.1,&quot;l&quot;:{&quot;rotation&quot;:2},&quot;e&quot;:&quot;Power1.easeOut&quot;},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0.3,&quot;d&quot;:0.1,&quot;l&quot;:{&quot;rotation&quot;:-1},&quot;e&quot;:&quot;Power1.easeOut&quot;},{&quot;t&quot;:&quot;tween&quot;,&quot;p&quot;:0.4,&quot;d&quot;:0.1,&quot;l&quot;:{&quot;rotation&quot;:0},&quot;e&quot;:&quot;Power1.easeOut&quot;}]}]}}]}" <?php post_class( 'link-post-grid' ); ?> id="post-<?php the_ID(); ?>" class="<?php echo get_field( 'entry_priority' ); ?>"><div class="feature-post-grid">
                    <div>
                        <?php echo PG_Image::getPostImage( null, 'full', array(
                                'class' => 'img-post-grid',
                                'loading' => 'lazy',
                                'decoding' => 'async'
                        ), 'both', null ) ?>
                    </div>
                </div><div class="feature-post-grid feature-post-grid-back" style="background:<?php echo get_field( 'entry_colors_entry_gradient' ); ?>;background:linear-gradient(to right, rgba(0,204,204,0.15) 0%, rgba(255,153,0,0.15) 100%);background:<?php echo get_field( 'entry_colors_entry_gradient' ); ?>;">
                    <div>
                        <img src="<?php echo PG_Image::getUrl( get_field( 'hover_image' ), 'large' ) ?>"/>
                    </div>
                </div><div class="feature-post-grid-base">
                    <?php echo PG_Image::getPostImage( null, 'full', array(
                            'loading' => 'lazy',
                            'decoding' => 'async'
                    ), 'both', null ) ?>
                </div></a>

Specifically, it shows these two pieces of code separated:

<?php post_class( 'link-post-grid' ); ?>

<?php echo get_field( 'entry_priority' ); ?>

While Pinegrow shows this:

class="link-post-grid <?php echo get_field( 'entry_priority' ); ?>
9

@Beardmancer thanks, now I caught the issue. It happens when the Show posts loop item also has a Post field for class. Will be fixed in the next release.

2 Likes
10

Just an update—I downloaded 7.03 today, opened my project, and exported the theme. The problem was immediately resolved.

Thanks @matjaz for the help and communication!

11

@Beardmancer great, thanks!