Access text blocks separately in frontend to style them

The CMS Questions
1

I have several text blocks per page in the panel, and I need

  1. To be able to style each text block differently. But so far I haven’t found a way to refer to a specific text block in a page in my html. (text block 1, text block 2??) How do I do that?
  2. To be able to style a specific link or piece of text differently inside a given text block. Again, I don’t know how to php call a piece of text inside a text block either in the html. Is that possible?

I am using Tailwind for styling and need to be able to inject classes right in the html too.

2

The best way to achieve this is to extend the standard blocks and thus assign options to each text block.

You can define the desired additions as you wish.

block
block2070×1098 199 KB

Have a look at the following chapter:

3

Thank you so much!
But will this help for example identify specifically a link inside a text and assign separate class to it inside my php snippet? what I mean is let’s say there’s this text:

Subscribe to our newsletter here.

But I want to style the ‘here’ link in a specific way (and I use Tailwind for classes in my html), which means I will have to do:

<p class="">Subscribe to our newsletter
<a class="whatever classes i need" href="">here</a></p>

How can I wrap the above into a block reference in php? If I can only reference the entire block that hosts this text?

4

I guess you don’t mean to address a specific anker elements but all anker elements in a block?

Tailwind has a plugin for such things: Kirby meets Tailwind CSS | Kirby CMS

5

Ah yes, I have the plugin! But I don’t get how to add it with php. Can I just add these classes in the txt file of the text block? Or do I have to add them in the templates/snippets? For example, I have a text block (that then the users of the website can change, so it should be editable in the panel) and then inside the text block I need to style all the hyperlinks in one way. In the template, if I write a foreach loop and style it, it will only access the entire text block, but not all the hyperlinked words right?

6

Have you read the plugin’s documentation? If so, you will have learned that you need to add the styles to a wrapping element. I think the most sensible would be to limit this to all block types that contains generated HTML, like the text block, markdown block or list block, because other blocks like heading or image you can style separately.

So make a copy of the relevant block snippets in /site/snippets/blocks and add the styles as required to a wrapper element.

7

I have another question, I still don’t understand how to refer to different text blocks on one page in my php. I created a snippet for one of the text blocks in snippets/blocks, and it’s called definition.php. Let’s say it appears the second or the third in the text blocks list on my page in the panel (let’s say I have 4 different text blocks).

In my snippet code I say

<?php /** @var \Kirby\Cms\Block $block */ ?>

<?php foreach ($page->blocks()->toBlocks() as $block): ?>
    
<?= $block->text(); ?>

<?php endforeach ?>

This will grab ALL the text blocks on that page. How can I grab only a specific text block? Thank you!