Verwenden Sie ein modales Popup, um zusätzliche Attribute mit registerBlockFormat hinzuzufügen
Wir haben uns das Anwenden von Formaten auf Ihren Beitragsinhalt mit registerFormatType angesehen. Aber was ist, wenn wir unserem Textmarker zusätzliche Farben hinzufügen möchten?
In diesem Leitfaden erweitern wir unsere bisherige Arbeit und fügen ein modales Popup hinzu, mit dem wir eine Hervorhebungsfarbe auswählen können.
Beachten Sie, dass dieses modale Popup eine beliebige Anzahl von Elementen enthalten kann, einschließlich benutzerdefinierter Symbole, Bilder oder sogar Formularfelder.
Der gesamte Code, der in diesem Tutorial verwendet wird, ist im kostenlosen Plugin „Highlighter“ zu finden .
Anwenden eines Formattyps mit dem Highlighter-Plugin.
Das obige Video zeigt das Highlighter-Plugin, unseren Formattyp und das Popup in Aktion. Springen wir dazu.
Voraussetzungen
- Lesen Sie den Leitfaden zum Erstellen eines Plugins für den WordPress-Blockeditor (Gutenberg), damit Sie mit der Erstellung des Plugins beginnen können.
- Befolgen Sie die Schritte im Artikel Formatieren Sie Ihren Beitragsinhalt mit registerFormatType.
- Laden Sie optional das kostenlose „Highlighter“-Plugin von GitHub herunter und sehen Sie sich die Datei an
/src/formats/highlight-colours.js
Erstellen Sie das Modal
Um das modale Popover zu erstellen, verwenden wir den Status, um festzustellen, ob auf die Schaltfläche geklickt wurde oder nicht. Dazu importieren Sie useStateaus '@wordpress/element'.
Innerhalb der Schaltflächenkomponente über der return-Anweisung werden wir diese verwenden, um einen Anfangszustand festzulegen und unsere Zustandssetzerfunktionen zu erstellen.
// State to show popover.
const [ showPopover, setShowPopover ] = useState( false );
Wir werden dann das Klickereignis der Schaltfläche ändern, um den Zustand festzulegen.
onClick={() => {
setShowPopover( true );
} }
Nachdem der Zustand nun festgelegt ist, können wir dies verwenden, um das Popover auszulösen. Importieren Sie zuerst die URLPopoverKomponente aus '@wordpress/block-editor'. Fügen Sie dann innerhalb der return-Anweisung unter der Schaltfläche eine Bedingung hinzu, die die showPopoverVariable übernimmt und die URLPopover.
return (<>
<RichTextToolbarButton
icon='edit'
onClick={() => {
setShowPopover( true );
} }
title={ __( 'Highlight', 'wholesome-highlighter') }
/>
{ showPopover && (<URLPopover
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
...
</URLPopover>) }
</>) Beachten Sie, dass wir die beiden Komponenten mit leeren Tags umschlossen haben <></>. Diese dienen dem Zweck des <Fragment>Tags und ermöglichen es zwei JSX-Komponenten zu rendern, ohne Markup auf dem Frontend auszugeben.
Fügen Sie den modalen Popover-Inhalt hinzu
Da dies ein Textmarker-Plugin ist, werden wir es aus dem modalen Popover importieren ColorPaletteund '@wordpress/block-editor'dort platzieren.
<URLPopover
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
<ColorPalette
onChange={ (color) => {
setShowPopover( false );
if (color) {
onChange(
applyFormat( value, {
type: name,
attributes: { style: `background-color: ${color};` },
}
));
} else {
onChange( toggleFormat( value, { type: name }) );
}
} }
/>
</URLPopover>
Der obige Code verwendet die Standardfarbpalette im Popover. Es ist mehr Arbeit erforderlich, um unsere benutzerdefinierten Farben hinzuzufügen.
Der Kodex in voller Länge
Um zu demonstrieren, wie wir der Palette benutzerdefinierte Farben hinzufügen, ist es wahrscheinlich am besten, den vollständigen Code anzuzeigen. Sie können diese Datei auch zusammen mit den neuesten Updates von Github herunterladen.
import { ColorPalette, RichTextToolbarButton, URLPopover } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { applyFormat, registerFormatType, toggleFormat, useAnchorRef } from '@wordpress/rich-text';
import '../style.scss';
const name = 'wholesome/highlighter';
const cssClass = 'wholesome-highlight';
const HighlighterButton = (props) => {
const { contentRef, isActive, onChange, value } = props;
const { activeFormats } = value;
const anchorRef = useAnchorRef( { ref: contentRef, value } );
const highlighterIcon = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.2186 3.31061C13.7838 2.89252 13.0834 2.89708 12.6543 3.32078L9.22512 6.70711C9.17494 6.75668 9.13068 6.80978 9.09236 6.86558L7.36613 8.57021L11.393 12.4419L16.362 7.50771L16.6812 7.1925C17.1103 6.76879 17.1056 6.08638 16.6708 5.66828L14.2186 3.31061Z" fill="black"/>
<path d="M6.81914 9.10588L10.8041 12.9457L9.79592 13.9391C9.42424 14.3053 8.84982 14.3575 8.42039 14.0938L7.83675 13.8883L7.01822 14.6819L5.03321 12.7381L5.86163 11.9349L5.67624 11.454C5.39121 11.0373 5.43547 10.4692 5.811 10.0992L6.81914 9.10588Z" fill="black"/>
<path d="M5.11329 13.6189L6.13911 14.5945L5.70907 15L4 14.592L5.11329 13.6189Z" fill="black"/>
</svg>;
const [ showPopover, setShowPopover ] = useState( false );
const [ activeColor, setActiveColor ] = useState( false );
const colors = [
{ name: 'Yellow', color: '#fff300' },
{ name: 'Green', color: '#79fe0c' },
{ name: 'Blue', color: '#4af1f2' },
{ name: 'Purple', color: '#df00ff' },
{ name: 'Red', color: '#ff2226' },
{ name: 'Orange', color: '#ff7b19' },
{ name: 'Pink', color: '#ff70c5' },
];
const getActiveColor = () => {
const formats = activeFormats.filter( format => name === format['type'] );
if (formats.length > 0) {
const format = formats[0];
const { attributes, unregisteredAttributes } = format;
let atts = unregisteredAttributes;
if (attributes && attributes.length) {
atts = attributes;
}
if (! atts) {
if (activeColor) {
return { backgroundColor: activeColor };
}
return;
}
if (atts.hasOwnProperty('class')) {
const parts = atts.class.split( '--' );
const colorName = parts[ parts.length - 1 ];
const selectedColor = colors.filter( item => colorName === item.name.toLowerCase() )[0];
return { backgroundColor: selectedColor.color };
} else if (atts.hasOwnProperty('style')) {
const { style } = atts;
const parts = style.split( ': ' );
const selectedColor = parts[ parts.length - 1 ].replace( ';', '' );
return { backgroundColor: selectedColor };
}
}
};
return (<>
<RichTextToolbarButton
icon={
<>
<Icon icon={ highlighterIcon } />
{ isActive && (<span
className="format-library-text-color-button__indicator"
style={ getActiveColor() }
/>) }
</>
}
key={ isActive? 'text-color': 'text-color-not-active' }
name={ isActive? 'text-color': undefined }
onClick={ () => {
setShowPopover( true );
} }
title={ __( 'Highlight', 'wholesome-highlighter') }
/>
{ showPopover && (<URLPopover
anchorRef={ anchorRef }
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
<ColorPalette
colors={ colors }
onChange={ (color) => {
setShowPopover( false );
setActiveColor( color );
if (color) {
const selectedColor = colors.filter( item => color === item.color );
const attributes = {};
if (selectedColor.length) {
attributes.class = `${cssClass}--${selectedColor[0].name.toLowerCase()}`;
} else {
attributes.style = `background-color: ${color};`;
}
onChange(
applyFormat( value, {
type: name,
attributes,
}
));
} else {
onChange( toggleFormat( value, { type: name }) );
}
} }
/>
</URLPopover>) }
</>) };
registerFormatType(
name, {
className: cssClass,
edit: HighlighterButton,
tagName: 'mark',
title: __( 'Highlight', 'wholesome-highlighter' ),
}
);
Stellen Sie sicher, dass Sie die Farben für Ihre benutzerdefinierten Farben in der /src/style.scssDatei festlegen, und schon haben Sie ein Textmarkerformat mit Farbpalette.
.wholesome-highlight {
&.wholesome-highlight--yellow {
background-color: #fff300;
}
&.wholesome-highlight--green {
background-color: #79fe0c;
}
&.wholesome-highlight--blue {
background-color: #4af1f2;
}
&.wholesome-highlight--purple {
background-color: #df00ff;
}
&.wholesome-highlight--red {
background-color: #ff2226;
}
&.wholesome-highlight--orange {
background-color: #ff7b19;
}
&.wholesome-highlight--pink {
background-color: #ff70c5;
}
}
Highlighter ausgewähltes Farbsymbol
- Fügen Sie eine Blockseitenleiste mit InspectorControls hinzu
- Sehen Sie sich die Verwendung von Post-Meta-Feldern in Gutenberg-Blöcken an
- Sehen Sie sich die Verwendung von Optionen und Einstellungen in Gutenberg-Blöcken an
- Sehen Sie sich das Erstellen einer Options- und Einstellungsseite mit Gutenberg-Komponenten an