WordPress Gutenberg erhält Blockstile von useBlockProps

Lesezeit: 2 Minuten

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
    }

  • Danke für die Antwort! Ich bin mir nicht sicher, ob das der richtige Ansatz ist. Blockvariationen scheinen mehrere Blöcke mit unterschiedlichen Bedienfeldeinstellungen zu erstellen. Ich versuche, verschiedene einfache Stile für denselben Block zu erstellen. Beispielsweise ein Stil, bei dem sich ein Bild unter dem Text befindet, ein anderer Stil, bei dem sich das Bild über dem Text befindet. Dies scheint mit Stilen am besten zu sein, da sie auch in der Vorschau angezeigt werden können.

    – CyberJ

    18. Oktober 2021 um 16:06 Uhr


1437970cookie-checkWordPress Gutenberg erhält Blockstile von useBlockProps

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy