Registrieren Sie eine Blockvorlage für den WordPress-Blockeditor (Gutenberg)

In meinem vorherigen Leitfaden habe ich die Kraft von Blockmustern untersucht. Blockvorlagen sind ähnlich, aber anstatt sich darauf zu verlassen, dass Ihr Kunde Blockmuster in den Editor einfügt, erhalten sie ein vollständiges Layout, sobald sie einen neuen Beitrag einfügen.

Voraussetzungen

• WordPress-Installation
• Code-Editor

Erstellen Sie Ihre Blockvorlage

In diesem Beispiel füge ich dasselbe Blockmuster ein, das ich in meiner vorherigen Anleitung erstellt habe, jedoch als Blockvorlage.

In dieser Anleitung haben wir den HTML-Code der Editor-Ausgabe kopiert. In diesem Leitfaden werden wir etwas anderes machen und eine Reihe von Block-Namespaces, -Eigenschaften und -Inhalten aufbauen.

In seiner einfachsten Form sieht eine Blockvorlage ungefähr so ​​aus:

$block_template = [
  [ 'core/heading', [ 'level'   => 2, 'content' => 'Example Block Template' ] ],
  [ 'core/paragraph', [ 'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.' ] ],
];

Wie Sie sehen können, handelt es sich um ein Array, das Blöcke in folgendem Muster enthält:

• Block-Namespace
• Blockattribute

Wir möchten jedoch verschachtelte Blöcke verwenden, also werden wir einen dritten Parameter an dieses Block-Array übergeben, nämlich die innerBlocks.

Willst du nur die Blockplatzierung?

Beachten Sie, dass Sie die Attribute leer lassen können, um nur die Blöcke ohne festgelegten Inhalt bereitzustellen.

Das Array zum Erstellen desselben Blocks, den wir im Blockmuster-Leitfaden erstellt haben, benötigen wir ein komplexeres Array, etwa so:

$block_template = [
  [
    'core/group',
    [],
    [
      [
        'core/heading',
        [
          'level'   => 2,
          'content' => 'Example Block Template',
        ]
      ],
      [
        'core/paragraph',
        [
          'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.',
        ]
      ],
      [
        'core/columns',
        [],
        [
          [
            'core/column',
            [],
            [
              [
                'core/heading',
                [
                  'level'   => 3,
                  'content' => 'Sub Heading 1',
                ]
              ],
              [
                'core/paragraph',
                [
                  'content' => 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',
                ]
              ],
            ]
          ],
          [
            'core/column',
            [],
            [
              [
                'core/heading',
                [
                  'level'   => 3,
                  'content' => 'Sub Heading 2',
                ]
              ],
              [
                'core/paragraph',
                [
                  'content' => 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',
                ]
              ],
            ]
          ],
        ],
      ],
    ]
  ]
];

Registrieren Sie die Blockvorlage

Registrieren einer Blockvorlage für einen bestehenden Beitragstyp

Um eine Blockvorlage für einen vorhandenen Beitragstyp (z. B. den postBeitragstyp) zu registrieren, können Sie den folgenden Code verwenden, um das Beitragstypobjekt zu überschreiben.

function register_block_template() {

    $post_type_object                = get_post_type_object( 'post' );
    $post_type_object->template      = $block_template;
    $post_type_object->template_lock = 'all';
}
add_action( 'init', 'register_block_template' );

Dieser Code legt einfach die Vorlage und (optional) den [template_lock](https://wholesomecode.ltd/#template-lock)Typ fest.

Der vollständige Code würde so aussehen:

function register_block_template() {
    $block_template = [
      [
        'core/group',
        [],
        [
          [
            'core/heading',
            [
              'level'   => 2,
              'content' => 'Example Block Template',
            ]
          ],
          [
            'core/paragraph',
            [
              'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.',
            ]
          ],
          [
            'core/columns',
            [],
            [
              [
                'core/column',
                [],
                [
                  [
                    'core/heading',
                    [
                      'level'   => 3,
                      'content' => 'Sub Heading 1',
                    ]
                  ],
                  [
                    'core/paragraph',
                    [
                      'content' => 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',
                    ]
                  ],
                ]
              ],
              [
                'core/column',
                [],
                [
                  [
                    'core/heading',
                    [
                      'level'   => 3,
                      'content' => 'Sub Heading 2',
                    ]
                  ],
                  [
                    'core/paragraph',
                    [
                      'content' => 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',
                    ]
                  ],
                ]
              ],
            ],
          ],
        ]
      ]
    ];

    $post_type_object                = get_post_type_object( 'post' );
    $post_type_object->template      = $block_template;
    $post_type_object->template_lock = 'all';
}
add_action( 'init', 'register_block_template' );

Registrieren einer Blockvorlage für einen neuen Beitragstyp

Wenn Sie einen Beitragstyp registrieren, können Sie die Vorlage an das templateArgument von übergeben register_post_type.

Sie können das [template_lock](https://wholesomecode.ltd/#template-lock)Argument auch in übergeben register_post_type.

Vorlagensperre

Das template_lockArgument kann abhängig von dem Argument, das an es übergeben wird, mehrere Dinge tun. Diese sind im Gutenberg-Entwicklungshandbuch wie folgt aufgeführt:

• all— verhindert alle Operationen. Es ist nicht möglich, neue Blöcke einzufügen, vorhandene Blöcke zu verschieben oder Blöcke zu löschen.
• insert— verhindert das Einfügen oder Entfernen von Blöcken, erlaubt aber das Verschieben vorhandener Blöcke.

Die Vorlagensperre funktioniert nicht bei verschachtelten Blöcken

Die Vorlagensperre funktioniert nur bei Blöcken der obersten Ebene. Nutzen Sie dies zu Ihrem Vorteil, indem Sie ein Layout mit festen Überschriften, Bildern und Absätzen und einem Gruppenbereich erstellen, in den Ihr Kunde beliebige Inhalte einfügen kann.

Sie können mit InnerBlocks auch eine benutzerdefinierte verschachtelte Blockvorlage erstellen.

Sie können auch die Blöcke einschränken, die Sie in bestimmte Beitragstypen einfügen dürfen.

Verwenden Sie die Blockvorlage

Um die Blockvorlage zu verwenden, erstellen Sie einfach einen neuen Beitrag (oder einen benutzerdefinierten Beitragstyp, je nachdem, wie Sie die Dinge konfiguriert haben). Die Vorlage wird eingefügt und Sie haben nun feste Inhaltsbereiche auf Ihrer Seite.

Beim Einfügen eines Beitrags wird die Blockvorlage angezeigt

Mit dem folgenden Code können Sie die verfügbaren Blöcke für verschiedene Beitragstypen einschränken.

function filter_allowed_block_types( $allowed_block_types, $post) {

  if ($post->post_type !== 'post') {
    return $allowed_block_types;
  }

  $allowed_block_types = [
    'core/column',
    'core/columns',
    'core/group',
    'core/heading',
    'core/paragraph',
  ];

  return $allowed_block_types;
}
add_filter( 'allowed_block_types', 'filter_allowed_block_types', 10, 2 );

Der obige Code beschränkt die im postBeitragstyp zulässigen Blöcke auf Folgendes:

• Spalte (core/column)

• Spalten (core/columne)

• Gruppe (core/group)

• Überschrift (core/heading)

• Absatz (core/paragraph)

• Brauchen Sie etwas Flexibleres? Versuchen Sie stattdessen, ein Blockmuster zu registrieren

• Benötigen Sie etwas, das für untergeordnete Blöcke gilt? Versuchen Sie , eine InnerBlocks-Vorlage zu registrieren