# Conditionally add a link to heading of a Block?

**URL:** https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016
**Category:** Pinegrow WP
**Created:** [May 10, 2023, 8:40am UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016 "2023-05-10T08:40:35Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 10, 2023, 8:40am UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/1 "2023-05-10T08:40:35Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [May 10, 2023, 1:35pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/2 "2023-05-10T13:35:49Z")

</div>

@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](https://youtu.be/exE9T-wUd-8?t=1489) for a demonstration.

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 10, 2023, 2:52pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/3 "2023-05-10T14:52:48Z")

</div>

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:

 ![CleanShot 2023-05-10 at 16.46.41@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e1ebbdb887e0983e682ef4dd69ddf6cc2c4b3001.png)

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).

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 10, 2023, 2:59pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/4 "2023-05-10T14:59:39Z")

</div>

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 ?

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [May 10, 2023, 3:19pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/5 "2023-05-10T15:19:58Z")

</div>

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 😉

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…

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 10, 2023, 3:21pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/6 "2023-05-10T15:21:35Z")

</div>

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

 ![CleanShot 2023-05-10 at 17.19.51@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/806e2011e544dff12732c2a683676137a5da6239.png)

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 10, 2023, 3:23pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/7 "2023-05-10T15:23:00Z")

</div>

> [@adamslowe](#):
>
> 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 😉

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

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [May 10, 2023, 3:26pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/8 "2023-05-10T15:26:51Z")

</div>

> [@MichelyWeb](#):
>
> Okay, get it to work with a PHP Block an manual PHP Code instead of JS Block:

Hey, that’s cheating 😃

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…

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/006dd6ba4d48e05d23b02878b9a15525c8bbbd56.png)

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 10, 2023, 3:53pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/9 "2023-05-10T15:53:01Z")

</div>

> [@adamslowe](#):
>
> Hey, that’s cheating 😃

haha!

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

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [May 10, 2023, 3:56pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/10 "2023-05-10T15:56:28Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/36e4aea48c26f5c43c679c4964efa13406d67d4b.png)

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. ☹

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 10, 2023, 4:28pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/11 "2023-05-10T16:28:49Z")

</div>

> [@adamslowe](#):
>
> 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. ☹

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

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [May 10, 2023, 4:56pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/12 "2023-05-10T16:56:26Z")

</div>

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

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 10, 2023, 5:26pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/13 "2023-05-10T17:26:15Z")

</div>

Thank you for your effort!

---

<div class="post-metadata">

### Author: ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [May 11, 2023, 8:29am UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/14 "2023-05-11T08:29:18Z")

</div>

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

 ![h31](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9f831ab26a3f771d9ce1986b737057e1bbd69010.jpeg)

On the second H3 add Block Condition to show it if the card\_link IS set:

 ![h32](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/ddf8cc26a17b7a8cba1fc11b96602ded79127245.jpeg)

The new action will be out in the next update.

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 11, 2023, 11:04am UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/15 "2023-05-11T11:04:40Z")

</div>

Absolutely phantastic! Thank you @matjaz !!

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 6, 2024, 6:11pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/16 "2024-05-06T18:11:02Z")

</div>

This seems stop working with link attributes @matjaz

---

<div class="post-metadata">

### Author: ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [May 7, 2024, 7:32am UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/17 "2024-05-07T07:32:21Z")

</div>

@MichelyWeb I just tested it with the Card Link interactive example and it works for me. Please give more details about the issue.

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 7, 2024, 7:48am UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/18 "2024-05-07T07:48:13Z")

</div>

I just copied the Blocks in a new project and there it works with exactly the same code. The only differende is:

Original Project: just one Attribute ID (the link is missing)

 ![CleanShot 2024-05-07 at 09.45.31@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/48f9f344b219a69fff7a993a6c7713fea5846f33.png)

New Project: all Attributes selectable  
 ![CleanShot 2024-05-07 at 09.46.30@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7371f48be42a4cfe099de0b2bfabd9c85c594367.png)

In my original Project i was typing the attribute ID manually which was not working. In the demo-project i can select the attribute from the list and it’s working.

How can i fix my original project?

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 7, 2024, 7:50am UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/19 "2024-05-07T07:50:32Z")

</div>

I just copied the the code from the structure panel, deleted the code and pasted it again. Now the attibutes are all selectable. Strange.

---

<div class="post-metadata">

### Author: ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)
#### Post date: [May 7, 2024, 12:57pm UTC](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016/20 "2024-05-07T12:57:01Z")

</div>

Same behavior on a new Block on the same index.html  
First the attributes are not selectable. Only after removing the Block completely and adding it again (copy&paste) it’s working.

[Next page](https://forum.pinegrow.com/t/conditionally-add-a-link-to-heading-of-a-block/8016.md?page=2)
