How to Output a Text Formatted with Line Breaks in a Filament Admin Panel (for Laravel apps)

While building a Filament Panel in an internal Laravel app today, I wanted to display a read only view of my Model. It contains a “message” field that has line breaks in it, which I wanted to show correspondingly.

I achieved this by combining the formatStateUsing() and html() methods with php’s nl2br function on a TextEntry:

<?php 

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            TextEntry::make('message')
                ->formatStateUsing(fn (string $state) => nl2br($state))
                ->html(),
        ]);
}

Quick Fix for Safari 18 Issue With Overlapping Columns in the Classic WordPress Editor Interface

The problem, introduced with Safari 18

The very recently released Safari 18 on macOS Sequoia seems to have introduced a bug that makes the columns in the classic editor interface of WordPress overlap. Metaboxes that should actually be below the main content field are placed under the second sidebar column.

Easy Fix: add CSS to WordPress admin

You can very easily fix this by loading the following CSS in your admin area:

/* Temporary Fix for classic editor bug in Safari 18 */
#postbox-container-2 { clear: left; }
.index-php #postbox-container-2 { clear: none; }

Even easier: install a tiny plugin that loads the fix

To make things even easier I’ve written a tiny WordPress plugin that does that and nothing more. Download and activate the plugin – and you are good to go.

Meanwhile let’s hope there will be an official fix for the issue.

Quickly Interact With the Selected Element in Dev Tools

Today I learned that there is a very handy shortcut for interacting with the currently selected DOM element in your browser’s console:

  1. Open dev tools in Chrome or Firefox
  2. Select an element / a node in the “inspect” tab
  3. You can now reference the selected element with $0 in the “console” tab and start interacting with it.
See how it works in Firefox (same in Google Chrome)

By the way: you don’t need to have the element currently selected anymore, since $0 means “the most recently selected node”. Also there is $1 to $4 for the last-selected to fourth-ago-selected node, as described in the Google Chrome Console Utilities API reference (might vary with other browsers).

How to Do a Simple Image Processing Performance Test With PHP & ImageMagick

I’ve created a simple open source script to measure ImageMagick performance on a web server. It measures, how long it takes to convert an image it into multiple sizes:

Just download the files from the repo, drop them on your server and open the script from your browser.

Easy whitespace trimming with Twig

When using the Twig templating engine for PHP you might have used the trim filter to trim away any possible existing blanks at the beginning and end of a string:

{{ '  I like Twig.  '|trim }}

{# outputs 'I like Twig.' #}

Another way to trim out whitespaces is by using the – modifier:

<li>
    {{- value }}    </li>
{# outputs '<li>no spaces    </li>' #}