LogoLogo
Official HandbookGutenberg Generatortheme.json Generator
  • Gutenberg WordPress Handbuch
  • Erweiterungen
    • Visual Studio Code | WP Gutenberg Snippets
  • Blocks
    • Standardblocks
    • Snippets
  • Icons
    • WordPress Dashicons
    • FontAwesome 5 Icons
    • Eigene SVG Icons
  • Plugins & Supports
    • Block Picker Preview
    • Block Pattern
    • Option Settings
    • Custom Styles
    • Transform
    • Templates
    • Theme Support
    • Vordefinierte Farben
    • Gutenberg Block Kategorie
    • Vorhandene Blöcke bearbeiten
  • Components
    • Color Component
    • Color Palette – CSS Variablen in Gutenberg
    • Farbverlauf – Component
    • Post Picker
    • Toolbar
    • Innerblocks
    • React Hinweise
    • Redux | React
  • Kontakt & Impressum
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Plugins & Supports

Transform

Falls du deinen Block umwandeln möchtest, kannst du diese Funktion verwenden...

PreviousCustom StylesNextTemplates

Last updated 5 years ago

Was this helpful?

Bei Gutenberg sieht man oft das Umwandeln Tool beim Auswählen eines Blocks. Diese Funktion macht die Arbeit in Gutenberg unheimlich effizient für die Redaktion.

Let's code!

Innerhalb deines Blocks fügst du diese Zeilen Code hin. Danach erkläre ich dir das Schritt für Schritt.

// Dependencies 
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n'; 
import { TextControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';

// Füge dies innerhalb deiner registerBlockType() Funktion hinzu
 transforms: {

    // Anderen Block in unseren jetzigen umwandeln.
    from: [
        {
            type: 'block',
            blocks: [ 'core/paragraph', 'core/heading' ],

            transform: ( { content } ) => {
                return createBlock( 'prwp-blocks/transform', {
                    headline: content
                } );
            },
        },

        // Shortcut erstellen / Space(Leerzeichen) danach drücken
        {
            type: 'prefix', 
            prefix: '#prwp', 
            transform: ( ) => {
                return createBlock( 'prwp-blocks/transform');
            }
        }
    ], 

   // Jetzigen Block in einem anderen Block umwandeln
   to: [
        {
            type: 'block',
            blocks: [ 'core/heading'],
            transform: ( { headline } ) => {
                return(
                    createBlock( 'core/heading', {
                        content: headline
                    })
                )
            },
        }
    ]
 },

Bei dieser Funktion kannst du den Zustand aller Blöcke beeinflussen und deinen jetzigen Block quasi registrieren. Die sogenannten Namespaces habe ich dir alle unter definiert. Innerhalb des Codes kannst du gerne die Kommentare lesen, die dir das Lesen erleichtert.

Standardblocks
Hier ein Beispiel vom sogenannten Transform Tool