WordPress Gutenberg-Block mit RichText-Feld
Blöcke speichern statische Inhalte im content
-Feld der attributes
.
Die edit
-Funktion speichert statische Inhalte im Backend darin, wenn sie einen geänderten Inhalt feststellt und die Funktion aufruft, die an onChange
gebunden ist. Diese speichert die geänderten Werte in content
zurück.
Hier ist der statische Inhalt ein benutzerdefinierbares RichtText-Feld.
Die save
-Funktion im Frontent baut das RichText-Feld aus den Inhalten des content
-Felds zusammen:
(function (blocks, i18n, editor, element) { var el = element.createElement; var __ = i18n.__; var RichText = editor.RichText; blocks.registerBlockType('harald-melcher-blocks/block-01', { title: __('Harald Melcher: Editable', 'harald-melcher-blocks'), icon: 'universal-access-alt', category: 'layout', attributes: { content: { type: 'array', source: 'children', selector: 'p' } }, edit: function (props) { var content = props.attributes.content; function onChangeContent(newContent) { props.setAttributes({content: newContent}); } return el( RichText, { tagName: 'p', className: props.className, onChange: onChangeContent, value: content } ); }, save: function (props) { return el(RichText.Content, { tagName: 'p', value: props.attributes.content } ); } }); } ( window.wp.blocks, window.wp.i18n, window.wp.editor, window.wp.element ) );
Das PHP-Script sieht aus wie bei den einfacheren Blöcken, lediglich erweitert um ein Arrayelement, das WordPress sagt, den Javasctipt-Anteil des RichText-Editors (wp-editor
) zu laden:
wp_register_script( 'harald-melcher-blocks-01', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) );