Ich füge Stile hinzu, wenn ich meinen Block registriere:
styles: [
{ name: "my-style-1", label: "Style Name" }
{ name: "my-style-2", label: "Style Name 2" }
],
Wie kann ich in den Funktionen edit() und save() sehen, welcher Stil/Klassenname ausgewählt wurde?
Ich habe zum Beispiel versucht:
edit( { attributes, setAttributes, styles } ) {
const blockProps = useBlockProps();
const { quote, name, title } = attributes;
console.log(styles);
console.log(blockProps.styles);
...
Aber es kommt undefiniert zurück.
Ich muss zum Beispiel die Stile für Bedingungen verwenden …
if (style == 'my-style-1') {
// do something if style 1 was selected
}
Der Name des ausgewählten Blockstils, wie in Ihrem definiert Stile[{…}] ist erhältlich im edit()
funktionieren als className
:
edit({ attributes, setAttributes, className}) {
console.log(className);
...
}
Ich würde vorschlagen, wenn Sie Elemente basierend auf ihrem Stil neu anordnen möchten, erstellen Sie Blockstile und verwenden Sie CSS Flexbox, um die Neuordnung zu verwalten, z display:flex
für Ihr Wrapper-Div und order: ...
für die untergeordneten Elemente (wie <img>
und <p>
). Durch die Verwendung von Stilen ändert sich beim Speichern des Inhalts das zugrunde liegende HTML-Markup nicht, sodass weniger der gefürchtete Fehler „Blockvalidierung“ auftritt (und Sie erhalten eine Vorschau des Stils im Editor). Achten Sie darauf, zu speichern blockProps
in dem save()
so wird die gewählte Klasse angewendet, z. B.:
edit({ attributes, setAttributes, className }) {
const blockProps = useBlockProps();
console.log(className);
return (
<div {...blockProps}>
<h2>Hello</h2><img />
</div>
);
},
save({ attributes }) {
const blockProps = useBlockProps.save();
return (<div {...blockProps}><h2>Hello</h2><img /></div>)
}
Die generierte Klasse, die auf die angewendet wird <div>
wird sein .wp-block-myblock-name .is-style-my-style-1
Ich würde dir die Verwendung empfehlen Variationen blockieren anstelle von Blockstilen. Beim Erstellen einer Variante können Sie Attributwerte zuweisen.
Zum Beispiel:
index.php
registerBlockType('xy/yourBlock', {
title: 'xy',
description: 'xy',
attributes: {
quote: {
type: 'string'
},
name: {
type: 'string'
},
title: {
type: 'string'
},
style: {
type: 'string'
}
},
variations: [
{
name: 'my-style-1',
isDefault: true,
title: 'Style Name',
attributes: { style: 'my-style-1' },
scope: 'transform',
},
{
name: 'my-style-2',
title: 'Style Name 2',
attributes: { style: 'my-style-2' },
scope: 'transform',
},
],
})
Mit Scope: ‘transform’ können Sie Ihre Variante in den Blockeinstellungen auf der rechten Seite auswählen. Sobald eine Variation ausgewählt ist, können Sie sie in Ihrer Bearbeitungs- und Speicherdatei wie jedes andere Attribut aufrufen.
edit( { attributes, setAttributes } ) {
const { quote, name, title, style } = attributes;
console.log(style);
if (style == 'my-style-1') {
// do something if style 1 was selected
}
14379700cookie-checkWordPress Gutenberg erhält Blockstile von useBlockPropsyes