Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Meine offizielle entwickelte Plugins für deine IDE.
Hier eine kleine Icon Sammlung, welche dir bei der Entwicklung weiterhelfen wird.
Dies ist mein eigenes WP Gutenberg Handbuch zum neuen WordPress Editor. Hier in dieser Dokumentation möchte ich mein Wissen mit dir teilen.Hinweise: Benutze "Oben links" die Suche, um nach Funktionen.
Was möchte ich dir hier zeigen
Ich weiß, dass die WordPress Gutenberg Dokumentation ziemlich schrecklich ist und manchen Entwickler nicht wirklich ans Ziel bringt. Bitte dennoch schau regelmäßig auf der offiziellen Seite nach, um Up-To-Date zu bleiben.
Hier geht es zur WordPress Gutenberg Dokumentation!
Im Gutenberg Editor ändern sich andauert neue Dinge, die die Entwicklung schwieriger machen als es sein muss. Ich habe mir in den letzten Wochen viel Zeit für Nachforschung genommen, damit die verzweifelten Entwickler endlich Hilfe kriegen.
In dieser Dokumentation schauen wir uns folgende Dinge an:
Erweiterte Funktionen und deren richtige Anwendung in JSX
JSX Basis ( Conditionals, Ausgaben, Schleifen ... )
Dynamic Blocks / Erweitert
Gutenberg Blöcke wurden unerwartet bearbeiten ( Lösung)
Mit React richtig arbeiten
React Plugins & Components aus der Community in WP anwenden
Und extrem vieles mehr
Derzeit implementiere ich alle nötigen Snippets von Gutenberg in einem Plugin. Installiere dir dafür schon mal Visual Studio Code! Dieser Editor ist meiner Meinung nach extrem gut geworden. Atom und co. können da einpacken :D
Gutenberg erweitern? Kein Problem
Hier findest du alles wichtige rund um Components.
Hier eine Snippet Sammlung für den Gutenberg Editor
Hier werden alle Blöcke angezeigt, welche du bisher registriert hast sowie die Standardblöcke. Dies kannst du bequem über eine Zeile Code rauslesen.
wp.data.select( 'core/blocks' ).getBlockTypes();Falls du auf der jetzigen Seite/Beitrag bist und nur von dieser Seite die verwendeten Blöcke benötigst, führe ganz einfach diese Zeile Code aus in der Console natürlich.
Falls du im Backend auf der jetzigen Seite oder Beitrag die PostType herausfinden möchtest im Code und damit später Conditionals zu erstellen also IF() ... und so weiter, kannst du dieses Snippet verwenden:
Falls du einen Block deaktivieren möchtest, dann kannst du dies so tun.
Hier findest du alles rund um das Theme Blocks
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:
Hier eine kurze Anleitung bezüglich SVG Files in Gutenberg.
Falls du ein Icon in Gutenberg einbauen möchtest, ist es empfohlen dies als Funktion abzuspeichern, um sie dann in anderen Dateien zu importieren zu können.
Wichtig ist, dass das SVG JSV konform ist. Dafür gibt es einen tollen Generator, der wirklich das abdeckt und dir ein sauberes kompatibles SVG liefert.
POWER von Gutenberg. Standard Templates mit vordefinierten Blöcken beim Erstellen anzeigen
Falls du pro Post Type deine eigenen vordefinierten Blöcke schon beim Erstellen einfügen möchtest, kannst du dies mit den Gutenberg Templates anpassen. Hinweis: Diese Funktion ist noch experimentell!
Diese Funktion wird demnächst ziemlich erweitert werden, sodass man sogar ein Vorschaubild pro Template bekommen wird. Dazu aber bald mehr.
Falls du deinen Block umwandeln möchtest, kannst du diese Funktion verwenden...
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.
Innerhalb deines Blocks fügst du diese Zeilen Code hin. Danach erkläre ich dir das Schritt für Schritt.
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.
Standard Dinge, die dein Theme erfüllen sollte ...
Damit dein Gutenberg Theme das volle Potenzial unterstützen kann, kannst du zu deinem Theme Support folgende Einstellungen mittels PHP aktivieren.
Du möchtest eine Farbpalette für dein Theme vorgeben? Dann kannst du dies mit dieser PHP Funktion tun:
UX verbessern im Backend Dank der Toolbar. Leicht und universal einsetzbar.
Nehmen wir mal an du möchtest innerhalb der Toolbar die Möglichkeit anbieten direkte Funktionen mit einem Klick bedienbar machen. Dann eignet sich hier die hauseigene Gutenberg Toolbar an. Einfach und extrem schnell umsetzbar.
Damit wir loslegen können, musst du vor der Register Funktion einfach nur dieses Snippet einfügen.
// 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>
)
}
});function prwp_gutenberg_portfolio_template() {
$postTypeTemplate = get_post_type_object('page');
$postTypeTemplate->template = array(
array('core/heading', array(
content => 'Ich bin eine dynamische Ãœberschrift!'
)),
array('core/paragraph', array(
content => 'Ich bin ein dynamischer Text.'
)),
array('core/freeform', array(
content => 'Text im Classic Editor'
)),
array('prwp-blocks/portfolio-listing', array(
align => 'full'
))
);
}
add_action('init', 'prwp_gutenberg_portfolio_template'); ); // Delete Custom Font Sizes
add_theme_support('disable-custom-font-sizes');
// Delete Custom Colors
add_theme_support( 'disable-custom-colors' );
// Add Editor Style
add_theme_support('editor-styles');
// Add Block Style Support
add_theme_support( 'wp-block-styles' );
// Responsive Embeds (Youtube etc.)
add_theme_support( 'responsive-embeds' );
// Add Theme Support for Content Sizes -> Full etc.
add_theme_support( 'align-wide' );
// Content Width Define
if ( ! isset( $content_width ) ) {
$content_width = 1024;
}function gutenberg_modul_category( $categories, $post ) {
// Add Category
return array_merge(
array(
array(
'slug' => 'meineblocks',
'title' => 'POWER + RADACH Blocks'
'icon' => 'wordpress'
),
),
$categories
);
}
add_filter( 'block_categories', 'gutenberg_modul_category', 10, 2 );import { prwp_icon } from './icon';
// Set Icon to Block Category PR Module
wp.blocks.updateCategory('prwpblocks', {
icon: prwp_icon
});function prwp_setup_theme_supported_features() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'strong magenta', 'themeLangDomain' ),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => __( 'light grayish magenta', 'themeLangDomain' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => __( 'very light gray', 'themeLangDomain' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => __( 'very dark gray', 'themeLangDomain' ),
'slug' => 'very-dark-gray',
'color' => '#444',
),
) );
}
add_action( 'after_setup_theme', 'prwp_setup_theme_supported_features' );Gutenberg hat schon eine interne SVG Function, die du verwenden kannst: Weitere Informationen findest du in der offiziellen Doku. Hier geht es zur Doku!
import { G, Path, SVG } from '@wordpress/components';
const MyIcon = () => (
<SVG
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path fill="none" d="M0 0h24v24H0V0z" />
<G>
<Path d="M20 4v12H8V4h12m0-2H8L6 4v12l2 2h12l2-2V4l-2-2z" />
<Path d="M12 12l1 2 3-3 3 4H9z" />
<Path d="M2 6v14l2 2h14v-2H4V6H2z" />
</G>
</SVG>
);export function icon() {
/*
* Define inline CSS to the Icon
*/
let styles = {
margin : '0 10px',
width : '20px',
height : '20px'
};
/*
* Return SVG Image with inline CSS
* SVG to JSX Compiler: https://svg2jsx.herokuapp.com
* Use the attribute style={styles} to return all css defin.
*/
return (
<svg style={styles} viewBox="0 0 24 24">
<Path fill="none" d="M0 0h24v24H0V0z" />
<G>
<Path d="M20 4v12H8V4h12m0-2H8L6 4v12l2 2h12l2-2V4l-2-2z" />
<Path d="M12 12l1 2 3-3 3 4H9z" />
<Path d="M2 6v14l2 2h14v-2H4V6H2z" />
</G>
</svg>
);
}Damit wir nun den Button mit Klick Funktion anpassen können, kannst du ganz einfach innerhalb des Return Befehls dies reinsetzen. Mantel diesen Code am besten mit einem Fragment oder der Kurzschreibweise <> .... </>
Wichtig ist nur, dass du dir die Attribute angelegt hast und mit denen wie gewohnt arbeitest. React Verständnis wird hier erwartet.
Done! That's it :)
import { MediaUpload, BlockControls } from '@wordpress/block-editor';
import { Toolbar, IconButton } from '@wordpress/components';<BlockControls>
<Toolbar>
<MediaUpload
onSelect = { ( image ) => { setAttributes( { image: image.url } ) } }
value={ attributes.image }
render={ ( { open } ) => (
<IconButton
icon="edit"
onClick={ open }
/>
) }
/>
</Toolbar>
</BlockControls>wp.data.select('core/block-editor').getBlocks();wp.data.select('core/editor').getCurrentPostType();// 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
})
)
},
}
]
},Neue Block Preview Ansicht – Beispiel Inhalte generieren in der Vorschau
Seit der neuen Version von Gutenberg wurde der Gutenberg Block Picker öfters überarbeitet. Diesmal gibt es eine Block Preview, die man als Entwickler zusätzlich noch anpassen kann. Diese Funktion ist optional, allerdings empfohlen!
Denn durch die Vorschau weiß der Redakteur direkt bescheid, was für ein Block derzeit ausgewählt wurde.
Diese Funktion ist abhängig von deinen Attributen. Diese musst du einfach erneut innerhalb dem example Befehl auflisten und einen Vorschau Inhalt eingeben. Hier ein Beispiel:
wp.domReady( function() {
wp.blocks.unregisterBlockType( 'core/verse' );
} );Hinweis: Dies ist keine offizielle Doku von WordPress. Dies ist eine Sammlung meiner persönlichen Erfahrungen und Learnings.
Angaben gemäß § 5 TMG
Benjamin Zekavica
Hinweis: Rein private Webseiten sind zunächst von der Impressumspflicht ausgenommen. § 5 TMG spricht von geschäftsmäßigen Online-Diensten, die eine Anbieterkennzeichnung benötigen. Auch § 55 RStV geht davon aus, dass bei Webseiten, die ausschließlich persönlichen oder familiären Zwecken dienen, kein Impressum notwendig ist. (Quelle)
Da die Website ausschließlich meine private Portfolioseite ist und ich ausschließlich die Seite zur Präsentation meiner kostenlosen Werke dient und ich mit der Website kein Geld verdiene, wird laut deutschem Recht kein Impressum mit einer Adresse benötigt.
Kontakt
E-Mail: [email protected]
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.
Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
$classname | Gebe hier die CSS Klasse, die dann mit is-style concat. wird
String
$label | Dieses Label wird im Backend angezeigt
String
Falls du dies nicht als Funktion extern haben möchtest, kannst du innerhalb vom der RegisterBlockType Funktion zum Beispiel unter den Attributen diesen Code Block einfügen.
Mittels diesem Befehlen kannst du einen Standard definieren und dieser wird automatisch ausgewählt. Pro Objekt Branch kannst einen CSS/HTML Klasse definieren und einen Label angeben, welcher dann im Backend angezeigt wird.
Falls du einen Style entfernen möchtest, kannst du dies so tun:
Weitere besonderen Filter Methoden findest du übrigens hier: Gutenberg Handbook
Name & Hinweise
Type
$blockname | Gebe den Namespace von deinem Block an
String
// Globale Funktion wird geschrieben
function StyleGutenbergRegister( $blockname , $classname, $labelname) {
wp.blocks.registerBlockStyle( $blockname, {
name: $classname,
label: $labelname
});
}
// Funktion wird aufgerufen und Parameter werden mitgegeben
StyleGutenbergRegister( 'prwp-blocks/featureblock', 'dotted', 'Gepunktet'); styles: [
{
name: "prwp__bg--default",
label: __("Hintergrund Weiß"),
isDefault: true
},
{
name: "prwp__bg--grey",
label: __("Hintergrund Grau")
},
{
name: "prwp__bg--yellow",
label: __("Hintergrund Gelb")
}
],isDefault: true// Erster Parameter: Namespace des Blocks mit dem Style
// Zweiter Parameter: Style Name
wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
// Falls React dies nicht erkennt, verwende die DomReady Funktion
wp.domReady( function() {
wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
} );That's it! Easy und vor allem schnell erledigt. Allerdings sobald Ihr den Block auswählt, werden die Inhalte dann im Bearbeitungseditor nicht angezeigt. Diese Inhalte sind ausschließlich für die Vorschau gedacht.
import './style.scss';
// Import Components
import attributes from './globals/attributes';
import edit from './globals/edit';
// WP Packages
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
// // Add Repeater Field
registerBlockType( 'prwp-blocks/iconpicker', {
title: __('Icon Picker'),
description: 'Dies ist ein Iconpicker.',
category: 'prwpblocks',
icon: {
background: '#f0dd00',
foreground: '#222832',
src: 'star-half',
},
keywords: [
__( 'iconpicker' ),
__( 'icon' ),
__( 'dashicon' )
],
supports: {
html: false
},
attributes,
example: {
attributes: {
choosedIcon: 'fas fa-check',
iconAlign: 'center',
iconColorHex: '#f0dd00',
iconFontSize: 50,
iconContentsToggle: true,
iconContentHeadline: 'Hallo Welt',
iconContentDesc: 'Lorem Ipsum dolor sit amet'
}
},
edit,
save: ( props ) => {
return null
}
});Zunächst importieren wir uns die Komponenten aus Gutenberg, die wir benötigen:
Dann erstellen wir neue Attribute, wo wir dann die Werte speichern könne
const { ColorPalette } = wp.blockEditor;
const { PanelBody } = wp.components;
const { InspectorControls } = wp.editor;
/* Falls mal keine Standardfarben aus dem globalen Setting haben möchte, kann man
das verwenden */
const { ColorPalette } = wp.components;Mit der neuen Gutenberg Funktion, könnt Ihr vordefinierte Blöcke anbieten und den Redakteuren dabei helfen noch schneller Inhalte einzupflegen.
Hinweis: Diese Funktion ist derzeit noch in Entwicklung. Diese Funktion ist derzeit im Gutenberg Plugin und wird in der WordPress Version 5.5 final im Code verfügbar sein. In der neuen Gutenberg Plugin Version wurden die Block Pattern vorgestellt. Hier handelt es sich um vordefinierte Blöcke, die man mit einem Klick hinzufügen kann und dann ausschließlich den Inhalt zu bearbeiten. Die Funktion ist ähnlich wie die wiederverwendbare Blöcke. Hat allerdings ein paar Nachteile, die bald aber behoben und noch erweitert werden.
Als Entwickler möchte man natürlich alle vordefinierten Blöcke entfernen, um den Kunden ausschließlich die entwickelten Blöcke anzeigen. Hier habe ich ein kleines Skript geschrieben, die alle derzeitigen Blöcke von der Leiste entfernt. Ihr könnt diese natürlich optional anpassen, falls Ihr ein paar Blöcke noch in der Sidebar lassen wollt. Schreibt diesen Code einfach in eurer functions.php oder in eurem Plugin.
Natürlich möchte man auch neue Styles hinzufügen, deswegen bietet WordPress diese tolle PHP Funktionen an, die das Leben deutlich angenehmer machen.
Durch die register_pattern PHP-Funktion können wir ab sofort neue Vorlagen definieren. Die Ansicht wird automatisch aus dem Content Bereich verarbeitet.
Als Parameter werden ein String mitgegeben und ein Array. Innerhalb vom Array vergibt man den Label und unter Content den Inhalt, der vom Editor kommt.
Damit man natürlich eine Vorlage hat, müssen wir diese erst in Gutenberg erzeugen. Sobald man die Blöcke hinzufügt hat klickt man oben auf die drei Punkte und zum Code-Editor.
Dort kopiert man anschließend den Code, der im Editor sieht.
Anschließend gehen wir zu dieser Website:
Gebe dort den Code auf der linken Seite ein und auf der rechten Seite wird der finale Code generiert, der die gesamten Strings nochmal PHP konform umwandelt. Gebe den Code nun in der PHP Funktion ein. Und wir sind fertig. Klicke anschließend auf den Blockpattern und wähle deinen erstellten Block Pattern aus und er wird direkt zu deinem Arbeitsbereich hinzufügt.
Weitere Informationen findest du hier:
Um die Daten vom Editor zu speichern, verwendet WordPress nun Redux, ein Framework für React. Dort sind die sogenannten "States" alles abgespeichert.
Color Component mit CSS Variablen unterstützen.
Die Idee mit den CSS Variablen vereinfacht viele Entwicklern das Leben. Damit man nun als Entwickler das volle Potenzial von WordPress Gutenberg rausholen kann, kann man eine Palette von Standardfarben in WordPress definieren durch die sogenannten Theme Supports.
Falls du die Variante mittels CSS Variablen für dein Theme ausgewählt hast, bist du auf der sicheren Seite. Mittels ein paar neuen Befehlen kannst du das volle Potential aus Gutenberg rausholen.
Einfach in deiner CSS folgende CSS Regel kopieren und die Namen sowie die Werte austauschen und nach Belieben anpassen.
example: {
attributes: {
choosedIcon: 'fas fa-check',
iconAlign: 'center',
iconColorHex: '#f0dd00',
iconFontSize: 50,
iconContentsToggle: true,
iconContentHeadline: 'Hallo Welt',
iconContentDesc: 'Lorem Ipsum dolor sit amet'
}
}attributes: {
color: {
type: 'string'
}
} <Fragment>
<InspectorControls>
<PanelBody title="Farben" initialOpen={ true }>
<ColorPalette
className="bz__colors-palette"
color={ props.attributes.color }
onChange={ ( color ) => {
props.setAttributes( {
color: color
});
}}
/>
</PanelBody>
</InspectorControls>
<h4 style={ { color: props.attributes.color } }>
Headline
</h4>
</Fragment>Das Package "wp.data" wird standardmäßig von Gutenberg mitgeliefert. Dort findest du viele weitere Funktionen, um die Aktionen von Gutenberg zu managen.
Als erstes importieren wir uns die Funktion dispatch von dem Package "wp.data".
Mit dieser Funktion können wir die States verändern bzw. manipulieren.
Von der Konsole aus kann man dieses Script verwenden:
wp.data.dispatch('core/edit-post').openGeneralSidebar();
Von der Konsole aus kann man dieses Script verwenden:
wp.data.dispatch('core/edit-post').openGeneralSidebar('edit-post/document')
In React wird in einem Class Component ein State Objekt geschrieben mit Zuweisungen. Diese dienen als Default zum Arbeiten. Beispiel: HeadlineActive: false
WordPress bietet diese Funktion auch direkt im Core an und diese heißt WithState. Die Schreibweise ist etwas seltsam, aber zum effektiven Arbeiten lohnt sich dies. Ich persönlich arbeite direkt mit den internen WordPress Attributen. Diese sind in meiner Meinung nach effektiver, weil WordPress ständig Revisionen machen und alle Eingaben direkt speichert. Dies kann natürlich auf Zeit so einigen Datenmüll erzeugen. Aber dafür gibt es gute WordPress Cleaning Tools. Aber dafür freuen sich die User, falls der PC ausging oder der Browser abstürzt die geschriebenen Inhalte immer noch da sind. Hier ein Beispiel mit WithSate:
in CSS gibt es die Funktion var() und innerhalb der Funktion gibst du als Parameter eine CSS Variable ein. Hier ein Beispiel:
Neben der Color Palette gibt es auch den Farbverlaufs Component. Dort kann man auch einen vordefinierten Farbverlauf anlegen oder auch mittels den Theme Supports eine Standardfarbe auswählen. In einem anderen Beitrag wird deutlich erklärt, wie man in React das Color Palette einfügt z.B. in den Inspector Controls. In dieser Doku behandeln wir ausschließlich nur CSS Variablen Default in Gutenberg für WordPress.
Öffne deine functions.php und füge folgenden Code ein:
Wenn du alles gemacht hast, vergewissere dich vorher, dass du deinen Browser Cache gelöscht hast, falls du die CSS nachträglich geändert hast. Und Tadaaa...
Wie man in der PHP sieht ruft man einfach unter color direkt die CSS Variable raus und es klappt.
:root {
--maincolor: #ad000c;
--secound-color: #15c151;
--grey: #dadada;
--white: #ffffff;
--black: #000000;
}Most Powerful Component | Dynamische Ausgabe
Falls man Elemente und der gleichen einfach wie möglich Wiederholungen von Blocks vornehmen möchte, gibt es da seitens Gutenberg eine geniale Funktion. Diese heißen Innerblock. Am meisten zu erkennen an diesem Zeichen
Hier ein Beispiel eines Sliders. Wir haben hier einen Slider Innerblock. Mithilfe der Innerblocks bauen wir die einzelnen Slides aus. Zwar ist die Lösung etwas für den User irritierend, dafür ist das ein klassisches WordPress Standard.
Möchte man für den Slider eigene Innerblocks Items erstellen, die dann nur erscheinen, wenn man tatsächlich sich im Eltern Block befindet, kann man die Parent Funktion von Gutenberg nutzen. Hier ein Beispiel. Hier verwendet man das Attribut allowedBlocks, um spezifische Blöcke einfügen zu können. In meinen Fall nehme ich mein Child Block.
Im Child Block setzt man einfach innerhalb der Register Funktion einfach diese neue Angabe hinzu:
Da in Gutenberg gerne die Dynamic Blocks verwendet werden, um die Problematik seitens der Save Methode in Gutenberg zu umgehen, kann man diese ganz einfach innerhalb der Dynamic Blocks verwenden.
Hier muss man zusätzlich innerhalb dem Render Callback einen zweiten Parameter mitgeben, damit die Innerblocks automatisch eingefügt werden. Man braucht keine Foreach oder der Gleichen.
Einfach $content als Parameter in der Funktion anhängen und innerhalb des OB_CleanUps einfach dann mit echo ausgeben. Und ihr seid fertig :)
Das schöne ist an dieser Methode: Es funktioniert ohne Probleme! Einen normalen Repeater wäre da besser gewesen bei einem einzigen Block. Allerdings so kommt man auch ans Ziel.
Der neue WordPress Editor basiert auf React von Facebook. Damit dir die Entwicklung in Gutenberg leichter fällt, solltest du diese Hinweise mal durchlesen.
Das Fragment ist in teilen von WordPress teilweise nicht nötig. Allerdings sobald du mehrere DIV Container sowie Elemente und Komponenten verwenden möchtest, wird man ohne das Fragment nicht herumkommen.
Eine Methode ist nach einem TAG immer ein , Komma zu setzten, dann klappt es hervorragend.
In Gutenberg gibt es dafür extra ein Komponent.
import { Fragment } from '@wordpress/element';
Du musst ganz einfach den Tag <Fragment> öffnen und deinen Inhalt bzw. Komponenten schreiben und dann wie in HTML wieder schließen.
Seitens React gibt es auch eine noch einfachere Lösung. Es basiert auf der Ebene, wie bei Gutenberg allerdings ohne einen richtigen TAG Name. Hier ein Beispiel:
Normale Fragment Variante:
Wenn du die Standard Variante von WordPress verwenden möchtest und nicht direkt das React Component, dann solltest du diese Möglichkeit verwenden.
import { Component } from '@wordpress/element';
Wenn du die Core Blöcke bearbeiten möchtest, ohne deren Quellcode anfassen zu müssen, kannst du mit den React WordPress Hooks arbeiten.
Als Erstes müssen wir wissen welchen Block wir bearbeiten wollen und welche Einstellungen wir extra benötigen. Wie gewohnt funktioniert das Hook System von React wie damals in PHP.
Diese Methode mit dem Extend wird Dank dem React HighOrderComponent ermöglicht. Weitere Informationen findest du hier.
import { dispatch } from '@wordpress/data';<Button onClick={ ( event ) => { dispatch('core/edit-post').closeGeneralSidebar() } }>
Sidebar schließen
</Button><Button onClick={ ( event ) => { dispatch('core/edit-post').openGeneralSidebar('edit-post/document') } }>
Sidebar öffnen
</Button>import { CheckboxControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';
const MyCheckboxControl = withState( {
isChecked: true,
} )( ( { isChecked, setState } ) => (
<CheckboxControl
heading="User"
label="Is author"
help="Is the user a author or not?"
checked={ isChecked }
onChange={ ( isChecked ) => { setState( { isChecked } ) } }
/>
) );.test {
background-color: var(--maincolor);
}add_theme_support(
'editor-color-palette', [
[
'name' => 'Hauptfarbe',
'slug' => 'primary-color',
'color' => 'var(--maincolor)'
],
[
'name' => 'Sekundärfarbe',
'slug' => 'secound-color',
'color' => 'var(--secound-color)'
],
[
'name' => 'Grau',
'slug' => 'grey',
'color' => 'var(--grey)'
],
[
'name' => 'Weiß',
'slug' => 'white',
'color' => 'var(--white)'
],
[
'name' => 'Schwarz',
'slug' => 'black',
'color' => 'var(--black)'
]
]
);// Pattern alle entfernen
function prwpRemovePattern() {
unregister_pattern( 'core/text-two-columns' );
unregister_pattern( 'core/two-buttons' );
unregister_pattern( 'core/cover-abc' );
unregister_pattern( 'core/two-images' );
unregister_pattern( 'core/hero-two-columns' );
unregister_pattern( 'core/numbered-features' );
unregister_pattern( 'core/its-time' );
}
add_action( 'init', 'prwpRemovePattern' );// Add Pattern
function prwpAddPattern(){
if ( function_exists( 'register_pattern' ) ) {
register_pattern(
'prwp/powerteaser',
array(
'title' => 'POWER – Teaser',
'content' => "<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:cover {\"url\":\"http://localhost:8888/gutenberg/wp-content/uploads/2018/08/schublade-teaser.jpg\",\"id\":17,\"dimRatio\":90,\"minHeight\":637,\"minHeightUnit\":\"px\",\"gradient\":\"vivid-green-cyan-to-vivid-cyan-blue\",\"className\":\"alignwide\"} -->\n<div class=\"wp-block-cover has-background-dim-90 has-background-dim has-background-gradient alignwide\" style=\"background-image:url(http://localhost:8888/gutenberg/wp-content/uploads/2018/08/schublade-teaser.jpg);min-height:637px\"><span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background\"></span><div class=\"wp-block-cover__inner-container\"><!-- wp:heading {\"align\":\"center\"} -->\n<h2 class=\"has-text-align-center\">Hallo Welt</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"left\",\"fontSize\":\"normal\"} -->\n<p class=\"has-text-align-left has-normal-font-size\">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"fontSize\":\"normal\"} -->\n<p class=\"has-normal-font-size\">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover --></div></div>\n<!-- /wp:group -->",
)
);
register_pattern(
'prwp/icons',
array(
'title' => 'POWER – Icons',
'content' => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:prwp-blocks/iconpicker {\"choosedIcon\":\"fab fa-wordpress-simple\",\"iconColorHex\":\"#a8a000\",\"iconFontSize\":100,\"iconContentsToggle\":true,\"iconContentHeadline\":\"Hallo Welt\",\"iconContentDesc\":\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat\"} /-->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:prwp-blocks/iconpicker {\"choosedIcon\":\"fab fa-wordpress-simple\",\"iconColorHex\":\"#a8a000\",\"iconFontSize\":100,\"iconContentsToggle\":true,\"iconContentHeadline\":\"Hallo Welt\",\"iconContentDesc\":\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat\"} /--></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:prwp-blocks/iconpicker {\"choosedIcon\":\"fab fa-wordpress-simple\",\"iconColorHex\":\"#a8a000\",\"iconFontSize\":100,\"iconContentsToggle\":true,\"iconContentHeadline\":\"Hallo Welt\",\"iconContentDesc\":\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat\"} /--></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->"
)
);
}
}
add_action( 'init', 'prwpAddPattern' );<Fragment>
<h2>Dein Inhalt</h2>
</Fragment> <React.Fragment>
<h2>TestInhalt</h2>
</React.Fragment> <> //Das ist dein Fragment!
<h2>TestInhalt</h2>
</> //Fragment Ende So jetzt wissen wir welche Attribute verfügbar sind. Mit diesen können wir ganz einfach weiterarbeiten. Damit ich aber eine neue Attribute hinzufügen kann, muss ich folgendes tun, damit meine Änderungen gespeichert werden.
Importiere dir alle Dependencies
2. Code anpassen & Block zuweisen | blocks.registerBlockType
Jetzt können wir schon experimentieren im Backend. Hier musst du ebenfalls einen Hook aktivieren und mit denen weiterarbeiten. Mit dem Hook editor.BlockEdit kannst du die gesamte Ansicht im Backend manipulieren.
In dem HighOrderComponent musst du zwingend einen Parameter mitgeben, sonst werden die anderen Inhalte vom Core Block nicht extended! Danach musst du einfach an einer Stelle deiner Wahl den Inhalt kopieren mittels JS.
Hier zur Verdeutlichung:
Damit wir die Save Funktion überschreiben können wird empfohlen hier Dynamische Blöcke zu verwenden. Hier ist es ziemlich einfach, quasi das selbe Spiel wie man gewohnt ist von den Dynamic Blocks. Wichtig ist, dass man weiß, wie die Attribute heißen. Den Code Snippet findest du ganz oben ausführlich erklärt.
Und wir sind fertig :)
wp.data.select('core/block-editor').getBlocks();Neben dem Color Picker und Color Palett gibt es seit der neuen WordPress Version sogar ein Farbverlauf Component. Dieser ermöglicht dir Farbverläufe zu erstellen innerhalb vom Gutenberg Editor.
Vorerst sei gesagt, diese Funktion ist noch WIP. Allerdings ist es tatsächlich schon im WordPress Core drin. Also können wir erstmal ohne Bedenken verwenden. In diesem Tutorial wollen wir folgendes schaffen.
Sieht auf jeden Fall nicht kompliziert aus, allerdings dies zu entwickeln braucht man tatsächlich etwas Gutenberg Erfahrung. Allerdings bietet die Funktion einfache Parameter an, die man als Gutenberg Entwickler schon weiß.
Als erstes registrieren wir einen neuen Block und geben folgende Attribute mit:
Als erstes müssen wir das Component importieren. Es liegt leider nicht unter wp.components, sondern unter wp.blockEditor.
Die Funktion die wir brauchen heißt: __experimentalGradientPicker allerdings ist es wie bereits erwähnt eine Testvariante im WordPress Core. Damit ich allerdings übersichtlich damit arbeiten kann, habe ich den Schlüsselbegriff "as" eingegeben, sodass ich einen eigene Funktionsnamen vergeben kann. In diesem Fall habe ich es GradientPicker genannt.
Innerhalb der Return Funktion rufe ich dann im React DOM die Funktion.
Wie man hier sieht sind hier die bekannten Parameter von Gutenberg & React wiederverwendet. Mit ClassName kann man eine individuelle Klasse vergeben und beim value sind die gespeicherte Attribute, wo tatsächlich der fertige Background CSS Code vom Farbverlauf hinterlegt wurde.
Beim OnChange holen wir uns vom Event, sobald der User einen Farbverlauf ausgewählt hat die gesamten Werte und speichern es in dem Attribut.
Der Befehl disableCustomGradients kann angegeben werden, wenn man tatsächlich keine eigene Farbverläufe bearbeiten möchte. Somit hat der User keine Erlaubnis dazu.
Der Befehl clearable ist einfach ein Button, der angezeigt wird, wenn man alle Einstellungen zurücksetzten möchte.
Natürlich kann man auch globale Einstellungen vornehmen und die in der Palette anbieten. Es handelt sich hier wieder um einem Theme Support, der im Theme oder im Plugin aktiviert werden kann. Der Befehl wäre editor-gradient-presets
Auch hier handelt es sich wieder um einem Theme Support Befehl. Hier kann man bestimmen, wenn man eigene Verläufe anpassen möchte. Der Befehl heißt disable-custom-gradients
Hier ein Beispiel, wie man dann die Farbverläufe anpassen kann.
Da im Attribut der CSS Code tatsächlich hinterlegt wurde, kann man ihm dann als inline CSS Attribut ausgeben.
WordPress liefert von Haus aus schon direkt Komponenten an denen man sich bedienen kann. Hier habe ich ausführlich alle mal aufgelistet.
import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';function spacerAttr( props ) {
if( props.name === 'core/spacer' && props.hasOwnProperty('attributes') ){
// Add Attr -> Diver
props.attributes.trenner = {
type: 'boolean',
default: false
};
}
return props;
}
wp.hooks.addFilter('blocks.registerBlockType', 'prwp/spaceractive', spacerAttr );<BlockEdit { ...props } />const override = createHigherOrderComponent( ( BlockEdit ) => {const override = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
if ( 'core/spacer' === props.name ) {
return(
<Fragment>
<section className={ props.attributes.trenner === true ? 'prwp-gutenberg-trenner--open' : 'prwp-gutenberg-trenner' }>
<BlockEdit { ...props } />
</section>
<InspectorControls>
<PanelBody title="Trennlinie">
<p>
<small>
Wollen Sie eine Trennlinie sichtbar machen?
</small>
</p>
<ToggleControl
label="Trennlinie aktivieren"
checked={ props.attributes.trenner }
onChange={ ( boolean ) => {
props.setAttributes({
trenner: boolean
});
}}
/>
</PanelBody>
</InspectorControls>
</Fragment>
)
}
return(
<Fragment>
<BlockEdit { ...props } />
</Fragment>
)
};
}, "withInspectorControl" );
wp.hooks.addFilter( 'editor.BlockEdit', 'core/spacer', override );// INT
function prwp_seperator_override() {
register_block_type( 'core/spacer', array(
'render_callback' => 'prwp_seperator_override_render',
'attributes' => array(
'trenner' => array(
'type' => 'boolean',
'default' => false
),
'height' => array(
'type' => 'integer',
)
),
) );
}
add_action( 'init', 'prwp_seperator_override' );
// Render
function prwp_seperator_override_render( $attributes, $content ) {
ob_start();?>
<div <?php if( $attributes['height'] ) echo 'style="height: '. $attributes['height'] .'px " ' ?>
class="prwp-gutenberg-driver <?php if( $attributes['trenner'] ) echo 'prwp-gutenberg-trenner--open' ?>">
</div>
<?php
// Clean UP
$ret = ob_get_contents();
ob_end_clean();
return $ret;
} import { InnerBlocks } from '@wordpress/block-editor';
<section className="prwp-gutenberg-slider">
<div className="prwp-gutenberg-slider__wrapper">
<InnerBlocks
allowedBlocks={ ['core/headline', 'core/image', ] }
/>
</div>
</section><div>
<InnerBlocks.Content />
</div>import { InnerBlocks } from '@wordpress/block-editor';
// Parent Block | Innerblocks
<section className="prwp-gutenberg-slider">
<div className="prwp-gutenberg-slider__wrapper">
<InnerBlocks
allowedBlocks={ ['prwp-blocks/slider-item'] }
/>
</div>
</section>// Einfach den Namespace des Parent Innerblocks hinzufügen
parent: [ 'prwp-blocks/slider' ] register_block_type('prwp-blocks/slider', array(
'render_callback' => 'prwp_slider'
));
function prwp_slider( $attributes, $content ) {
ob_start(); ?>
<section class="prwp-gutenberg-slider">
<div class="prwp-gutenberg-slider__container swiper-container">
<div class="prwp-gutenberg-slider__wrapper swiper-wrapper">
<?php echo $content;?>
</div>
</div>
</section>
<?php
$ret = ob_get_contents();
ob_end_clean();
return $ret;
}
Dieses Component arbeitet mittels Meta Fields von WordPress zusammen, was wir nur machen ist: Wir blenden die im Backend aus und dafür nehmen wir unsere Checkbox, die wir fürs Backend genommen haben.
Damit man nicht diesen komplexen PHP Script schreiben muss, gibt es hilfreiche Tools. Hier eine meiner Empfehlungen: https://jeremyhixon.com/tool/wordpress-meta-box-generator-v2-beta/
Falls du gerne deine eigene Sidebar verwalten möchtest, kannst du dir in Gutenberg deine eigene Sidebar ganz einfach programmieren. Du musst nur wieder mit den Meta Fields arbeiten. Aber wie oben erklärt durch die Generatoren wird dir viel Arbeit erspart.
Hier kannst du zum Beispiel das "Modal" Component verschachteln und dir dein eigenes Einstellungsmenü erstellen.
import { prwp_icon } from "../../icons/icon";
import { CheckboxControl } from "@wordpress/components";
import { PluginDocumentSettingPanel } from "@wordpress/edit-post";
import { registerPlugin } from "@wordpress/plugins";
import { Fragment } from "@wordpress/element";
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';const prwp_gutenberg_global_setting = () => {
let prwp_pageSetting = () => (
<PluginDocumentSettingPanel
name="page-settings"
title="Seiten Einstellungen"
className="prwp__page--settings yellow__background">
<section className="prwp__page--setting__border prwp__page--settings__title">
<div className="prwp__page--settings__title__desc">
<h4>Ãœberschrift deaktivieren</h4>
<p>
Hier klicken, um die Ãœberschrift zu deaktivieren.
</p>
</div>
<div className="prwp__page--settings__title__toggle">
<HideTitle />
</div>
</section>
</PluginDocumentSettingPanel>
);
registerPlugin( 'pagesettings-prwp', { render: prwp_pageSetting, icon: prwp_icon } );
}
prwp_gutenberg_global_setting();let HideTitle = ( props ) => {
return(
<Fragment>
<CheckboxControl
checked={ props.headlineActive }
label="Ãœberschrift ausblenden"
onChange={ (bool) => {
props.onCheckHeadlineActive(bool)
}}
/>
</Fragment>
)
}
HideTitle = compose([
withSelect(
( select ) => {
return {
headlineActive: select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']
}
}
),
withDispatch(
( dispatch ) => {
return {
onCheckHeadlineActive: (active) => {
wp.data.dispatch('core/editor').editPost( { meta: { _myprefix_text_metafield: active } } )
}
}
}
)
])( HideTitle )<?php
// Regsiter Meta
function myprefix_register_meta_func( $postType, $fieldname, $type ) {
register_meta( $postType, $fieldname, array(
'show_in_rest' => true,
'type' => $type,'boolean',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'auth_callback' => function() {
return current_user_can('edit_posts');
}
));
}
function myprefix_register_meta() {
myprefix_register_meta_func('post', '_myprefix_text_metafield', 'boolean');
myprefix_register_meta_func('page', '_myprefix_text_metafield', 'boolean');
myprefix_register_meta_func('portfolio', '_myprefix_text_metafield', 'boolean');
}
add_action('init', 'myprefix_register_meta');
function myprefix_add_meta_box_func( $postType ) {
add_meta_box(
'myprefix_post_options_metabox',
'Post Options',
'myprefix_post_options_metabox_html',
$postType,
'normal',
'default',
array('__back_compat_meta_box' => true )
);
}
function myprefix_add_meta_box() {
myprefix_add_meta_box_func('post');
myprefix_add_meta_box_func('page');
myprefix_add_meta_box_func('portfolio');
}
add_action( 'add_meta_boxes', 'myprefix_add_meta_box' );
function myprefix_post_options_metabox_html($post) {
$field_value = get_post_meta($post->ID, '_myprefix_text_metafield', true);
wp_nonce_field( 'myprefix_update_post_metabox', 'myprefix_update_post_nonce' );
?>
<p>
<label for="myprefix_text_metafield"><?php esc_html_e( 'Text Custom Field', 'textdomain' ); ?></label>
<br />
<input class="widefat" type="text" name="myprefix_text_metafield" id="myprefix_text_metafield" value="<?php echo esc_attr( $field_value ); ?>" />
</p>
<?php
}
function myprefix_save_post_metabox($post_id, $post) {
$edit_cap = get_post_type_object( $post->post_type )->cap->edit_post;
if( !current_user_can( $edit_cap, $post_id )) {
return;
}
if( !isset( $_POST['myprefix_update_post_nonce']) || !wp_verify_nonce( $_POST['myprefix_update_post_nonce'], 'myprefix_update_post_metabox' )) {
return;
}
if(array_key_exists('myprefix_text_metafield', $_POST)) {
update_post_meta(
$post_id,
'_myprefix_text_metafield',
sanitize_text_field($_POST['myprefix_text_metafield'])
);
}
}
add_action( 'save_post', 'myprefix_save_post_metabox', 10, 2 );import { prwp_icon } from "../../icons/icon";
import { PluginMoreMenuItem } from "@wordpress/edit-post";
import { registerPlugin } from "@wordpress/plugins";
function prwp_gutenberg_tab_option() {
let sayHello = () => {
// Hier kannst du alles machen...
alert('Hello!');
}
// Menu Item on Tab Menu -> EventListener to open Modal
let prwp_tab_setting_one = () => (
<PluginMoreMenuItem
onClick={ sayHello }
icon={ prwp_icon() } >
POWER + RADACH Einstellungen
</PluginMoreMenuItem>
);
registerPlugin( 'tabsettings-prwp-one', { render: prwp_tab_setting_one, icon: prwp_icon } );
}
prwp_gutenberg_tab_option();// GradientColor
bgGradient:{
type: 'string'
}import {
__experimentalGradientPicker as GradientPicker
} from '@wordpress/block-editor'; <GradientPicker
className="gradient__picker"
value={attributes.bgGradient}
onChange= { ( data ) => {
setAttributes({
bgGradient: data
});
}}
// disableCustomGradients={true}
// clearable={ false }
/>add_theme_support(
'editor-gradient-presets',
array(
array(
'name' => __( 'Vivid cyan blue to vivid purple' ),
'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
'slug' => 'vivid-cyan-blue-to-vivid-purple'
),
array(
'name' => __( 'Vivid green cyan to vivid cyan blue' ),
'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
'slug' => 'vivid-green-cyan-to-vivid-cyan-blue',
),
array(
'name' => __( 'Light green cyan to vivid green cyan' ),
'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
'slug' => 'light-green-cyan-to-vivid-green-cyan',
),
array(
'name' => __( 'Luminous vivid amber to luminous vivid orange' ),
'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
'slug' => 'luminous-vivid-amber-to-luminous-vivid-orange',
),
array(
'name' => __( 'Luminous vivid orange to vivid red' ),
'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
'slug' => 'luminous-vivid-orange-to-vivid-red',
)
)
);// Disable Custom Gradients
add_theme_support('disable-custom-gradients', true);<section style={ background: props.attributes.bgGradient }
Offizielles WordPress Gutenberg Snippets Plugin für den VSCode Editor
Falls du gerne für deine IDE VSCode alle derzeit aktivieren Snippets installieren möchtest, habe ich dies hier getan. Weitere Updates werden die Funktion dieses Plugins erweitern.
Hier kannst du es kostenlos herunterladen.
core/quote
Shortcode
core/shortcode
Archive
core/archives
Audio
core/audio
Button
core/button
Kalendar
core/calendar
Kategorien
core/categories
Code
core/code
Spalten/Grids
core/columns
Spalte/Column
core/column
Cover
core/cover
core-embed/wordpress
Einbettung Soundcloud
core-embed/soundcloud
Einbettung Spotify
core-embed/spotify
Einbettung Flickr
core-embed/flickr
Einbettung Vimeo
core-embed/vimeo
Einbettung Animoto
core-embed/animoto
Einbettung Cloudup
core-embed/cloudup
Einbettung Collegehumor
core-embed/collegehumor
Einbettung Crowdsignal
core-embed/crowdsignal
Einbettung Dailymotion
core-embed/dailymotion
Einbettung Hulu
core-embed/hulu
Einbettung Imgur
core-embed/imgur
Einbettung Issuu
core-embed/issuu
Einbettung Kickstarter
core-embed/kickstarter
Einbettung Meetup-com
core-embed/meetup-com
Einbettung Mixcloud
core-embed/mixcloud
Einbettung Polldaddy
core-embed/polldaddy
Einbettung Reddit
core-embed/reddit
Einbettung Reverbnation
core-embed/reverbnation
Einbettung Screencast
core-embed/screencast
Einbettung Scribd
core-embed/scribd
Einbettung Slideshare
core-embed/slideshare
Einbettung Smugmug
core-embed/smugmug
Einbettung Speaker
core-embed/speaker
Einbettung Speaker Deck
core-embed/speaker-deck
Einbettung Ted
core-embed/ted
Einbettung Tumblr
core-embed/tumblr
Einbettung Videopress
core-embed/videopress
Einbettung Wordpress TV
core-embed/wordpress-tv
Einbettung Amazon Kindle
core-embed/amazon-kindle
core/latest-comments
Artikel aus dem System
core/latest-posts
Fehlende
core/missing
Weitere
core/more
Nächste Seite
core/nextpage
Vorformatiert
core/preformatted
Zitat
core/pullquote
Rss
core/rss
Suche
core/search
Trenner
core/separator
Block
core/block
Trenner
core/spacer
Unterüberschrift
core/subhead
Tabelle
core/table
Tag Cloud
core/tag-cloud
Vorlagen
core/template
Text Spalten
core/text-columns
Verse
core/verse
Video
core/video
Block
Name Space
Paragraph
core/paragraph
Bild
core/image
Ãœberschrift
core/heading
Bilder Galerie
core/gallery
Auflistung
core/list
Einbettung
Name Space
Einbettung
core/embed
Einbettung Twitter
core-embed/twitter
Einbettung Youtube
core-embed/youtube
Einbettung Facebook
core-embed/facebook
Einbettung Instagram
core-embed/instagram
Block
Name Space
Datei
core/file
Gruppe
core/group
Klassik Editor (ehm. Editor)
core/freeform
HTML
core/html
Media Text
core/media-text
Zitat
Einbettung WordPress
Kommentare aus dem System
wp.blockeditor.panelcolor
Gutenberg MediaPlaceholder
wp.blockeditor.mediaplaceholder
wp.com-checkbox
Gutenberg ClipBoad
wp.com-copybtn
Gutenberg Color Indicator
wp.com-colorind
Gutenberg Color Palette
wp.com-colorpalett
Gutenberg Color Picker
wp.com-colorpick
Gutenberg Dashicon
wp.com-dashicon
Gutenberg Datepicker
wp.com-date
Gutenberg Disabled
wp.com-dis
Gutenberg Draggable
wp.com-drag
Gutenberg Dragzone
wp.com-dragzone
Gutenberg DropDownMenu
wp.com-dropmenu
Gutenberg DropDown
wp.com-dropdown
Gutenberg External Link
wp.com-exlink
Gutenberg FocalPointPicker
wp.com-focal
Gutenberg FocusableIframe
wp.com-focframe
Gutenberg Fontsize Picker
wp.com-fontpick
Gutenberg FormFileUpload
wp.com-fileupload
Gutenberg FormControl
wp.com-formcont
Gutenberg FormTokenField
wp.com-formtokenfield
Gutenberg navigateRegions
wp.com-naviregions
Gutenberg WithConstrainedTabbing
wp.com-withconstr
Gutenberg withFallbackStyles
wp.com-withfall
Gutenberg withFilters
wp.com-withfilter
Gutenberg withFocusOutside
wp.com-withfocusoutside
Gutenberg withFocusReturn
wp.com-withfocusreturn
Gutenberg WithNotices
wp.com-withnote
Gutenberg WithSpokenMessages
wp.com-withspokenmessages
Gutenberg IconButton
wp.com-iconbutton
Gutenberg IsolatedEventContainer
wp.com-isolatedeventcont
Gutenberg KeyboardShortcuts
wp.com-keyboardshortc
Gutenberg MenuGroup
wp.com-menugroup
Gutenberg MenuItem
wp.com-menuitem
Gutenberg MenuItemsChoice
wp.com-menuitemschoice
Gutenberg Modal
wp.com-modal
Gutenberg NavigableContainer
wp.com-navigablecontainer
Gutenberg Notice
wp.com-notice
Gutenberg Panel
wp.com-panel
Gutenberg Placeholder
wp.com-placeholder
Gutenberg Popover
wp.com-popover
Gutenberg BlockQuotation
wp.com-blockquotation
Gutenberg HorizontalRule
wp.com-horizontalRule
Gutenberg SVG
wp.com-svg
Gutenberg QueryControls
wp.com-queryControls
Gutenberg RadioControl
wp.com-radiocontrol
Gutenberg RangeControl
wp.com-rangecontrol
Gutenberg ResizableBox
wp.com-resizablebox
Gutenberg ResponsiveWrapper
wp.com-responswrap
Gutenberg Sandbox
wp.com-sandbox
Gutenberg ScrollLock
wp.com-scrollLock
Gutenberg ServerSideRender
wp.com-serversiderender
Gutenberg SelectControl
wp.com-selectcontrol
Gutenberg SlotFill
wp.com-slotfill
Gutenberg Snackbar
wp.com-snackbar
Gutenberg Spinner
wp.com-spinner
Gutenberg TabPanel
wp.com-tabpanel
Gutenberg TextControl
wp.com-textcontrol
Gutenberg TextareaControl
wp.com-textareacontrol
Gutenberg ToggleControl
wp.com-togglecontrol
Gutenberg Toolbar
wp.com-toolbar
Gutenberg Tooltip
wp.com-tooltip
Gutenberg TreeSelect
wp.com-treeselect
Name
Shortcode
Gutenberg Block Template Preset
wp.pagetemplate
Gutenberg Theme Supports
wp.themesupport
Gutenberg Color Palette
wp.presets.colorpalette
Gutenberg Create Block Category
wp.createcategory
Name
Short Snippet
Gutenberg Block Template Preset
wp.pagetemplate
Gutenberg Theme Supports
wp.themesupport
Gutenberg Color Palette
wp.presets.colorpalette
Gutenberg Register Block -> Block Style
wp.styles
Name
Short Snippet
Gutenberg InspectorControls
wp.blockeditor.inspector
Gutenberg Innerblocks
wp.blockeditor.innerblocks
Gutenberg AlignmentToolbar
wp.blockeditor.aligntoolbar
Gutenberg BlockControls
wp.blockeditor.blockcontrol
Gutenberg RichText
wp.blockeditor.richtext
Name
Short Snippet
Gutenberg registerBlockType
wp.blocks.registerblock
Gutenberg registerBlockStyle
wp.blocks.registerstyle
Name
Short Snippet
Gutenberg Animate
wp.com-anim
Gutenberg Autocomplete
wp.com-autocom
Gutenberg BaseControl
wp.com-basecon
Gutenberg Button Group
wp.com-btngp
Gutenberg Button
wp.com-btn
Gutenberg PanelColorSettings
Gutenberg Checkbox
Du möchtest eine Auswahlliste erstellen von Beiträgen und die dann in einem Grid anzeigen? Kein Problem mithilfe der WordPress REST API kriegen wir das ganz einfach hin.
Vorerst kurze Info: Dieser Schritt ist nicht für Einsteiger gedacht, denn hier arbeiten wir direkt mit der REST API und mit dem React DOM.
Was sollen wir bauen? Kurz gesagt eine Auswahlliste und dieser Beitrag wird dann anschließend im Block dargestellt. Dies ist natürlich praktisch wenn man eine Team Auflistung machen möchte mit beliebiger Team Auflistung.
Nach dem wir unseren Block registriert haben, müssen wir in PHP die WordPress REST API aktivieren. Dies tun wir so. Am besten direkt in der functions.php oder in deinem Plug-in.
Danach habe ich mir überlegt einen ServerSideRender zu tun, denn damit weiß der User automatisch bescheid, was Sache ist und welchen Beitrag der grade bearbeitet.
Innerhalb meines Components erstelle ich mir eine State Methode wie in React üblich, dazu habe ich hier im Handbuch auch einen Beitrag geschrieben und kurz erklärt, wie man die Edit Funktion auslagern kann.
Damit wir erstmal die gesamten Beiträge auslesen können, holen wir uns erstmal die gesamten Posts aus der API. Dies tun wir so:
Was danach kommt ist wir erstellen uns eine Foreach Schleife und fügen alle benötigten Daten dort in einem Array bzw. eigentlich ein Objekt.
Jetzt haben wir alles Nötige, um weiterzuarbeiten. Jetzt brauchen wir nur das SelectControl Component von Gutenberg und dort setzten wir die Options hinzu. also ein Label sowie einen Wert.
Nicht zu vergessen, Attribute erstellen!! Sonst wird beim Auswählen keine PostID abgespeichert. Sie ist sehr wichtig, damit wir später weiterarbeiten können.
Natürlich kannst du beliebig viele Components verwenden wie du Lustig bist, ist halt am Ende etwas Arbeit :D Ich wollte jetzt zum Beispiel den User die Möglichkeit geben, Dinge ausschalten bzw. einschalten zu können.
Damit wir jetzt nun den Post Rendern können brauchen wir den ServerSideRender. Es ist eine Ansicht die für Edit und die Save Funktion gilt alle beide sehen gleich aus. Es ist halt eine Preview im Backend.
Und wir sind bereit die Ausgabe zu betätigen. Aber mit diesem Code kommen wir nicht weiter. Wir müssen uns jetzt einen Dynamic Block erstellen. Wie üblich in PHP.
Jetzt in deiner PHP Funktion:
Nicht schwer oder? Wichtig dabei ist einfach nur, dass wir die PostID im Query mitgeben, dann läuft dies theoretisch von alleine.
Und hier der gesamte Code im Beispiel:
Deine Index.js File
Deine Edit.js
Deine PHP
wp_enqueue_script( 'wp-api' );getOptions() {
return ( new wp.api.collections.Posts() ).fetch().then( ( posts ) => {
this.setState({ posts });
} );
}let options = [ { value: 0, label: 'Beitrag auswählen' } ];
if( this.state.posts.length > 0 ) {
this.state.posts.forEach((post) => {
options.push( { value: post.id, label: post.title.rendered } );
});
}<SelectControl
onChange={ ( event ) => { setAttributes( { deinAtrr: event } ) } }
value={ attributes.deinAtrr }
options={ options }
/><ServerSideRender
block="prwp-blocks/choose-post" // NameSpace vom Block
attributes={ {
// Importiere deine Attribute
deinAttr : attributes.deinAttr
} }
/>register_block_type('deinnamespace', array(
'render_callback' => 'rendering',
'attributes' => array(
// Importiere alle deine Attribute
)
));
function rendering() {
ob_start(); ?>
<section class="prwp-gutenberg-choosepost">
<div class="prwp-gutenberg-choosepost__wrapper">
<?php
if( $attributes['selectedPost'] == 0 ) {
echo 'Bitte wählen Sie eine Beitrag aus.';
} else {
$args = array(
'post_type' => array( 'post' ),
'posts_per_page' => 1,
'p' => $attributes['selectedPost'],
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post(); ?>
<div class="prwp-gutenberg-choosepost__item">
<?php if( $attributes['showPostImage'] ) { ?>
<figure class="prwp-gutenberg-choosepost__image">
<?php echo get_the_post_thumbnail(); ?>
</figure>
<?php }
if( $attributes['showPostTitle'] ) { ?>
<h3 class="prwp-gutenberg-choosepost__headline">
<a class="prwp-gutenberg-choosepost__headline__link" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<?php }
if( $attributes['showDate'] || $attributes['showAuthor'] ) { ?>
<div class="prwp-gutenberg-choosepost__details">
<?php if( $attributes['showDate'] ) { ?>
<div class="prwp-gutenberg-choosepost__details__date">
<span>
Datum: <?php the_date(); ?>
</span>
</div>
<?php }
if( $attributes['showAuthor'] ) { ?>
<div class="prwp-gutenberg-choosepost__details__author">
<span>
Autor: <?php the_author(); ?>
</span>
</div>
<?php } ?>
</div>
<?php }
if( $attributes['showExcerpt'] ) { ?>
<article class="prwp-gutenberg-choosepost__content">
<?php the_excerpt(); ?>
</article>
<?php } ?>
</div>
<?php }
} else {
echo 'Es wurden keine Beiträge gefunden.';
}
wp_reset_postdata();
}
?>
</div>
</section>
<?php
$ret = ob_get_contents();
ob_end_clean();
return $ret;
} $args = array(
'post_type' => array( 'post' ),
'posts_per_page' => 1,
'p' => $attributes['deineAttributeMitDerID'],
);
$query = new WP_Query( $args );import './style.scss';
import attributes from './globals/attributes';
import edit from './globals/edit';
// Define Variables
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
registerBlockType( 'namespace', {
title: __('Beitrag'),
description: 'Hier können Sie eine Beitrag darstellen.',
category: 'category',
icon: {
background: '#f0dd00',
foreground: '#222832',
src: 'admin-post'
},
keywords: [
__( 'auswahl' ),
__( 'choose' ),
__( 'Auswahl' )
],
supports: {
html: false,
},
attributes,
edit,
save: ( props ) => {
return null
}
});const attributes = {
selectedPost: {
type: 'number',
default: 0
},
showAuthor: {
type: 'boolean',
default: false
},
showDate: {
type: 'boolean',
default: false
},
showExcerpt: {
type: 'boolean',
default: true
},
showPostImage: {
type: 'boolean',
default: true
},
showPostTitle: {
type: 'boolean',
default: true
}
}
export default attributes;import { InspectorControls } from '@wordpress/block-editor';
import { Component, Fragment } from '@wordpress/element';
import { PanelBody, SelectControl, ServerSideRender, ToggleControl } from '@wordpress/components';
class edit extends Component {
static getInitialState() {
return {
posts: [],
selectedPost: 2,
};
}
constructor() {
super( ...arguments );
this.state = this.constructor.getInitialState();
this.getOptions = this.getOptions.bind(this);
this.onChangeSelectPost = this.onChangeSelectPost.bind(this);
}
// Get Data
getOptions() {
return ( new wp.api.collections.Posts() ).fetch().then( ( posts ) => {
this.setState({ posts });
} );
}
componentDidMount() {
this.setState( { selectedPost: this.props.attributes.selectedPost } );
this.getOptions();
}
// OnSelect Post > Save Post ID
onChangeSelectPost( value ) {
this.props.setAttributes( { selectedPost: parseInt( value ) } )
this.setState( { selectedPost: parseInt( value ) } );
}
render() {
let selectedPost = {};
let options = [ { value: 0, label: 'Beitrag auswählen' } ];
let attributes = this.props.attributes;
let selectPostID = attributes.selectedPost;
// Push data in object
if( this.state.posts.length > 0 ) {
this.state.posts.forEach((post) => {
options.push( { value: post.id, label: post.title.rendered } );
});
}
return [
<Fragment>
<InspectorControls>
<PanelBody
title="Auswahl"
icon="admin-post"
initialOpen={ true }>
{ options.length < 2 ?
<Fragment>
<h4>Bitte legen Sie einen Beitrag an.</h4>
<p>Es wurden keine Beiträge gefunden.</p>
</Fragment>
:
<Fragment>
<p>
<small>
Damit Sie in diesem Block weiterarbeiten können, müssen Sie einen Beitrag auswählen.
</small>
</p>
<SelectControl
onChange={ this.onChangeSelectPost }
value={ selectPostID }
options={ options }
/>
</Fragment>
}
</PanelBody>
{ options.length > 1 ?
<PanelBody
title="Einstellungen"
icon="admin-settings"
initialOpen={ false }>
<p>
<small>
Hier finden Sie weitere Detail Einstellungen zum Beitrag. Wählen Sie aus.
</small>
</p>
<ToggleControl
label="Autor anzeigen"
checked={ attributes.showAuthor }
onChange={ ( bool ) => { this.props.setAttributes( { showAuthor: bool } ) } }
/>
<ToggleControl
label="Datum anzeigen"
checked={ attributes.showDate }
onChange={ ( bool ) => { this.props.setAttributes( { showDate: bool } ) } }
/>
<ToggleControl
label="Textauszug anzeigen"
checked={ attributes.showExcerpt }
onChange={ ( bool ) => { this.props.setAttributes( { showExcerpt: bool } ) } }
/>
<ToggleControl
label="Beitragsbild anzeigen"
checked={ attributes.showPostImage }
onChange={ ( bool ) => { this.props.setAttributes( { showPostImage: bool } ) } }
/>
<ToggleControl
label="Beitragstitel anzeigen"
checked={ attributes.showPostTitle }
onChange={ ( bool ) => { this.props.setAttributes( { showPostTitle: bool } ) } }
/>
</PanelBody>
: ''
}
</InspectorControls>
{ options.length > 1 ?
<ServerSideRender
block="prwp-blocks/choose-post"
attributes={ {
selectedPost : attributes.selectedPost,
showDate : attributes.showDate,
showPostTitle : attributes.showPostTitle,
showPostImage : attributes.showPostImage,
showExcerpt : attributes.showExcerpt,
showAuthor : attributes.showAuthor
} }
/>
: 'Bitte legen Sie einen Beitrag an.'
}
</Fragment>
];
}
}
export default edit; <?php
register_block_type('prwp-blocks/choose-post', array(
'render_callback' => 'prwp_choosepost',
'attributes' => array(
'selectedPost' => array(
'type' => 'number',
'default' => 0
),
'showAuthor' => array(
'type' => 'boolean',
'default' => false
),
'showDate' => array(
'type' => 'boolean',
'default' => false
),
'showExcerpt' => array(
'type' => 'boolean',
'default' => true
),
'showPostImage' => array(
'type' => 'boolean',
'default' => true
),
'showPostTitle' => array(
'type' => 'boolean',
'default' => true
)
)
));
function prwp_choosepost( $attributes ) {
ob_start(); ?>
<section class="prwp-gutenberg-choosepost">
<div class="prwp-gutenberg-choosepost__wrapper">
<?php
if( $attributes['selectedPost'] == 0 ) {
echo 'Bitte wählen Sie eine Beitrag aus.';
} else {
$args = array(
'post_type' => array( 'post' ),
'posts_per_page' => 1,
'p' => $attributes['selectedPost'],
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post(); ?>
<div class="prwp-gutenberg-choosepost__item">
<?php if( $attributes['showPostImage'] ) { ?>
<figure class="prwp-gutenberg-choosepost__image">
<?php echo get_the_post_thumbnail(); ?>
</figure>
<?php }
if( $attributes['showPostTitle'] ) { ?>
<h3 class="prwp-gutenberg-choosepost__headline">
<a class="prwp-gutenberg-choosepost__headline__link" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<?php }
if( $attributes['showDate'] || $attributes['showAuthor'] ) { ?>
<div class="prwp-gutenberg-choosepost__details">
<?php if( $attributes['showDate'] ) { ?>
<div class="prwp-gutenberg-choosepost__details__date">
<span>
Datum: <?php the_date(); ?>
</span>
</div>
<?php }
if( $attributes['showAuthor'] ) { ?>
<div class="prwp-gutenberg-choosepost__details__author">
<span>
Autor: <?php the_author(); ?>
</span>
</div>
<?php } ?>
</div>
<?php }
if( $attributes['showExcerpt'] ) { ?>
<article class="prwp-gutenberg-choosepost__content">
<?php the_excerpt(); ?>
</article>
<?php } ?>
</div>
<?php }
} else {
echo 'Es wurden keine Beiträge gefunden.';
}
wp_reset_postdata();
}
?>
</div>
</section>
<?php
$ret = ob_get_contents();
ob_end_clean();
return $ret;
}
WordPress liefert automatisch ein Iconset mit. Falls du für die Entwicklung ein Objekt mit allen Dashicons benötigst, findest du hier eine große Sammlung an DashIcon Namens.
const WordPressDashIcons = {
'WordPress Dashicons': [
'dashicons dashicons-admin-appearance',
'dashicons dashicons-admin-collapse',
'dashicons dashicons-admin-comments',
'dashicons dashicons-admin-customizer',
'dashicons dashicons-admin-generic',
'dashicons dashicons-admin-home',
'dashicons dashicons-admin-links',
'dashicons dashicons-admin-media',
'dashicons dashicons-admin-multisite',
'dashicons dashicons-admin-network',
'dashicons dashicons-admin-page',
'dashicons dashicons-admin-plugins',
'dashicons dashicons-admin-post',
'dashicons dashicons-admin-settings',
'dashicons dashicons-admin-site',
'dashicons dashicons-admin-site-alt',
'dashicons dashicons-admin-site-alt2',
'dashicons dashicons-admin-site-alt3',
'dashicons dashicons-admin-tools',
'dashicons dashicons-admin-users',
'dashicons dashicons-album',
'dashicons dashicons-align-center',
'dashicons dashicons-align-left',
'dashicons dashicons-align-none',
'dashicons dashicons-align-right',
'dashicons dashicons-analytics',
'dashicons dashicons-archive',
'dashicons dashicons-arrow-down',
'dashicons dashicons-arrow-down-alt',
'dashicons dashicons-arrow-down-alt2',
'dashicons dashicons-arrow-left',
'dashicons dashicons-arrow-left-alt',
'dashicons dashicons-arrow-left-alt2',
'dashicons dashicons-arrow-right',
'dashicons dashicons-arrow-right-alt',
'dashicons dashicons-arrow-right-alt2',
'dashicons dashicons-arrow-up',
'dashicons dashicons-arrow-up-alt',
'dashicons dashicons-arrow-up-alt2',
'dashicons dashicons-art',
'dashicons dashicons-awards',
'dashicons dashicons-backup',
'dashicons dashicons-book',
'dashicons dashicons-book-alt',
'dashicons dashicons-buddicons-activity',
'dashicons dashicons-buddicons-bbpress-logo',
'dashicons dashicons-buddicons-buddypress-logo',
'dashicons dashicons-buddicons-community',
'dashicons dashicons-buddicons-forums',
'dashicons dashicons-buddicons-friends',
'dashicons dashicons-buddicons-groups',
'dashicons dashicons-buddicons-pm',
'dashicons dashicons-buddicons-replies',
'dashicons dashicons-buddicons-topics',
'dashicons dashicons-buddicons-tracking',
'dashicons dashicons-building',
'dashicons dashicons-businessman',
'dashicons dashicons-calendar',
'dashicons dashicons-calendar-alt',
'dashicons dashicons-camera',
'dashicons dashicons-carrot',
'dashicons dashicons-cart',
'dashicons dashicons-category',
'dashicons dashicons-chart-area',
'dashicons dashicons-chart-bar',
'dashicons dashicons-chart-line',
'dashicons dashicons-chart-pie',
'dashicons dashicons-clipboard',
'dashicons dashicons-clock',
'dashicons dashicons-cloud',
'dashicons dashicons-controls-back',
'dashicons dashicons-controls-forward',
'dashicons dashicons-controls-pause',
'dashicons dashicons-controls-play',
'dashicons dashicons-controls-repeat',
'dashicons dashicons-controls-skipback',
'dashicons dashicons-controls-skipforward',
'dashicons dashicons-controls-volumeoff',
'dashicons dashicons-controls-volumeon',
'dashicons dashicons-dashboard',
'dashicons dashicons-desktop',
'dashicons dashicons-dismiss',
'dashicons dashicons-download',
'dashicons dashicons-edit',
'dashicons dashicons-editor-aligncenter',
'dashicons dashicons-editor-alignleft',
'dashicons dashicons-editor-alignright',
'dashicons dashicons-editor-bold',
'dashicons dashicons-editor-break',
'dashicons dashicons-editor-code',
'dashicons dashicons-editor-contract',
'dashicons dashicons-editor-customchar',
'dashicons dashicons-editor-expand',
'dashicons dashicons-editor-help',
'dashicons dashicons-editor-indent',
'dashicons dashicons-editor-insertmore',
'dashicons dashicons-editor-italic',
'dashicons dashicons-editor-justify',
'dashicons dashicons-editor-kitchensink',
'dashicons dashicons-editor-ltr',
'dashicons dashicons-editor-ol',
'dashicons dashicons-editor-outdent',
'dashicons dashicons-editor-paragraph',
'dashicons dashicons-editor-paste-text',
'dashicons dashicons-editor-paste-word',
'dashicons dashicons-editor-quote',
'dashicons dashicons-editor-removeformatting',
'dashicons dashicons-editor-rtl',
'dashicons dashicons-editor-spellcheck',
'dashicons dashicons-editor-strikethrough',
'dashicons dashicons-editor-table',
'dashicons dashicons-editor-textcolor',
'dashicons dashicons-editor-ul',
'dashicons dashicons-editor-underline',
'dashicons dashicons-editor-unlink',
'dashicons dashicons-editor-video',
'dashicons dashicons-email',
'dashicons dashicons-email-alt',
'dashicons dashicons-email-alt2',
'dashicons dashicons-excerpt-view',
'dashicons dashicons-external',
'dashicons dashicons-facebook',
'dashicons dashicons-facebook-alt',
'dashicons dashicons-feedback',
'dashicons dashicons-filter',
'dashicons dashicons-flag',
'dashicons dashicons-format-aside',
'dashicons dashicons-format-audio',
'dashicons dashicons-format-chat',
'dashicons dashicons-format-gallery',
'dashicons dashicons-format-image',
'dashicons dashicons-format-quote',
'dashicons dashicons-format-status',
'dashicons dashicons-format-video',
'dashicons dashicons-forms',
'dashicons dashicons-googleplus',
'dashicons dashicons-grid-view',
'dashicons dashicons-groups',
'dashicons dashicons-hammer',
'dashicons dashicons-heart',
'dashicons dashicons-hidden',
'dashicons dashicons-plus-alt' ,
'dashicons dashicons-images-alt',
'dashicons dashicons-images-alt2',
'dashicons dashicons-image-crop',
'dashicons dashicons-image-filter',
'dashicons dashicons-image-flip-horizontal',
'dashicons dashicons-image-flip-vertical',
'dashicons dashicons-image-rotate',
'dashicons dashicons-image-rotate-left',
'dashicons dashicons-image-rotate-right',
'dashicons dashicons-index-card',
'dashicons dashicons-info',
'dashicons dashicons-laptop',
'dashicons dashicons-layout',
'dashicons dashicons-leftright',
'dashicons dashicons-lightbulb',
'dashicons dashicons-list-view',
'dashicons dashicons-location',
'dashicons dashicons-location-alt',
'dashicons dashicons-lock',
'dashicons dashicons-marker',
'dashicons dashicons-media-archive',
'dashicons dashicons-media-audio',
'dashicons dashicons-media-code',
'dashicons dashicons-media-default',
'dashicons dashicons-media-document',
'dashicons dashicons-media-interactive',
'dashicons dashicons-media-spreadsheet',
'dashicons dashicons-media-text',
'dashicons dashicons-media-video',
'dashicons dashicons-megaphone',
'dashicons dashicons-menu',
'dashicons dashicons-menu-alt',
'dashicons dashicons-microphone',
'dashicons dashicons-migrate',
'dashicons dashicons-minus',
'dashicons dashicons-money',
'dashicons dashicons-move',
'dashicons dashicons-nametag',
'dashicons dashicons-networking',
'dashicons dashicons-no-alt',
'dashicons dashicons-palmtree',
'dashicons dashicons-paperclip',
'dashicons dashicons-performance',
'dashicons dashicons-phone',
'dashicons dashicons-playlist-audio',
'dashicons dashicons-playlist-video',
'dashicons dashicons-plus',
'dashicons dashicons-plus-alt',
'dashicons dashicons-plus-light',
'dashicons dashicons-portfolio',
'dashicons dashicons-post-status',
'dashicons dashicons-pressthis',
'dashicons dashicons-products',
'dashicons dashicons-randomize',
'dashicons dashicons-redo',
'dashicons dashicons-rest-api',
'dashicons dashicons-rss',
'dashicons dashicons-schedule',
'dashicons dashicons-screenoptions',
'dashicons dashicons-search',
'dashicons dashicons-share',
'dashicons dashicons-share-alt',
'dashicons dashicons-share-alt2',
'dashicons dashicons-shield',
'dashicons dashicons-shield-alt',
'dashicons dashicons-slides',
'dashicons dashicons-smartphone',
'dashicons dashicons-smiley',
'dashicons dashicons-sort',
'dashicons dashicons-sos',
'dashicons dashicons-star-empty',
'dashicons dashicons-star-filled',
'dashicons dashicons-star-half',
'dashicons dashicons-sticky',
'dashicons dashicons-store',
'dashicons dashicons-tablet',
'dashicons dashicons-tag',
'dashicons dashicons-tagcloud',
'dashicons dashicons-testimonial',
'dashicons dashicons-text',
'dashicons dashicons-thumbs-down',
'dashicons dashicons-thumbs-up',
'dashicons dashicons-tickets',
'dashicons dashicons-tickets-alt',
'dashicons dashicons-translation',
'dashicons dashicons-trash',
'dashicons dashicons-twitter',
'dashicons dashicons-undo',
'dashicons dashicons-universal-access',
'dashicons dashicons-universal-access-alt',
'dashicons dashicons-unlock',
'dashicons dashicons-update',
'dashicons dashicons-upload',
'dashicons dashicons-vault',
'dashicons dashicons-video-alt',
'dashicons dashicons-video-alt2',
'dashicons dashicons-video-alt3',
'dashicons dashicons-visibility',
'dashicons dashicons-warning',
'dashicons dashicons-welcome-add-page',
'dashicons dashicons-welcome-comments',
'dashicons dashicons-welcome-learn-more',
'dashicons dashicons-welcome-view-site',
'dashicons dashicons-welcome-widgets-menus',
'dashicons dashicons-welcome-write-blog',
'dashicons dashicons-wordpress',
'dashicons dashicons-wordpress-alt',
'dashicons dashicons-yes',
'dashicons dashicons-yes-alt',
]
}
export default WordPressDashIcons;
Falls du für deine Blocks einen FontAwesome Package installiert hast und diese gerne in deinen Gutenberg Blocks verwenden möchtest, kannst du hier alle Icons in einen JS Objekt kopieren.
const FontAwesomeIcons = {
'Font Awesome 5': [
"fab fa-500px",
"fab fa-accessible-icon",
"fab fa-accusoft",
"fas fa-address-book",
"far fa-address-book",
"fas fa-address-card",
"far fa-address-card",
"fas fa-adjust",
"fab fa-adn",
"fab fa-adversal",
"fab fa-affiliatetheme",
"fab fa-algolia",
"fas fa-align-center",
"fas fa-align-justify",
"fas fa-align-left",
"fas fa-align-right",
"fab fa-amazon",
"fas fa-ambulance",
"fas fa-american-sign-language-interpreting",
"fab fa-amilia",
"fas fa-anchor",
"fab fa-android",
"fab fa-angellist",
"fas fa-angle-double-down",
"fas fa-angle-double-left",
"fas fa-angle-double-right",
"fas fa-angle-double-up",
"fas fa-angle-down",
"fas fa-angle-left",
"fas fa-angle-right",
"fas fa-angle-up",
"fab fa-angrycreative",
"fab fa-angular",
"fab fa-app-store",
"fab fa-app-store-ios",
"fab fa-apper",
"fab fa-apple",
"fab fa-apple-pay",
"fas fa-archive",
"fas fa-arrow-alt-circle-down",
"far fa-arrow-alt-circle-down",
"fas fa-arrow-alt-circle-left",
"far fa-arrow-alt-circle-left",
"fas fa-arrow-alt-circle-right",
"far fa-arrow-alt-circle-right",
"fas fa-arrow-alt-circle-up",
"far fa-arrow-alt-circle-up",
"fas fa-arrow-circle-down",
"fas fa-arrow-circle-left",
"fas fa-arrow-circle-right",
"fas fa-arrow-circle-up",
"fas fa-arrow-down",
"fas fa-arrow-left",
"fas fa-arrow-right",
"fas fa-arrow-up",
"fas fa-arrows-alt",
"fas fa-arrows-alt-h",
"fas fa-arrows-alt-v",
"fas fa-assistive-listening-systems",
"fas fa-asterisk",
"fab fa-asymmetrik",
"fas fa-at",
"fab fa-audible",
"fas fa-audio-description",
"fab fa-autoprefixer",
"fab fa-avianex",
"fab fa-aviato",
"fab fa-aws",
"fas fa-backward",
"fas fa-balance-scale",
"fas fa-ban",
"fab fa-bandcamp",
"fas fa-barcode",
"fas fa-bars",
"fas fa-bath",
"fas fa-battery-empty",
"fas fa-battery-full",
"fas fa-battery-half",
"fas fa-battery-quarter",
"fas fa-battery-three-quarters",
"fas fa-bed",
"fas fa-beer",
"fab fa-behance",
"fab fa-behance-square",
"fas fa-bell",
"far fa-bell",
"fas fa-bell-slash",
"far fa-bell-slash",
"fas fa-bicycle",
"fab fa-bimobject",
"fas fa-binoculars",
"fas fa-birthday-cake",
"fab fa-bitbucket",
"fab fa-bitcoin",
"fab fa-bity",
"fab fa-black-tie",
"fab fa-blackberry",
"fas fa-blind",
"fab fa-blogger",
"fab fa-blogger-b",
"fab fa-bluetooth",
"fab fa-bluetooth-b",
"fas fa-bold",
"fas fa-bolt",
"fas fa-bomb",
"fas fa-book",
"fas fa-bookmark",
"far fa-bookmark",
"fas fa-braille",
"fas fa-briefcase",
"fab fa-btc",
"fas fa-bug",
"fas fa-building",
"far fa-building",
"fas fa-bullhorn",
"fas fa-bullseye",
"fab fa-buromobelexperte",
"fas fa-bus",
"fab fa-buysellads",
"fas fa-calculator",
"fas fa-calendar",
"far fa-calendar",
"fas fa-calendar-alt",
"far fa-calendar-alt",
"fas fa-calendar-check",
"far fa-calendar-check",
"fas fa-calendar-minus",
"far fa-calendar-minus",
"fas fa-calendar-plus",
"far fa-calendar-plus",
"fas fa-calendar-times",
"far fa-calendar-times",
"fas fa-camera",
"fas fa-camera-retro",
"fas fa-car",
"fas fa-caret-down",
"fas fa-caret-left",
"fas fa-caret-right",
"fas fa-caret-square-down",
"far fa-caret-square-down",
"fas fa-caret-square-left",
"far fa-caret-square-left",
"fas fa-caret-square-right",
"far fa-caret-square-right",
"fas fa-caret-square-up",
"far fa-caret-square-up",
"fas fa-caret-up",
"fas fa-cart-arrow-down",
"fas fa-cart-plus",
"fab fa-cc-amex",
"fab fa-cc-apple-pay",
"fab fa-cc-diners-club",
"fab fa-cc-discover",
"fab fa-cc-jcb",
"fab fa-cc-mastercard",
"fab fa-cc-paypal",
"fab fa-cc-stripe",
"fab fa-cc-visa",
"fab fa-centercode",
"fas fa-certificate",
"fas fa-chart-area",
"fas fa-chart-bar",
"far fa-chart-bar",
"fas fa-chart-line",
"fas fa-chart-pie",
"fas fa-check",
"fas fa-check-circle",
"far fa-check-circle",
"fas fa-check-square",
"far fa-check-square",
"fas fa-chevron-circle-down",
"fas fa-chevron-circle-left",
"fas fa-chevron-circle-right",
"fas fa-chevron-circle-up",
"fas fa-chevron-down",
"fas fa-chevron-left",
"fas fa-chevron-right",
"fas fa-chevron-up",
"fas fa-child",
"fab fa-chrome",
"fas fa-circle",
"far fa-circle",
"fas fa-circle-notch",
"fas fa-clipboard",
"far fa-clipboard",
"fas fa-clock",
"far fa-clock",
"fas fa-clone",
"far fa-clone",
"fas fa-closed-captioning",
"far fa-closed-captioning",
"fas fa-cloud",
"fas fa-cloud-download-alt",
"fas fa-cloud-upload-alt",
"fab fa-cloudscale",
"fab fa-cloudsmith",
"fab fa-cloudversify",
"fas fa-code",
"fas fa-code-branch",
"fab fa-codepen",
"fab fa-codiepie",
"fas fa-coffee",
"fas fa-cog",
"fas fa-cogs",
"fas fa-columns",
"fas fa-comment",
"far fa-comment",
"fas fa-comment-alt",
"far fa-comment-alt",
"fas fa-comments",
"far fa-comments",
"fas fa-compass",
"far fa-compass",
"fas fa-compress",
"fab fa-connectdevelop",
"fab fa-contao",
"fas fa-copy",
"far fa-copy",
"fas fa-copyright",
"far fa-copyright",
"fab fa-cpanel",
"fab fa-creative-commons",
"fas fa-credit-card",
"far fa-credit-card",
"fas fa-crop",
"fas fa-crosshairs",
"fab fa-css3",
"fab fa-css3-alt",
"fas fa-cube",
"fas fa-cubes",
"fas fa-cut",
"fab fa-cuttlefish",
"fab fa-d-and-d",
"fab fa-dashcube",
"fas fa-database",
"fas fa-deaf",
"fab fa-delicious",
"fab fa-deploydog",
"fab fa-deskpro",
"fas fa-desktop",
"fab fa-deviantart",
"fab fa-digg",
"fab fa-digital-ocean",
"fab fa-discord",
"fab fa-discourse",
"fab fa-dochub",
"fab fa-docker",
"fas fa-dollar-sign",
"fas fa-dot-circle",
"far fa-dot-circle",
"fas fa-download",
"fab fa-draft2digital",
"fab fa-dribbble",
"fab fa-dribbble-square",
"fab fa-dropbox",
"fab fa-drupal",
"fab fa-dyalog",
"fab fa-earlybirds",
"fab fa-edge",
"fas fa-edit",
"far fa-edit",
"fas fa-eject",
"fas fa-ellipsis-h",
"fas fa-ellipsis-v",
"fab fa-ember",
"fab fa-empire",
"fas fa-envelope",
"far fa-envelope",
"fas fa-envelope-open",
"far fa-envelope-open",
"fas fa-envelope-square",
"fab fa-envira",
"fas fa-eraser",
"fab fa-erlang",
"fab fa-etsy",
"fas fa-euro-sign",
"fas fa-exchange-alt",
"fas fa-exclamation",
"fas fa-exclamation-circle",
"fas fa-exclamation-triangle",
"fas fa-expand",
"fas fa-expand-arrows-alt",
"fab fa-expeditedssl",
"fas fa-external-link-alt",
"fas fa-external-link-square-alt",
"fas fa-eye",
"fas fa-eye-dropper",
"fas fa-eye-slash",
"far fa-eye-slash",
"fab fa-facebook",
"fab fa-facebook-f",
"fab fa-facebook-messenger",
"fab fa-facebook-square",
"fas fa-fast-backward",
"fas fa-fast-forward",
"fas fa-fax",
"fas fa-female",
"fas fa-fighter-jet",
"fas fa-file",
"far fa-file",
"fas fa-file-alt",
"far fa-file-alt",
"fas fa-file-archive",
"far fa-file-archive",
"fas fa-file-audio",
"far fa-file-audio",
"fas fa-file-code",
"far fa-file-code",
"fas fa-file-excel",
"far fa-file-excel",
"fas fa-file-image",
"far fa-file-image",
"fas fa-file-pdf",
"far fa-file-pdf",
"fas fa-file-powerpoint",
"far fa-file-powerpoint",
"fas fa-file-video",
"far fa-file-video",
"fas fa-file-word",
"far fa-file-word",
"fas fa-film",
"fas fa-filter",
"fas fa-fire",
"fas fa-fire-extinguisher",
"fab fa-firefox",
"fab fa-first-order",
"fab fa-firstdraft",
"fas fa-flag",
"far fa-flag",
"fas fa-flag-checkered",
"fas fa-flask",
"fab fa-flickr",
"fab fa-fly",
"fas fa-folder",
"far fa-folder",
"fas fa-folder-open",
"far fa-folder-open",
"fas fa-font",
"fab fa-font-awesome",
"fab fa-font-awesome-alt",
"fab fa-font-awesome-flag",
"fab fa-fonticons",
"fab fa-fonticons-fi",
"fab fa-fort-awesome",
"fab fa-fort-awesome-alt",
"fab fa-forumbee",
"fas fa-forward",
"fab fa-foursquare",
"fab fa-free-code-camp",
"fab fa-freebsd",
"fas fa-frown",
"far fa-frown",
"fas fa-futbol",
"far fa-futbol",
"fas fa-gamepad",
"fas fa-gavel",
"fas fa-gem",
"far fa-gem",
"fas fa-genderless",
"fab fa-get-pocket",
"fab fa-gg",
"fab fa-gg-circle",
"fas fa-gift",
"fab fa-git",
"fab fa-git-square",
"fab fa-github",
"fab fa-github-alt",
"fab fa-github-square",
"fab fa-gitkraken",
"fab fa-gitlab",
"fab fa-gitter",
"fas fa-glass-martini",
"fab fa-glide",
"fab fa-glide-g",
"fas fa-globe",
"fab fa-gofore",
"fab fa-goodreads",
"fab fa-goodreads-g",
"fab fa-google",
"fab fa-google-drive",
"fab fa-google-play",
"fab fa-google-plus",
"fab fa-google-plus-g",
"fab fa-google-plus-square",
"fab fa-google-wallet",
"fas fa-graduation-cap",
"fab fa-gratipay",
"fab fa-grav",
"fab fa-gripfire",
"fab fa-grunt",
"fab fa-gulp",
"fas fa-h-square",
"fab fa-hacker-news",
"fab fa-hacker-news-square",
"fas fa-hand-lizard",
"far fa-hand-lizard",
"fas fa-hand-paper",
"far fa-hand-paper",
"fas fa-hand-peace",
"far fa-hand-peace",
"fas fa-hand-point-down",
"far fa-hand-point-down",
"fas fa-hand-point-left",
"far fa-hand-point-left",
"fas fa-hand-point-right",
"far fa-hand-point-right",
"fas fa-hand-point-up",
"far fa-hand-point-up",
"fas fa-hand-pointer",
"far fa-hand-pointer",
"fas fa-hand-rock",
"far fa-hand-rock",
"fas fa-hand-scissors",
"far fa-hand-scissors",
"fas fa-hand-spock",
"far fa-hand-spock",
"fas fa-handshake",
"far fa-handshake",
"fas fa-hashtag",
"fas fa-hdd",
"far fa-hdd",
"fas fa-heading",
"fas fa-headphones",
"fas fa-heart",
"far fa-heart",
"fas fa-heartbeat",
"fab fa-hire-a-helper",
"fas fa-history",
"fas fa-home",
"fab fa-hooli",
"fas fa-hospital",
"far fa-hospital",
"fab fa-hotjar",
"fas fa-hourglass",
"far fa-hourglass",
"fas fa-hourglass-end",
"fas fa-hourglass-half",
"fas fa-hourglass-start",
"fab fa-houzz",
"fab fa-html5",
"fab fa-hubspot",
"fas fa-i-cursor",
"fas fa-id-badge",
"far fa-id-badge",
"fas fa-id-card",
"far fa-id-card",
"fas fa-image",
"far fa-image",
"fas fa-images",
"far fa-images",
"fab fa-imdb",
"fas fa-inbox",
"fas fa-indent",
"fas fa-industry",
"fas fa-info",
"fas fa-info-circle",
"fab fa-instagram",
"fab fa-internet-explorer",
"fab fa-ioxhost",
"fas fa-italic",
"fab fa-itunes",
"fab fa-itunes-note",
"fab fa-jenkins",
"fab fa-joget",
"fab fa-joomla",
"fab fa-js",
"fab fa-js-square",
"fab fa-jsfiddle",
"fas fa-key",
"fas fa-keyboard",
"far fa-keyboard",
"fab fa-keycdn",
"fab fa-kickstarter",
"fab fa-kickstarter-k",
"fas fa-language",
"fas fa-laptop",
"fab fa-laravel",
"fab fa-lastfm",
"fab fa-lastfm-square",
"fas fa-leaf",
"fab fa-leanpub",
"fas fa-lemon",
"far fa-lemon",
"fab fa-less",
"fas fa-level-down-alt",
"fas fa-level-up-alt",
"fas fa-life-ring",
"far fa-life-ring",
"fas fa-lightbulb",
"far fa-lightbulb",
"fab fa-line",
"fas fa-link",
"fab fa-linkedin",
"fab fa-linkedin-in",
"fab fa-linode",
"fab fa-linux",
"fas fa-lira-sign",
"fas fa-list",
"fas fa-list-alt",
"far fa-list-alt",
"fas fa-list-ol",
"fas fa-list-ul",
"fas fa-location-arrow",
"fas fa-lock",
"fas fa-lock-open",
"fas fa-long-arrow-alt-down",
"fas fa-long-arrow-alt-left",
"fas fa-long-arrow-alt-right",
"fas fa-long-arrow-alt-up",
"fas fa-low-vision",
"fab fa-lyft",
"fab fa-magento",
"fas fa-magic",
"fas fa-magnet",
"fas fa-male",
"fas fa-map",
"far fa-map",
"fas fa-map-marker",
"fas fa-map-marker-alt",
"fas fa-map-pin",
"fas fa-map-signs",
"fas fa-mars",
"fas fa-mars-double",
"fas fa-mars-stroke",
"fas fa-mars-stroke-h",
"fas fa-mars-stroke-v",
"fab fa-maxcdn",
"fab fa-medapps",
"fab fa-medium",
"fab fa-medium-m",
"fas fa-medkit",
"fab fa-medrt",
"fab fa-meetup",
"fas fa-meh",
"far fa-meh",
"fas fa-mercury",
"fas fa-microchip",
"fas fa-microphone",
"fas fa-microphone-slash",
"fab fa-microsoft",
"fas fa-minus",
"fas fa-minus-circle",
"fas fa-minus-square",
"far fa-minus-square",
"fab fa-mix",
"fab fa-mixcloud",
"fab fa-mizuni",
"fas fa-mobile",
"fas fa-mobile-alt",
"fab fa-modx",
"fab fa-monero",
"fas fa-money-bill-alt",
"far fa-money-bill-alt",
"fas fa-moon",
"far fa-moon",
"fas fa-motorcycle",
"fas fa-mouse-pointer",
"fas fa-music",
"fab fa-napster",
"fas fa-neuter",
"fas fa-newspaper",
"far fa-newspaper",
"fab fa-nintendo-switch",
"fab fa-node",
"fab fa-node-js",
"fab fa-npm",
"fab fa-ns8",
"fab fa-nutritionix",
"fas fa-object-group",
"far fa-object-group",
"fas fa-object-ungroup",
"far fa-object-ungroup",
"fab fa-odnoklassniki",
"fab fa-odnoklassniki-square",
"fab fa-opencart",
"fab fa-openid",
"fab fa-opera",
"fab fa-optin-monster",
"fab fa-osi",
"fas fa-outdent",
"fab fa-page4",
"fab fa-pagelines",
"fas fa-paint-brush",
"fab fa-palfed",
"fas fa-paper-plane",
"far fa-paper-plane",
"fas fa-paperclip",
"fas fa-paragraph",
"fas fa-paste",
"fab fa-patreon",
"fas fa-pause",
"fas fa-pause-circle",
"far fa-pause-circle",
"fas fa-paw",
"fab fa-paypal",
"fas fa-pen-square",
"fas fa-pencil-alt",
"fas fa-percent",
"fab fa-periscope",
"fab fa-phabricator",
"fab fa-phoenix-framework",
"fas fa-phone",
"fas fa-phone-square",
"fas fa-phone-volume",
"fab fa-pied-piper",
"fab fa-pied-piper-alt",
"fab fa-pied-piper-pp",
"fab fa-pinterest",
"fab fa-pinterest-p",
"fab fa-pinterest-square",
"fas fa-plane",
"fas fa-play",
"fas fa-play-circle",
"far fa-play-circle",
"fab fa-playstation",
"fas fa-plug",
"fas fa-plus",
"fas fa-plus-circle",
"fas fa-plus-square",
"far fa-plus-square",
"fas fa-podcast",
"fas fa-pound-sign",
"fas fa-power-off",
"fas fa-print",
"fab fa-product-hunt",
"fab fa-pushed",
"fas fa-puzzle-piece",
"fab fa-python",
"fab fa-qq",
"fas fa-qrcode",
"fas fa-question",
"fas fa-question-circle",
"far fa-question-circle",
"fab fa-quora",
"fas fa-quote-left",
"fas fa-quote-right",
"fas fa-random",
"fab fa-ravelry",
"fab fa-react",
"fab fa-rebel",
"fas fa-recycle",
"fab fa-red-river",
"fab fa-reddit",
"fab fa-reddit-alien",
"fab fa-reddit-square",
"fas fa-redo",
"fas fa-redo-alt",
"fas fa-registered",
"far fa-registered",
"fab fa-rendact",
"fab fa-renren",
"fas fa-reply",
"fas fa-reply-all",
"fab fa-replyd",
"fab fa-resolving",
"fas fa-retweet",
"fas fa-road",
"fas fa-rocket",
"fab fa-rocketchat",
"fab fa-rockrms",
"fas fa-rss",
"fas fa-rss-square",
"fas fa-ruble-sign",
"fas fa-rupee-sign",
"fab fa-safari",
"fab fa-sass",
"fas fa-save",
"far fa-save",
"fab fa-schlix",
"fab fa-scribd",
"fas fa-search",
"fas fa-search-minus",
"fas fa-search-plus",
"fab fa-searchengin",
"fab fa-sellcast",
"fab fa-sellsy",
"fas fa-server",
"fab fa-servicestack",
"fas fa-share",
"fas fa-share-alt",
"fas fa-share-alt-square",
"fas fa-share-square",
"far fa-share-square",
"fas fa-shekel-sign",
"fas fa-shield-alt",
"fas fa-ship",
"fab fa-shirtsinbulk",
"fas fa-shopping-bag",
"fas fa-shopping-basket",
"fas fa-shopping-cart",
"fas fa-shower",
"fas fa-sign-in-alt",
"fas fa-sign-language",
"fas fa-sign-out-alt",
"fas fa-signal",
"fab fa-simplybuilt",
"fab fa-sistrix",
"fas fa-sitemap",
"fab fa-skyatlas",
"fab fa-skype",
"fab fa-slack",
"fab fa-slack-hash",
"fas fa-sliders-h",
"fab fa-slideshare",
"fas fa-smile",
"far fa-smile",
"fab fa-snapchat",
"fab fa-snapchat-ghost",
"fab fa-snapchat-square",
"fas fa-snowflake",
"far fa-snowflake",
"fas fa-sort",
"fas fa-sort-alpha-down",
"fas fa-sort-alpha-up",
"fas fa-sort-amount-down",
"fas fa-sort-amount-up",
"fas fa-sort-down",
"fas fa-sort-numeric-down",
"fas fa-sort-numeric-up",
"fas fa-sort-up",
"fab fa-soundcloud",
"fas fa-space-shuttle",
"fab fa-speakap",
"fas fa-spinner",
"fab fa-spotify",
"fas fa-square",
"far fa-square",
"fab fa-stack-exchange",
"fab fa-stack-overflow",
"fas fa-star",
"far fa-star",
"fas fa-star-half",
"far fa-star-half",
"fab fa-staylinked",
"fab fa-steam",
"fab fa-steam-square",
"fab fa-steam-symbol",
"fas fa-step-backward",
"fas fa-step-forward",
"fas fa-stethoscope",
"fab fa-sticker-mule",
"fas fa-sticky-note",
"far fa-sticky-note",
"fas fa-stop",
"fas fa-stop-circle",
"far fa-stop-circle",
"fab fa-strava",
"fas fa-street-view",
"fas fa-strikethrough",
"fab fa-stripe",
"fab fa-stripe-s",
"fab fa-studiovinari",
"fab fa-stumbleupon",
"fab fa-stumbleupon-circle",
"fas fa-subscript",
"fas fa-subway",
"fas fa-suitcase",
"fas fa-sun",
"far fa-sun",
"fab fa-superpowers",
"fas fa-superscript",
"fab fa-supple",
"fas fa-sync",
"fas fa-sync-alt",
"fas fa-table",
"fas fa-tablet",
"fas fa-tablet-alt",
"fas fa-tachometer-alt",
"fas fa-tag",
"fas fa-tags",
"fas fa-tasks",
"fas fa-taxi",
"fab fa-telegram",
"fab fa-telegram-plane",
"fab fa-tencent-weibo",
"fas fa-terminal",
"fas fa-text-height",
"fas fa-text-width",
"fas fa-th",
"fas fa-th-large",
"fas fa-th-list",
"fab fa-themeisle",
"fas fa-thermometer-empty",
"fas fa-thermometer-full",
"fas fa-thermometer-half",
"fas fa-thermometer-quarter",
"fas fa-thermometer-three-quarters",
"fas fa-thumbs-down",
"far fa-thumbs-down",
"fas fa-thumbs-up",
"far fa-thumbs-up",
"fas fa-thumbtack",
"fas fa-ticket-alt",
"fas fa-times",
"fas fa-times-circle",
"far fa-times-circle",
"fas fa-tint",
"fas fa-toggle-off",
"fas fa-toggle-on",
"fas fa-trademark",
"fas fa-train",
"fas fa-transgender",
"fas fa-transgender-alt",
"fas fa-trash",
"fas fa-trash-alt",
"far fa-trash-alt",
"fas fa-tree",
"fab fa-trello",
"fab fa-tripadvisor",
"fas fa-trophy",
"fas fa-truck",
"fas fa-tty",
"fab fa-tumblr",
"fab fa-tumblr-square",
"fas fa-tv",
"fab fa-twitch",
"fab fa-twitter",
"fab fa-twitter-square",
"fab fa-typo3",
"fab fa-uber",
"fab fa-uikit",
"fas fa-umbrella",
"fas fa-underline",
"fas fa-undo",
"fas fa-undo-alt",
"fab fa-uniregistry",
"fas fa-universal-access",
"fas fa-university",
"fas fa-unlink",
"fas fa-unlock",
"fas fa-unlock-alt",
"fab fa-untappd",
"fas fa-upload",
"fab fa-usb",
"fas fa-user",
"far fa-user",
"fas fa-user-circle",
"far fa-user-circle",
"fas fa-user-md",
"fas fa-user-plus",
"fas fa-user-secret",
"fas fa-user-times",
"fas fa-users",
"fab fa-ussunnah",
"fas fa-utensil-spoon",
"fas fa-utensils",
"fab fa-vaadin",
"fas fa-venus",
"fas fa-venus-double",
"fas fa-venus-mars",
"fab fa-viacoin",
"fab fa-viadeo",
"fab fa-viadeo-square",
"fab fa-viber",
"fas fa-video",
"fab fa-vimeo",
"fab fa-vimeo-square",
"fab fa-vimeo-v",
"fab fa-vine",
"fab fa-vk",
"fab fa-vnv",
"fas fa-volume-down",
"fas fa-volume-off",
"fas fa-volume-up",
"fab fa-vuejs",
"fab fa-weibo",
"fab fa-weixin",
"fab fa-whatsapp",
"fab fa-whatsapp-square",
"fas fa-wheelchair",
"fab fa-whmcs",
"fas fa-wifi",
"fab fa-wikipedia-w",
"fas fa-window-close",
"far fa-window-close",
"fas fa-window-maximize",
"far fa-window-maximize",
"fas fa-window-minimize",
"fas fa-window-restore",
"far fa-window-restore",
"fab fa-windows",
"fas fa-won-sign",
"fab fa-wordpress",
"fab fa-wordpress-simple",
"fab fa-wpbeginner",
"fab fa-wpexplorer",
"fab fa-wpforms",
"fas fa-wrench",
"fab fa-xbox",
"fab fa-xing",
"fab fa-xing-square",
"fab fa-y-combinator",
"fab fa-yahoo",
"fab fa-yandex",
"fab fa-yandex-international",
"fab fa-yelp",
"fas fa-yen-sign",
"fab fa-yoast",
"fab fa-youtube"
]
}
export default FontAwesomeIcons;