Už pagrindinių blokų ribų: pasirinktinių „Gutenberg“ blokų kūrimas, siekiant pagerinti „WordPress“ funkcionalumą

Santrauka

„WordPress“ blokų rengyklė, „Gutenberg“, pakeitė turinio kūrimą savo moduline blokų sistema. Nors pagrindiniai blokai suteikia universalumo, pasirinktiniai blokai yra būtini unikalioms funkcijoms ir prekės ženklui. Šiame straipsnyje aprašomas jūsų pačių „Gutenberg“ blokų kūrimo procesas, apimantis esmines tokias sąvokas kaip blokų registracija, atributai ir atvaizdavimas. Nagrinėsime praktinius pavyzdžius, aptarsime geriausias kodų organizavimo ir saugumo praktikas bei pabrėšime, kaip pasirinktiniai blokai integruojasi su „WordPress“ architektūra ir kabliais. Įsisavinę pasirinktinių blokų kūrimą, galite žymiai pagerinti savo „WordPress“ svetainės galimybes ir vartotojo patirtį.

Už pagrindinių blokų ribų: pasirinktinių „Gutenberg“ blokų kūrimas, siekiant pagerinti „WordPress“ funkcionalumą

„Gutenberg“ blokų rengyklės pasirodymas „WordPress 5.0“ žymėjo reikšmingą turinio kūrimo ir valdymo būdo pokytį. Atsisakydama klasikinės rengyklės linijinio požiūrio, „Gutenberg“ pristatė modulinę sistemą, kurioje turinys kuriamas naudojant atskirus „blokus“. Nors numatytasis blokų rinkinys apima platų įprastų poreikių spektrą, daugelis svetainių reikalauja unikalių funkcijų, specifinių dizaino elementų ar integracijų, kurios viršija tai, kas lengvai prieinama. Čia ir prasideda pasirinktinių „Gutenberg“ blokų kūrimas, suteikiantis galingą būdą išplėsti „WordPress“ galimybes ir tiksliai pritaikyti jį jūsų projekto poreikiams.

Pasirinktinių blokų kūrimas leidžia sukurti daugkartinio naudojimo komponentus, kurie supaprastina turinio kūrimą redaktoriams, užtikrina prekės ženklo nuoseklumą ir leidžia įgyvendinti sudėtingas funkcijas tiesiogiai rengyklės sąsajoje. Šis vadovas nuves jus per procesą, pradedant nuo pagrindinių principų supratimo iki geriausių praktikos nuoseklių ir prižiūrimų pasirinktinių blokų diegimo.

Blokų rengyklės architektūros supratimas

Prieš pasineriant į kūrimą, būtina suprasti, kaip „Gutenberg“ ir jo blokai veikia „WordPress“ ekosistemoje. Pats „WordPress“ yra sukurtas ant modulinės PHP ir MySQL architektūros. Temos kontroliuoja pateikimą, o papildiniai prideda funkcionalumą. „Gutenberg“, kaip pagrindinė „WordPress“ funkcija, sklandžiai integruojasi į šią struktūrą. Jis naudoja „JavaScript“ (daugiausia „React“) dinamiškai, naršyklėje veikiančiai rengyklės patirčiai, o PHP tvarko serverio pusės registraciją ir atvaizdavimą.

Pasirinktiniai blokai iš esmės yra „JavaScript“ komponentai, kurie yra registruojami „WordPress“. Kai vartotojas prideda pasirinktinį bloką prie įrašo ar puslapio, „Gutenberg“ saugo jo konfigūraciją (atributus) duomenų bazėje. Atvaizduojant įrašą priekinėje dalyje, „WordPress“ naudoja PHP, kad interpretuotų šią konfigūraciją ir pateiktų atitinkamą HTML, dažnai naudodamas tą patį „JavaScript“ komponentą arba atskirą PHP šabloną.

Pasirinktinio bloko pagrindiniai komponentai

Kiekvienas pasirinktinis „Gutenberg“ blokas iš esmės susideda iš kelių pagrindinių dalių:

1. Registracija: Tai procesas, kai „WordPress“ informuojama apie jūsų naują bloką. Tai apima jo pavadinimo, antraštės, piktogramos ir kitų metaduomenų apibrėžimą. Tai daugiausia atliekama naudojant „JavaScript“ funkciją registerBlockType.
2. Atributai: Tai duomenų laukai, susiję su jūsų bloku. Pagalvokite apie juos kaip apie nustatymus ar ypatybes, kurias vartotojas gali pakeisti konkrečiam bloko egzemplioriui (pvz., teksto turinys, vaizdo URL, spalvos pasirinkimas). Atributai apibrėžiami bloko „JavaScript“ registracijoje.
3. Redagavimo funkcija: Ši „JavaScript“ funkcija apibrėžia, kaip blokas atrodo ir veikia „Gutenberg“ rengyklėje. Čia kuriate interaktyvią vartotojo sąsają, kurią turinio kūrėjai naudos blokui konfigūruoti.
4. Išsaugojimo funkcija: Ši „JavaScript“ funkcija apibrėžia statinį HTML žymėjimą, kuris bus išsaugotas duomenų bazėje ir atvaizduotas jūsų svetainės priekinėje dalyje. Jis turėtų atspindėti dabartinę bloko atributų būseną.

Žingsnis po žingsnio: pirmojo pasirinktinio bloko kūrimas

Sukursime paprastą pasirinktinį bloką, kuris rodo „Veiksmo raginimą“ (CTA) su antrašte ir mygtuku. Šis pavyzdys sutelks dėmesį į esminius „JavaScript“ aspektus blokų registracijai ir redagavimui, darant prielaidą, kad yra nustatyta pagrindinė „WordPress“ kūrimo aplinka.

Būtinos sąlygos:

• Vietinė „WordPress“ kūrimo aplinka.
• Pagrindinis „JavaScript“, „React“ ir „PHP“ supratimas.
• Įdiegtas „Node.js“ ir „npm“ (arba „yarn“) turto kompiliavimui.

1. Projekto sąranka:

Pasirinktiniai blokai paprastai kuriami kaip papildinio dalis. Sukurkite naują papildinio failą (pvz., my-custom-blocks/my-custom-blocks.php) ir „JavaScript“ failą jūsų blokui (pvz., src/index.js). Jums taip pat reikės kūrimo proceso, skirto kompiliuoti jūsų „JavaScript“. Dažnas metodas yra naudoti @wordpress/scripts, kuris suteikia patogų būdą tvarkyti kompiliavimą.

Jūsų papildinio pagrindiniame kataloge sukurkite package.json failą:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "A plugin for custom Gutenberg blocks.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Your Name",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

Įdiekite priklausomybes: npm install.

2. Bloko registracija („JavaScript“):

Jūsų src/index.js faile naudosite registerBlockType iš @wordpress/blocks paketo.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Import components for the editor
import { Edit } from './edit';
import { Save } from './save';

registerBlockType( 'my-custom-blocks/cta', {
    title: __( 'Call to Action', 'my-custom-blocks' ),
    icon: 'megaphone',
    category: 'widgets',
    attributes: {
        headline: {
            type: 'string',
            default: '',
        },
        buttonText: {
            type: 'string',
            default: 'Learn More',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. Redagavimo sąsajos apibrėžimas (src/edit.js):

Šis komponentas valdo, kaip blokas atrodo ir veikia rengyklėje.

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export const Edit = ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps();

    const onChangeHeadline = ( newHeadline ) => {
        setAttributes( { headline: newHeadline } );
    };

    const onChangeButtonText = ( newButtonText ) => {
        setAttributes( { buttonText: newButtonText } );
    };

    const onChangeButtonUrl = ( newButtonUrl ) => {
        setAttributes( { buttonUrl: newButtonUrl } );
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Button Settings', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Button Text', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Button URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Enter your headline here...', 'my-custom-blocks' ) }
                    value={ attributes.headline }
                    onChange={ onChangeHeadline }
                    allowedFormats={ [ 'core/bold', 'core/italic' ] }
                />
                <a href={ attributes.buttonUrl } className="wp-element-button">
                    { attributes.buttonText }
                </a>
            </div>
        </>
    );
};

4. Išsaugojimo funkcijos apibrėžimas (src/save.js):

Ši funkcija nustato HTML išvestį priekinei daliai.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export const Save = ( { attributes } ) => {
    const blockProps = useBlockProps.save();

    return (
        <div { ...blockProps }>
            <RichText.Content
                tagName="h3"
                value={ attributes.headline }
            />
            <a href={ attributes.buttonUrl } className="wp-element-button">
                { attributes.buttonText }
            </a>
        </div>
    );
};

5. Bloko scenarijaus įtraukimas (PHP):

Jūsų pagrindiniame papildinio faile (my-custom-blocks.php) turite užregistruoti ir įtraukti savo kompiliuotą „JavaScript“ failą.

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: Adds custom Gutenberg blocks.
 * Version: 1.0
 * Author: Your Name
 */

function my_custom_blocks_register_block() {
    // Automatically loads the block.json file and enqueues the script.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Turto kūrimas:

Paleiskite npm run build savo papildinio kataloge. Tai kompiliuos jūsų „JavaScript“ į build aplanką.

Dabar suaktyvinkite papildinį „WordPress“. Jūs turėtumėte matyti savo „Veiksmo raginimo“ bloką, pasiekiamą rengyklėje!

Pasirinktinių blokų kūrimo geriausios praktikos

Pasirinktinių blokų kūrimas apima daugiau nei tik jų funkcionalumo užtikrinimą. Geriausių praktikų laikymasis užtikrina, kad jūsų blokai būtų saugūs, našūs, prieinami ir prižiūrimi.

• Vardų erdvė: Visada naudokite unikalią savo bloko vardų erdvę (pvz., my-custom-blocks/cta). Tai apsaugo nuo konfliktų su kitais blokais. registerBlockType funkcija tai tvarko.
• Kodų organizavimas: Laikykite savo „JavaScript“ ir „PHP“ kodą tvarkingą ir gerai organizuotą. Sudėtingiems blokams apsvarstykite galimybę suskirstyti „JavaScript“ į mažesnius, daugkartinio naudojimo komponentus.
• Saugumas:
  • Valymas: Išsaugodami duomenis duomenų bazėje (ypač vartotojo sukurtą turinį), visada juos valykite. „WordPress“ teikia tokias funkcijas kaip sanitize_text_field, esc_url ir kt.
  • Escaping: Pateikdami duomenis naršyklėje, visada juos išlaisvinkite, kad išvengtumėte „Cross-Site Scripting“ (XSS) atakų. Naudokite tokias funkcijas kaip esc_html, esc_attr, esc_url.
  • Nonces: Bet kokiems AJAX užklausoms ar formų pateikimams, susijusiems su jūsų bloku, naudokite nonces, kad patvirtintumėte, jog užklausa kilusi iš teisėto „WordPress“ šaltinio.
• Internacionalizavimas (i18n): Naudokite __() ir _x() funkcijas (iš @wordpress/i18n) visiems vartotojui matomiems eilutėms jūsų „JavaScript“. Tai leidžia versti jūsų bloką.
• Prieinamumas: Užtikrinkite, kad jūsų blokas būtų prieinamas visiems. Naudokite semantinį HTML, prireikus pateikite ARIA atributus ir testuokite su ekrano skaitytuvais.
• Našumas:
  • Atidėtas įkėlimas: Blokams, kurie įkelia sunkius turto elementus ar sudėtingus duomenis, apsvarstykite galimybę įgyvendinti atidėto įkėlimo metodus.
  • Efektyvus atvaizdavimas: Optimizuokite savo save funkciją ir bet kokį serverio pusės atvaizdavimą, kad jis būtų kuo efektyvesnis.
  • Turto įtraukimas: Įtraukite tik būtinus scenarijus ir stilius jūsų blokui. Naudokite enqueue_block_style ir enqueue_block_script_handle blokui specifiniams turto elementams.
• Modularumas ir išplėtimas: Naudokite „WordPress“ kablius (veiksmus ir filtrus) savo PHP, kad leistumėte kitiems papildiniams ar temoms keisti jūsų bloko elgesį ar išvestį.
• block.json: Sudėtingesniems blokams naudokite block.json failą, kad deklaruotumėte bloko metaduomenis, priklausomybes, stilius ir scenarijų tvarkykles. Tai yra modernus blokų kūrimo standartas ir supaprastina turto valdymą.

Integracija su „WordPress“ architektūra

Pasirinktiniai blokai nėra izoliuoti subjektai. Jie giliai integruojasi su „WordPress“ pagrindine architektūra:

• Kabliai: Galite naudoti PHP veiksmus ir filtrus savo papildinyje, kad pakeistumėte bloko registraciją, sąlygiškai pridėtumėte pasirinktinius stilius ar scenarijus arba net pakeistumėte pagrindinių blokų atvaizduojamą išvestį. Pavyzdžiui, galite naudoti block_type_metadata_settings filtrą, kad pakeistumėte registruoto bloko nustatymus.
• Temos integracija: Blokų pagrindu sukurtos temos ir visos svetainės redagavimas (FSE) labai priklauso nuo blokų. Pasirinktiniai blokai gali būti sukurti taip, kad sklandžiai tilptų į FSE šablonus, leidžiant vartotojams kurti visą svetainę naudojant nuoseklų blokų pagrindu sukurtą darbo eigą.
• Papildinių sąveika: Jūsų pasirinktiniai blokai gali sąveikauti su kitais papildiniais. Pavyzdžiui, pasirinktinis produktų blokas gali gauti duomenis iš el. prekybos papildinio, o pasirinktinis galerijos blokas gali integruotis su konkrečiu medijos bibliotekos papildiniu.

Išplėstiniai konceptai ir svarstymai

• Serverio pusės atvaizdavimas (SSR): Blokams, kuriems reikia dinaminių duomenų ar sudėtingos logikos, kurią geriausia tvarkyti serveryje, galite įgyvendinti serverio pusės atvaizdavimą. Tai apima render_callback funkcijos apibrėžimą jūsų PHP registruojant bloką.
• Dinaminiai blokai: Blokai, naudojantys SSR, dažnai vadinami dinaminiais blokais. Jie nesaugo statinio HTML duomenų bazėje; vietoj to, jie saugo tik savo atributus, o render_callback generuoja HTML kiekvieną kartą įkeliant puslapį.
• Blokų stiliai: Galite apibrėžti pasirinktinius stilius savo blokams, kuriuos vartotojai gali pasirinkti rengyklėje.
• Blokų variacijos: Sukurkite bazinio bloko variacijas, kad pasiūlytumėte iš anksto sukonfigūruotas versijas su skirtingais numatytaisiais nustatymais ar išvaizda.
• Redaktoriaus ir priekinės dalies skirtumai: Turėkite omenyje, kad edit ir save funkcijos gali tekti tvarkyti skirtingus scenarijus. edit funkcija skirta interaktyviai rengyklės patirčiai, o save funkcija – statiniam HTML išvesties. Kartais gali prireikti atskiro render_callback dinamiškam priekinės dalies atvaizdavimui.

Išvada

Pasirinktinių „Gutenberg“ blokų kūrimas yra galinga įgūdis, atveriantis naują „WordPress“ svetainių tinkinimo ir funkcionalumo lygį. Suprasdami pagrindinius komponentus – registraciją, atributus, redagavimo ir išsaugojimo funkcijas – ir laikydamiesi geriausių saugumo, našumo ir prieinamumo praktikų, galite sukurti nuoseklius, daugkartinio naudojimo ir patogius vartotojui blokus. Nesvarbu, ar kuriate pasirinktinį papildinį klientui, ar tobulinate savo svetainę, pasirinktinių blokų įsisavinimas žymiai padidins jūsų „WordPress“ kūrimo galimybes, leisdamas jums išeiti už standartinių pasiūlymų ribų ir sukurti tikrai unikalias skaitmenines patirtis.