Conditionally add a link to heading of a Block?

I am creating a GB Block for a Card. The Card should be optionally linked.
If a link is set, then inside of the h3 i want to have a-tag wrapping the headline text.
If no link is set, then no a-tag should be there.

Can’t figure out how to achieve this.
Can anyone help me out?

@MichelyWeb Hey Marco, this is a copy of the Inner Circle DM that I just sent you. Let’s pick up this conversation in this Pinegrow forum so others can benefit from it:

Question: Will you add the card title and link in the block as a block attribute, use post data through a wp_query, or use custom fields (ACF/Metabox/etc.)? The project I was thinking of doesn’t do what you are looking for, so I’m noodling on this one a bit and realized that we might need to tackle it slightly differently, depending on the situation. For example, if you are just adding block content, it might be as simple as making the title an inner block and using Gutenberg to tackle the link issue. If it’s dynamic data, we can use some conditionals to show or hide the appropriate element based on the presence of the field/data.

It might also help to know a bit more about the use case for this card so we can suggest alternatives. For example, if it’s a biography card, you might consider making it a CPT rather than using block attributes since you’ll probably want to access the associated information in more than one place. See this video (Timestamp 24:49, Section: Block Type 3 - Dynamic Block) Create a Native WordPress Block Plugin Using Pinegrow Web Editor - YouTube for a demonstration.

Hi @adamslowe, thank you for the reply.

The card can be used in different use cases. If it is linked, then it gets an hover effect and is clickable in a whole. In this case it is not a CPT or something so the content is added freely: image, title (h3), short text (p)

Your idea of just using the Core/Heading block that can be linked would work but it needs more knowledge from the user. So i would prefer to have more control in PG.

Here is in a screenshot all logic i would need for that:

Because Attribute id’s can be used for referencing Block attributes already defined in this case card_link would be the link field in the block.

It’s possible to get the URL from link field in the expression, but its not possible to use the same statement in Attribute id (which is understandable from coding perspective).

Whats strage: when card_link is used as referenced attribute, it is not handled as empty even if no link is set in WP Block for that field. Therefore the Block Attribute “If empty” does not work. Seems to be a bug. @Emmanuel ?

I don’t have anything to add here yet, other than I think we are both traveling down the same paths based on your bug reports regarding the toggle control :wink:

Can I assume you are using K. Geary’s card structure in your project? That’s what I’m using in my tests as well.

I’m having good luck getting the linked title to work as expected, but struggling to make the unlinked title appear and disappear based on the presence of the link or the state of the toggle. I’m going to keep plugging at this since I have other tasks that I’m actively avoiding this morning…

Okay, get it to work with a PHP Block an manual PHP Code instead of JS Block:

<h3 cms-block-field="card_title" cms-block-field-type="none" cms-block-field-default-value="Put card title here">
<?php $link = PG_Blocks::getAttribute($args, 'card_link')?> 
<?php if ($link['url']): ?>
    <a href="<?php echo $link['url']; ?>">
        <?php echo PG_Blocks::getAttribute($args, 'card_title') ?>
    </a>
<?php else: ?>
    <?php echo PG_Blocks::getAttribute($args, 'card_title') ?>
<?php endif;?>
</h3>
1 Like

Hehe… yes, seems we are obviously pushing PG WP to its limits. :smiley:

Hey, that’s cheating :smiley:

It’s a nice solution, but I have to imagine there is a way to do it inside the builder.

Here’s what I’m looking at so far…

haha!

Am curious how you get the condition: “hide when link field is empty / show wenn link field is not empty”. Good luck!

I’m approaching it from the other angle. Showing the linked title only when a toggle is set to true.

That presents the issue of not having a great way to hide the unlinked heading when the toggle is off as you can see by the duplicated “Jane Dewey Linked” titles in the screenshot I posted previously. :frowning:

Exactly. Can’t believe there is no option for that.

Yep, at this point, I think I’m out of ideas other than the PHP block you already figured out.

Thank you for your effort!

@MichelyWeb @adamslowe yes, it makes sense to have more control over when the block elements are displayed. So, I added the Block Condition action that makes it very easy to support your use case.

Process:

Add 2 H3 elements, one without the link and the second one with the link.

On the first H3 add Block Condition to show it if card_link is NOT set:

On the second H3 add Block Condition to show it if the card_link IS set:

The new action will be out in the next update.

3 Likes

Absolutely phantastic! Thank you @matjaz !!

3 Likes