Long help texts break layout in Kirby 4 RC1 panel

[yulie]

Hi y’all,

I’m building a site and I’m close to the launch date. With Kirby 4 close to being released, I tried RC1 … but it looks like some of the layouts break in the right column (I attached a screenshot) … it might have to do with me using quite long help texts in the blueprints so the editor knows what to do (and not to do).

I’m not here for you in order to help me, but in order to show you stuff that’s still wonky in Kirby 4.

The way I set up my blueprints works in Kirby 3, so I guess it must be some sort of bug?

Check it out

[GB_DESIGN]

I reported the issue to Github today.

[v4] Long help texts overflow the layout

The problem is due to a CSS class that only assigns a height of 1.5 rem to the help text.

[yulie]

Hiya @GB_DESIGN … thanks a lot for the response. Yea, that seems to be it.

Can we flag duplicates? I’m new to this forum… Oh you put it on Github … is that where bugs are collected for Kirby?

Anyway, fascinated by how quickly someone responded, wow…

[GB_DESIGN]

@yulie

Anyway, fascinated by how quickly someone responded, wow…

Thank you

You can work around the problem with the following CSS class:

footer.k-bar {
    height: auto;
}

To do this, create a custom-panel.css

panel

If you need further support, please write here.

[GB_DESIGN]

@yulie

Can we flag duplicates?

I would not create duplicates there. But you can add your own details to an existing issue.

@yulie

is that where bugs are collected for Kirby?

Yes, you can post issues directly to Github:

Release candidate

[yulie]

Thanks a ton for the info and the workaround

[GB_DESIGN]

I can read in your screenshot that you want to avoid problems with file uploads. Take a look at the following article, which may solve the problem:

Str:slug on filenames

Hi, I am working on a site with lots of front-end file uploads, and have hit some difficulties with filenames causing issues in the panel. For example, if a user uploads this file: blank & something {{} [].pdf It gets saved to the content folder as: blank & something {{} [].pdf Then when the client clicks on this in the Kirby panel there is the error message “The view could not be found” I am now trying to use Str::slug to fix this (there may be a better way), so I can convert the file…

[texnixe]

Regarding the help text for the videos, I would recommend solving the whitespace issue in your code instead of relying on the user to follow your advice.

[yulie]

Dear @texnixe , thank you for your comment.

I am using ->isNotEmpty() a lot … but that doesn’t work for blocks.

If the editor creates, say, a quote block … and then doesn’t enter anything, the HTML for said quote block still gets rendered, just with an empty <blockquote> and an empty <footer> inside.

Now, I had to write a custom quote.php block snippet anyway, so I told it to not output anything if the fields are empty, but the container surrounding all quotes stays … because afaik I cannot tell the template to check whether or not the blocks were created BUT are empty. Can I?

So … the same is true for videos and all other blocks, no?

If the user does this:

… they might expect the frontend to not show anything … but in reality,

<?php if ($page->kritiken()->isNotEmpty()): ?>

is TRUE. Right? It ISN’T empty. So the HTML gets rendered without any information.

Is there any way to check from a template file, whether the fields inside the blocks are empty?
(we are going VERY offtopic now)

[yulie]

Thank you @GB_DESIGN … I’ll check that out … actually … The images are going to be uploaded from the panel. The link you sent is about uploading from the front end. So … how can I sanitise filenames of files uploaded from the panel?

[GB_DESIGN]

@yulie

If the editor creates, say, a quote block … and then doesn’t enter anything, the HTML for said quote block still gets rendered, just with an empty <blockquote> and an empty <footer> inside.

This also depends on how you have set up the structure.
A simplified example:

<?php if ($page->critics()->isNotEmpty()): ?>
<blockquote>
<?= $page->critics() ?>
</blockquote>
<?php endif ?>

If empty, is not output.

<blockquote>
<?php if ($page->kritiken()->isNotEmpty()): ?>
<?= $page->kritiken() ?>
<?php endif ?>
</blockquote>

If empty, <blockquote></blockquote> is output.

If you post the code from your template, we can help you better.

[yulie]

		<?php if ($page->kritiken()->isNotEmpty()): ?>
		<div class="kritiken swiper mySwiper">
			<div class="swiper-wrapper">
				<?= $page->kritiken()->toBlocks() ?>
			</div>
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-pagination"></div>
		</div>
		<?php endif ?>

[yulie]

@yulie

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

… is the problem. Because, if the blocks exist (even if their fields are empty),

$page->kritiken()

is NOT empty. So it will render

<div class="kritiken swiper mySwiper">

… and everything inside, too

[yulie]

What I already did was create a quote.php in site/snippets/blocks … it looks like this:

<?php /** @var \Kirby\Cms\Block $block */ ?>
<?php /* we are modifying the block in order to use swiper.js for the carousel */ ?>
<?php /* check out the documentation at https://swiperjs.com/demos#autoheight */ ?>
<?php if (
	($block->text()->isNotEmpty())
	||
	($block->citation()->isNotEmpty())
): ?>
<div class="swiper-slide">
	<blockquote>
		<?php echo t('anfuehrungszeichen_anfang') ?><?= $block->text() ?><?php echo t('anfuehrungszeichen_ende') ?>
		<?php if ($block->citation()->isNotEmpty()): ?>
		<footer>
			<span>&mdash;</span> <span><?= $block->citation() ?></span>
		</footer>
		<?php endif ?>
	</blockquote>
</div>
<?php endif ?>

So that at least the blocks don’t get rendered. But this still leaves me with the surrounding container, if the editor created useless empty blocks…

It would be cool to catch that in the template, but I don’t think that’s possible, is it?

[GB_DESIGN]

@texnixe I think this post should be split up for a better overview, as 4 topics are currently being discussed here:

• Text-overflow of help texts in the panel
• Cleanup of image names
• Rendering of (empty) blocks
• Videos in blocks

[GB_DESIGN]

@yulie

So that at least the blocks don’t get rendered

You have a double query as to whether citation() exists.
The block is only rendered if text() or citation() are not empty.
Is it desirable that the complete block should not be rendered in this case?
Is the input for citation() optional or only intended in combination with text()?

The following (untested) code has a more logical structure:

<?php if ($block->text()->isNotEmpty()): ?>
<div class="swiper-slide">
	<blockquote>
		<?php echo t('anfuehrungszeichen_anfang') ?>
			<?= $block->text() ?>
		<?php echo t('anfuehrungszeichen_ende') ?>
		<?php if ($block->citation()->isNotEmpty()): ?>
		<footer>
			<span>&mdash;</span> <span><?= $block->citation() ?></span>
		</footer>
		<?php endif ?>
	</blockquote>
</div>
<?php endif ?>

[yulie]

The double query as to whether citation() exists isn’t a problem … The blockquote can be rendered with or without a footer (that was all intentional).

The real problem is whether or not in page templates we can find out if fields in existing blocks are empty in order to not render useless html tags.

[texnixe]

Right, not as easy as I thought. $block->isEmpty() doesn’t work as expected. I would be necessary to create block models that define for each block type when they are to be considered empty. Nevertheless, while this is more work, you would be on the safe side and not rely on user input.

[yulie]

@texnixe

I know … I was wondering whether that would actually be something that could become a Kirby feature.

Because I’m probably not the only one who creates a website and then hands it to editors who have no idea that making empty blocks in the panel results in unnecessary HTML in the frontend.

I’ve got two reasons I haven’t looked into programming this myself:

1. The deadline I have for this project is close and there’s higher priority stuff to be done
2. We’re waaaaaaayyyyy over budget already.

I might look into coming up with a solution with the next Kirby project… not with this one.

(But hey, if anyone out there is interested in coming up with a solution … it would be much appreciated!)

[yulie]

And back to what this thread was originally about:

Is the fixed-height for help text issue something that’s gonna be fixed for Kirby 4 production?
Height depending on text length is a reasonable way to go, no?
Or do we all need to use the workaround?