Benutzerdefinierter Gutenberg-Block mit ansprechenden Bildern

Ich habe dieses Tutorial zum Erstellen eines benutzerdefinierten WordPress Gutenberg-Blocks befolgt: https://neliosoftware.com/blog/how-to-create-your-first-block-for-gutenberg/

Dieser erste Block ist nett, aber ich möchte in diesem Block eine benutzerdefinierte Bildgröße verwenden. Diese Bildgröße sollte auch responsiv sein, d.h. auf dem Frontend sollten srcset-Attribute zu anderen Bildgrößen hinzugefügt werden.

Ich habe lange im Internet gesucht aber nichts gefunden. Mit dem Standard-Bild-Block oder Galerie-Block werden skalierte Bilder aus WordPress verwendet, aber für mich ist dieser ganze Code zu kompliziert, um ihm zu folgen, weil ich mich noch nicht an die Gutenberg-Methode des Codierens gewöhnt habe …

Gibt es einen bestehenden Leitfaden oder ein Codebeispiel, wie dies erreicht werden könnte?

Bester Lukas

Ich habe eine Lösung mit Hilfe von gefunden dieses Gutenberg-Github-Problem. Die einfache Antwort ist, dass WordPress (php) alle Bilder mit dem Klassennamen konvertiert wp-image-<id> automatisch reagieren, mit der wp_make_content_images_responsive-Funktion.

Alles, was Sie tun müssen, ist, den obigen Klassennamen zu Ihrem Bild in der hinzuzufügen save Funktion.

Angewendet auf das von Ihnen erwähnte Beispiel würde es in etwa so aussehen:

save: function( props ) {
  var attributes = props.attributes;
  var alignment = props.attributes.alignment;
  var imageClass="wp-image-" + props.attributes.mediaId;

  return (
    el( 'div', { className: props.className },
      attributes.mediaURL &&
      el( 'div', { className: 'nelio-testimonial-image', style: { backgroundImage: 'url('+attributes.mediaURL+')' } },
        el( 'img', { src: attributes.mediaURL, class: imageClass } ),
      ),
      el( 'div', { className: 'nelio-testimonial-content', style: { textAlign: attributes.alignment } },
        attributes.testimonial && el( 'p', {}, attributes.testimonial ),
        el( 'p', { className: 'nelio-testimonial-name' }, attributes.name ),
        attributes.position && el( 'p', { className: 'nelio-testimonial-position' }, attributes.position )
      )
    )
  );
},