Custom block can't get to work

I’m trying to get my first custom block to work. Using Kirby 4.

I have the following page Blueprint which is working for me in the Panel:

title: News

fields:
	newsblock:
		type: blocks
		pretty: true
		fieldsets:
			- type: newsarticle
				preview: fields
				wysiwyg: true
				fields:
					news_article_heading:
						type: text
					news_article_text:
						type: writer
					news_article_image:
						type: files

I’ve then made a Block snippet in the site > snippets > blocks folder called newsarticle.php:

<?php foreach ($block->items() as $starjump): ?>

<article>
	<h2><?= $starjump->news_article_heading() ?></h2>
	<p><?= $starjump->news_article_text() ?></p>
</article>

<?php endforeach ?>

And then in the page template I have the following code:

<?= $page->newsblock() ?>

In browser I can see the JSON content. So I’ve added the toBlocks field method:

<?= $page->newsblock()->toBlocks() ?>

But now nothing is showing up in the browser.

What am I doing wrong?

You don’t iterate in the block snippet, but rather call the fields directly.
(Check out the dump helper, if You need a little more info on what is happening in that snippet.)

// snippets/blocks/newsarticle

<?php /** @var \Kirby\Cms\Block $block */
 // dump($block);
?>
<article>
  <h2><?= $block->news_article_heading() ?></h2>
  <p><?= $block->news_article_text() ?></p>
</article>

Then in Your template You echo all blocks:


<?php foreach($page->newsblock()->toBlocks() as $newsarticle): ?>
  <?= $newsarticle ?>
<?php endforeach ?>

1 Like

Hey thanks!

You’re welcome! =)
If You want to know more on how blocks work, I’d recommend checking out the
guide and the reference.

I’ve spent the last day staring at the videos, guides and references!

My next problem is extra, empty <p> tags are being added to the HTML.

Screenshot 2024-03-20 at 2.35.30 pm

Which are not showing in my Contents page:

Here’s the latest Block snippet

<article>
	<div class="text-content">
		<h2><?= $block->news_article_heading() ?></h2>
		<p><?= $block->news_article_text() ?></p>
	</div>
	<?php if($image = $block->news_article_image()->toFile()): ?>
		<img src="<?= $image->url() ?>" alt="">
	<?php endif ?>
</article>

Hi Mark,

You are adding those in your snippet - try:

<article>
	<div class="text-content">
		<h2><?= $block->news_article_heading() ?></h2>
		<?= $block->news_article_text() ?>
	</div>
	<?php if($image = $block->news_article_image()->toFile()): ?>
		<img src="<?= $image->url() ?>" alt="">
	<?php endif ?>
</article>

The <p> tags are already added in the Writer field

Hi Mike! Good to hear from you on here! I’ll take a look

You could also check, if the field has some content in an if statement, just like You verify, that the image actually exists, before You render it.

<?php if($block->news_article_text()->isNotEmpty()): ?>
<p><?= $block->news_article_text() ?></p>
<?php endif ?>

Yeah, the Writer writes html tags to the contents page file, so yes, I don’t need to add the <p> tags in the Block snippet.

Yes, only if not in inline mode =)

How do I know if the type: writer is inline or not? What does inline mode even mean?

It’s disabled by default

Enables inline mode, which will not wrap new lines in paragraphs and creates hard breaks instead.

See the field properties.

Blimey, there’s a lot to take in!

:blush: I know - but that also makes this CMS so flexible, and I’m sure You’ll get used to it.
Everything is well documented (heads up to the kirby team).
Good luck with Your project!