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(),
        ]);
}

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.

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.

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

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

1. Register at duckdns.org and add a domain
2. Log in to to UniFi management interface on unifi.ui.com (or your local webinterface) and choose the “Network” app.
3. Go to Settings > Internet and click on your WAN interface
4. In the Section “Dynamic DNS” click “Create New Dynamic DNS”
5. Choose the following options:
   Service: dyndns
   Hostname: your “domain” from duckdns.org
   Username: nouser
   Password: nopassword
   Server: www.duckdns.org/update?domains=%h&token=yourtoken
   ℹ️ replace yourtoken with your token from duckdns.org
6. Save
7. Check your domain on Duck DNS: the “current IP” value should now be the same as your WAN IP from the UniFi router.

I am using it on our company’s Ubiquiti UniFi Dream Machine SE.

{{ '  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>' #}

But sometimes it can come in handy to work with images from an URL source – be it from another site or even your own server.

Here is how to do that with the get_external_image() function:

$context = Timber::context();

// Lets say you have an external image that you want to use in your theme

$context['cover_image'] = Timber::get_external_image($url);

Timber::render('single.twig', $context);

Then in your twig file you can use the typical filters and properties:

<img src="{{ cover_image.src }}" class="cover-image" />

Helpful documentation for further information: Timber\externalImage and work with external images.

Since upgrading to macOS Sonoma I was not able to launch or create a new Simulator however. When trying to create a new Simulator I wasn’t able to click into the “OS Version” field – it just wouldn’t do anything:

How to Fix Not Being Able to Pick an OS Version

When I opened the main Xcode app and selected the “iOS” tab on top, it showed the notice “iOS 17.0 Not installed”. So just click on “GET” and download the new OS, which might take a little while:

After having downloaded the iOS version and reopening the Simulator app I could pick the “OS version” again and was able to use my old Simulators and also create a new Simulator device without a problem:

So here is this website running inside a virtual iPhone 15’s Safari. You can use almost all features of Safari and see the whole browser ui which is handy for better testing of responsive websites:

Bonus Tip: Add more OS versions inside XCode / Simulator

I also learned along the way that inside Xcode’s settings you can head over to the “Platforms” tab to see all installed Platforms and download new ones:

There are several of these profiles that I only access maybe twice a year e.g. when accessing Google services with a specific account.

🫤 Chrome’s default: profiles are ordered randomly or chronologically

I have 20+ profiles set up. On opening Chrome it displays the “profile picker” window. By default these are ordered by an obscure method – maybe by date added or so. This means that the profiles I actually want to use most often (maybe 3-5 profiles) are harder to find and I might need to scroll down every time I want to use them.

From the interface there doesn’t seem to be a way to manually reorder these profiles.

✨ The solution: Nicely order your Google Chrome profiles

Turns out you can actually order your profiles in your preferred custom way:

1. Open Chrome so the profile picker window appears:

2. Edit your profile by clicking the three-dots menu and selecting “Edit”:

3. Change the name of your Chrome profile. You could either prefix it with an Emoji or with a number to order them precisely.

Use Git Commands to Clone Without History

I have my new repo locally at ~/code/new-theme and want to clone the next branch of the public https://github.com/flyntwp/flynt repo into that:

cd ~/code/new-theme
mkdir tempclonedir
cd tempclonedir
git clone --depth=1 --single-branch --branch next https://github.com/flyntwp/flynt . 
rm -rf .git
cd ..
mv tempclonedir/{.,}* .
rm -r tempclonedir

Of course you can combine these commands into a one-liner like so:

cd ~/code/new-theme && mkdir tempclonedir && cd tempclonedir && git clone --depth=1 --single-branch --branch next https://github.com/flyntwp/flynt .  && rm -rf .git && cd .. && mv tempclonedir/{.,}* . && rm -r tempclonedir

Using degit to Clone Single Git Branch

Alternatively you can use degit to make the same task easiert. It’s a Node.js package maintained by Rich Harris, the creator of Svelte.

First install degit globally:

npm install -g degit

Then to do the same as above run the following command:

cd ~/code/new-theme
degit https://github.com/flyntwp/flynt#next

Note: if you are cloning into a new git repo (that already has a hidden .git directory and therefore isn’t empty) you have to append the “–force” parameter.