Dynamic blocks

My first server-side-rendered block

    Inhaltsangabe
  1. Dynamic blocks
  2. What I want to realize

What a weather today .. Sometimes it’s snowing … Sometimes raining …

I will program my first dynamic block today.

Dynamic blocks

Dynamic blocks are blocks that are rendered server-side. This means that they are not rendered by the client. They are programmed via php and then created by the server and sent to the client.

The only question that arises to me is why they should still be programmed with php. I thought with the introduction of Gutenberg WordPress wants to get as far away as possible from php.

What I want to realize

Currently I have on the start page of my blog the block “Last posts”. This is a WordPress standard block, which is not nicely displayed. I would like to display the last posts including the thumbnail, tags, date and an excerpt. The tags should also be clickable so you can get to the archive page of each day with a single click.

Currently my homepage looks like this.

With a little more experience, I could then decide which blocks have to be programmed with what kind of rendering (server or client side). After a lot of work I have finished programming my block. It looks like this:

All that’s missing is that the tags are clickable. I’ll finish that later. First, I want to give this block a title option.
I have attached the plugin with a preconfigured Grunt instance so you can test and change it in a working version:

Do not be surprised that the css file is so messed up. I hadn’t time to bend it right now. Here’s a comparison:

Topics

css Gutenberg Javascript php technology WordPress

Beitrag teilen

WhatsApp it

Folgen Sie uns