Dynamic WP Block erstellen

1. Ausgangslage

Ich habe plugin: einhorn-blocks

Ausgangslage plugin einhorn-blocks

in src/file-download

block.json

JSON
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "einhorn-blocks/file-download",
  "version": "1.0.0",
  "title": "File Download",
  "category": "text",
  "icon": "star-filled",
  "description": "",
  "textdomain": "einhorn-blocks",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "attributes": {},
  "supports": {},
  "render": "file:./render.php"
}

index.js

JavaScript
import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import metadata from './block.json';

registerBlockType(metadata, {
  edit: Edit,
  save: () => null,
});

edit.js

JavaScript
import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
  return (
    <div {...useBlockProps()}>
      <p>File Download Block — Editor</p>
    </div>
  );
}

render.php

PHP
<div <?php echo get_block_wrapper_attributes(); ?>>
    <p>File Download Block — Frontend</p>
</div>

package.json

in root

JSON
{
  "name": "einhorn-blocks",
  "version": "1.0.0",
  "scripts": {
    "start": "wp-scripts start --blocks-manifest",
    "build": "wp-scripts build --blocks-manifest",
    "lint:js": "wp-scripts lint-js",
    "lint:css": "wp-scripts lint-style",
    "format": "wp-scripts format",
    "packages-update": "wp-scripts packages-update"
  },
  "devDependencies": {
    "@wordpress/scripts": "^30.14.0"
  }
}

einhorn-blocks.php

muss gleich sein wie plugin Ordnername

PHP
<?php
/**
 * Plugin Name: Einhorn Blocks
 */

defined( 'ABSPATH' ) || exit;

add_action( 'init', function(): void {
    wp_register_block_types_from_metadata_collection(
        __DIR__ . '/build',
        __DIR__ . '/build/blocks-manifest.php'
    );
} );

Block supports hinzufügen

Ich will nun, dass der Block Einstellungen bekommt. Dafür kann ich supports in block.json nutzen. So bekommt der Block UI Controls von Wordpress direkt und ich muss nichts weiter machen. Das geht mit allen verfügbaren supports.

Ich will Farbe und Hintergrundfarbe erlauben für den block. Also passe ich block.json an:

JSON
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "einhorn-blocks/file-download",
  "version": "1.0.0",
  "title": "File Download",
  "category": "text",
  "icon": "star-filled",
  "description": "",
  "textdomain": "einhorn-blocks",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "attributes": {},
  "supports": {
    "color": {
      "text": true,
      "background": true
    }
  },
  "render": "file:./render.php"
}

Damit erscheinen UI Controls für den Block im Editor rechts in der Sidebar. Styles werden automatisch geladen.

Ich will padding noch hinzufügen und Schrifgrössen sollen auch noch gewählt werden können. Meine block.json sieht nun so aus:

JSON
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "einhorn-blocks/file-download",
  "version": "1.0.0",
  "title": "File Download",
  "category": "text",
  "icon": "star-filled",
  "description": "",
  "textdomain": "einhorn-blocks",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./index.css",
  "attributes": {
    "files": {
      "type": "array",
      "default": [],
      "items": {
        "type": "object"
      }
    },
    "buttonLabel": {
      "type": "string",
      "default": "Herunterladen"
    },
    "listType": {
      "type": "string",
      "default": "ul"
    }
  },
  "supports": {
    "color": {
      "text": true,
      "background": true
    },
    "spacing": {
      "padding": true
    },
    "typography": {
      "fontSize": true
    }
  },
  "render": "file:./render.php"
}

Wichtig. Entweder musst du mit npm run build die Änderungen einmalig generieren – oder du nutzt während dem Entwickeln einfach npm run start.

Block attributes hinzufügen

Alles, wofür es intern in WordPress nicht schon eigene UI Controls gibt – muss ich selbst einrichten. Das geht mit attributes.

Die attributes werden im Editor für den Block gesetzt und beim speichern in der Datenbank zum Block abgelegt.