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

Blocks

Hier findest du alles rund um das Theme Blocks

Blocks registrieren

Damit du eigene Blöcke erstellen kannst. Must du eine Entwicklungsumgebung haben. Ich emfehle direkt die Packages von WordPress Team selber. Über NPM sowie der WP CLI kannst du bequem dir alles einrichten.

Vergess nicht beim Enque deiner JavaScript Datei alle Abhängigkeiten zu aktivieren als Array in deiner PHP.

Über JavaScript JSX geht das so:

// Importiere deine Variable / Komponenten
import { __ } from '@wordpress/i18n'; 
import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'blockarchive/blockname', {
    title: __('Blockname'), 
    description: 'Block Beschreibung.',
    category: 'category',
    icon: {
        background: '#deinefarbe',
        foreground: '#deinefarbe',
        src: 'Dashicon',
    },
    keywords: [
        __( 'Suchetag 1' ),
        __( 'Suchetag 2' ), 
        __( 'Suchetag 3' )
    ],
    supports: {
        html: false, 
        align: true
    },
    attributes: {
        deineAttr: {
            type: 'string' 
        }
    }
    edit: () => {
        return(
            <h2>Mein Backend<h2>
        )
    },
    save: ( props ) => {

        return(
            <h2>Mein Frontend<h2>
        )
    }
});
PreviousVisual Studio Code | WP Gutenberg SnippetsNextStandardblocks

Last updated 5 years ago

Was this helpful?