Utveckla Gutenberg Block via React i WordPress

Fördelar med React

React är ett JavaScript-ramverk som gör det möjligt för utvecklare att skapa interaktiva och responsiva gränssnitt. Det finns flera fördelar med att använda React för utveckling av Gutenberg block i WordPress.

Kompetensbaserad utveckling

Genom att använda React och dess komponentbaserade utvecklingsmetod kan utvecklare skapa komponenter som är lätta att återanvända och organisera på ett enhetligt sätt. Detta gör det lättare att hålla koden strukturerad och lättläst, samt gör det enklare att hålla koll på ändringar i koden.

Virtuell DOM

React använder sig av en virtuell DOM (Document Object Model) vilket gör det möjligt att optimera prestandan genom att endast uppdatera det som behöver uppdateras när det sker ändringar i komponenterna. Det gör det möjligt att skapa snabba och responsiva gränssnitt utan att det påverkar prestandan negativt.

Enkel integration

React är ett fristående ramverk som är lätt att integrera med befintliga WordPress-installationer. Det gör det möjligt att använda befintliga plugin och teman tillsammans med React-block, samtidigt som man kan fortsätta använda befintliga verktyg och arbetsflöden.

Stor community & ökad användarvänlighet

React är ett mycket populärt ramverk med en stor community av utvecklare. Det gör det lättare att hitta lösningar på problem och få hjälp vid behov, samt att det finns en mängd olika verktyg och dokumentation tillgängliga för att registrera block i WordPress. React gör det möjligt att skapa interaktiva och responsiva gränssnitt som är lätta att använda för användaren, vilket kan leda till ökad användarvänlighet och bättre användarupplevelse. Detta kan leda till ökad konvertering och mer nöjda användare, bra eller hur?!

Block registering via React och Advanced Custom Fields

Advanced Custom Fields (ACF) är ett plugin för WordPress som gör det möjligt för utvecklare att skapa anpassade fält och metaboxar för innehållsredigering. Det är ett väldigt bra komplement till Gutenberg. ACF är enkel att använda och kräver inte kunskap i React eller annat JavaScript-ramverk för utvecklare. Men det ger inte samma möjligheter till avancerade och flexibla block som React ger. Prestanda kan också vara en begränsning med ACF jämfört med React som kan optimera prestandan genom virtuell DOM, som vi nämnde tidigare.

Utveckla Gutenberg block via react

När det kommer till att skapa block med React i Gutenberg, så är det viktigt att registrera blocket i WordPress med hjälp av registerBlockType från WordPress-paketet @wordpress/blocks. 

import { registerBlockType } from "@wordpress/blocks";
import { TextControl } from '@wordpress/components';

registerBlockType("dbyh/my-awesome-block", {
   title: "React block",
   icon: "heart",
   category: "common",
   attributes: {
       content: {
           type: "string",
           source: "text",
           selector: "p",
       },
   },
   edit: (props) => {
       const {
           attributes: { content },
           setAttributes,
       } = props;
       return (
           <div>
               <TextControl
                   label="Content"
                   value={content}
                   onChange={(newContent) =>
                       setAttributes({ content: newContent })
                   }
               />
           </div>
       );
   },

   save: (props) => {
       const {
           attributes: { content },
       } = props;

       return <p>{content}</p>;
   },
});

Så här registrerar man ett block med hjälp av registerBlockType. I det här exemplet använder vi TextControl från @wordpress/components för att skapa en inmatningsfält för blockets innehåll. Det sparade innehållet skickar vi sedan tillbaka till WordPress och visar på webbplatsen när blocket är publicerat. 

Via ACF

Ett exempel på hur man registrerar ett block med ACF kan se ut så här:

acf_register_block(array(
    'name'              => 'my-awesome-block',
    'title'             => __('ACF Block'),
    'description'       => '',
    'render_callback'   => 'block_render_callback',
    'category'          => 'common',
    'icon'              => 'heart',
    'keywords'          => array('dbyh', 'ACF Block' ),
));

Här registrerar man blocket med hjälp av funktionen acf_register_block. Man anger namn, titel, beskrivning, render callback-funktion, kategori, ikon och nyckelord för blocket. Render callback-funktionen är den som används för att visa blocket på webbplatsen.

Sedan behöver man bara skapa fält för blocket i ACF och använda dessa fält i render callback-funktionen för att visa innehållet på webbplatsen. Detta görs då inte via React utan via PHP utveckling, vilket gör att blocket blir långsammare att arbeta med för dig som redaktör.

Däremot från versionen 6.0 av ACF så finns det möjlighet att redigera Gutenberg Block mer likt hur WordPress själva registrerar block, laddningstiden blir något bättre men inte fullt lika bra som via React.

Vill du veta mer om Gutenberg för content? Läs ”Gutenberg för content: Perfekt för dig som webbredaktör” härnäst!

Vilken metod ska man välja?

React ger utvecklare möjlighet att skapa mer avancerade och flexibla block med bättre prestanda, medan ACF är ett bra verktyg för att skapa anpassade fält och metaboxar för innehållsredigering och är samtidigt ett bra komplement till Gutenberg. Både React och ACF är bra val för att utveckla Gutenberg block i WordPress, men det beror på projektets krav och utvecklarnas kompetens vilket som är det bästa valet.

Vi på Decision By Heart rekommenderar starkt att skapa alla block för Gutenberg via React och det är framför allt för att framtidssäkra hela leveransen mot dig som kund. Men som med allt, så finns för- & nackdelar med båda såklart, här nedan kommer några.

Fördelar med att registrera blocken via React

• Möjlighet till avancerade och flexibla block
• Bättre prestanda genom att endast uppdatera det som behöver uppdateras
• Enkel integration till redan befintliga WordPress-installationer

Nackdelar med att registrera blocken via React

• Som utvecklare är inlärningskurvan högre eftersom det krävs kunskap och förståelse i både javaScript och React
• Utvecklingstiden blir längre
• React är svårare att felsöka vid eventuella fel

Registrera block i WordPress via React: Avancerat och enkelt

Registrera block i WordPress via React ger möjlighet till avancerade och flexibla block. Prestandan är bättre genom att endast uppdatera det som är i behov av det. Och – det är enkelt att integrera till redan befintliga WordPress-installationer. Men det kräver kunskap och förståelse i React och utvecklingstiden blir längre, och svårare att felsöka när fel uppstår.

Å andra sidan, registrera block i WordPress via ACF är lätt för alla utvecklare. Det är snabbt och enkelt jämfört med att skapa block med React. Och det är ett bra verktyg för att skapa anpassade fält och metaboxar för innehållsredigering.

Men det ger inte samma möjligheter till avancerade och flexibla block som React ger, det har inte samma möjligheter till prestandaoptimering som React har genom virtuell DOM plus att det kräver ett plugin för att använda ACF.

Registrera block i WordPress via React: Avancerat och enkelt

WYSIWYG (What You See Is What You Get) är en typ av redigerare som gör det möjligt för användare att se resultatet av deras redigeringar i realtid. Det ser alltså ut precis som det kommer att se ut när du klickar på publicera. Dessa redigerare var vanliga i tidigare versioner av WordPress och användes fram till lanseringen av Gutenberg redigeraren i WordPress 5.0 i december 2018.

En av de största nackdelarna med WYSIWYG-redigeraren är att det är svårt att skapa anpassade layout och utformning med den. Det är ofta också svårt att säkerställa att innehållet ser ut som förväntat på olika enheter och skärmar.

Flexibel och kraftfull redigeringsmiljö

Gutenberg-redigeraren som lanserades i WordPress 5.0 erbjöd en mer flexibel och kraftfull redigeringsmiljö. Detta genom att den använder block för att skapa innehåll. Det ger utvecklare möjlighet att skapa anpassade block med avancerade funktioner och layout. På samma gång blir det enklare för användare att skapa innehåll med ett mer intuitivt och användarvänlig gränssnitt.

Så med andra ord: WYSIWYG-redigeraren är ersatt med mer avancerade och flexibla lösningar, som Gutenberg redigeraren. Därför bör du inte använda WYSIWYG redigeraren längre!