Transform
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.
Hier ein Beispiel vom sogenannten Transform Tool
Let's code!
Innerhalb deines Blocks fügst du diese Zeilen Code hin. Danach erkläre ich dir das Schritt für Schritt.
1
// Dependencies
2
import { registerBlockType } from '@wordpress/blocks';
3
import { __ } from '@wordpress/i18n';
4
import { TextControl } from '@wordpress/components';
5
import { Fragment } from '@wordpress/element';
6
import { createBlock } from '@wordpress/blocks';
7
8
// Füge dies innerhalb deiner registerBlockType() Funktion hinzu
9
transforms: {
10
11
// Anderen Block in unseren jetzigen umwandeln.
12
from: [
13
{
14
type: 'block',
15
blocks: [ 'core/paragraph', 'core/heading' ],
16
17
transform: ( { content } ) => {
18
return createBlock( 'prwp-blocks/transform', {
19
headline: content
20
} );
21
},
22
},
23
24
// Shortcut erstellen / Space(Leerzeichen) danach drücken
25
{
26
type: 'prefix',
27
prefix: '#prwp',
28
transform: ( ) => {
29
return createBlock( 'prwp-blocks/transform');
30
}
31
}
32
],
33
34
// Jetzigen Block in einem anderen Block umwandeln
35
to: [
36
{
37
type: 'block',
38
blocks: [ 'core/heading'],
39
transform: ( { headline } ) => {
40
return(
41
createBlock( 'core/heading', {
42
content: headline
43
})
44
)
45
},
46
}
47
]
48
},
Copied!
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 Standardblocks definiert.
Innerhalb des Codes kannst du gerne die Kommentare lesen, die dir das Lesen erleichtert.
Last modified 2yr ago
Export as PDF
Copy link
Contents
Let's code!