Tālāk par pamata blokiem: Pielāgotu Gutenberg bloku izveide WordPress funkcionalitātes uzlabošanai

Kopsavilkums

WordPress bloku redaktors, Gutenberg, ir ieviests satura izveides revolūcijā ar savu modulāro bloku sistēmu. Lai gan pamatbloki piedāvā daudzpusību, pielāgoti bloki ir nepieciešami unikālām funkcijām un zīmolam. Šis raksts palīdzēs jums izstrādāt savus Gutenberg blokus, aptverot svarīgus jēdzienus, piemēram, bloku reģistrāciju, atribūtus un renderēšanu. Mēs izpētīsim praktiskus piemērus, apspriedīsim paraugprakses kodu organizēšanai un drošībai, kā arī uzsvērsim, kā pielāgoti bloki integrējas ar WordPress arhitektūru un āķiem. Apgūstot pielāgoto bloku izstrādi, jūs varat ievērojami uzlabot savas WordPress vietnes iespējas un lietotāja pieredzi.

Tālāk par pamata blokiem: Pielāgotu Gutenberg bloku izveide WordPress funkcionalitātes uzlabošanai

Gutenberg bloku redaktora parādīšanās WordPress 5.0 versijā iezīmēja ievērojamu satura izveides un pārvaldības veida maiņu. Atkāpjoties no klasiskā redaktora lineārās pieejas, Gutenberg ieviesa modulāru sistēmu, kurā saturs tiek veidots, izmantojot atsevišķus "blokus". Lai gan noklusējuma bloku komplekts aptver plašu bieži sastopamu vajadzību klāstu, daudzām vietnēm ir nepieciešamas unikālas funkcijas, specifiski dizaina elementi vai integrācijas, kas pārsniedz to, kas ir viegli pieejams. Šeit parādās pielāgoto Gutenberg bloku izstrāde, piedāvājot spēcīgu veidu, kā paplašināt WordPress iespējas un precīzi pielāgot to jūsu projekta prasībām.

Pielāgotu bloku izstrāde ļauj jums izveidot atkārtoti lietojamus komponentus, kas vienkāršo satura izveidi redaktoriem, nodrošina zīmola konsekvenci un tieši integrē sarežģītas funkcijas redaktora saskarnē. Šī rokasgrāmata palīdzēs jums iziet cauri procesam, sākot ar pamatu izpratni un beidzot ar paraugprakses piemērošanu spēcīgiem un uzturamiem pielāgotiem blokiem.

Bloku redaktora arhitektūras izpratne

Pirms iedziļināšanās izstrādē, ir ļoti svarīgi saprast, kā Gutenberg un tā bloki darbojas WordPress ekosistēmā. Pats WordPress ir veidots uz modulāras PHP un MySQL arhitektūras. Tēmas kontrolē prezentāciju, un spraudņi pievieno funkcionalitāti. Gutenberg kā galvenā WordPress funkcija nemanāmi integrējas šajā struktūrā. Tas izmanto JavaScript (galvenokārt React) savai dinamiskajai, pārlūkprogrammā notiekošajai rediģēšanas pieredzei, savukārt PHP apstrādā servera puses reģistrāciju un renderēšanu.

Pielāgoti bloki būtībā ir JavaScript komponentes, kas tiek reģistrētas WordPress. Kad lietotājs pievieno pielāgotu bloku ierakstam vai lapai, Gutenberg datubāzē saglabā tā konfigurāciju (atribūtus). Renderējot ierakstu priekšgalā, WordPress izmanto PHP, lai interpretētu šo konfigurāciju un izvadītu atbilstošo HTML, bieži izmantojot to pašu JavaScript komponenti vai atsevišķu PHP veidni.

Pielāgotā bloka galvenās sastāvdaļas

Katra pielāgotā Gutenberg bloka pamatā ir vairākas galvenās daļas:

1. Reģistrācija: Šis ir process, kurā WordPress tiek informēts par jūsu jauno bloku. Tas ietver tā nosaukuma, virsraksta, ikonas un citu metadatu definēšanu. Tas galvenokārt tiek darīts, izmantojot JavaScript funkciju registerBlockType.
2. Atribūti: Šie ir datu lauki, kas saistīti ar jūsu bloku. Domājiet par tiem kā par iestatījumiem vai īpašībām, ko lietotājs var mainīt konkrētai bloka instancei (piemēram, teksta saturs, attēla URL, krāsas izvēle). Atribūti tiek definēti bloka JavaScript reģistrācijā.
3. Rediģēšanas funkcija: Šī JavaScript funkcija definē, kā bloks izskatās un darbojas Gutenberg redaktorā. Tur jūs izveidojat interaktīvo lietotāja saskarni, ko satura veidotāji izmantos, lai konfigurētu bloku.
4. Saglabāšanas funkcija: Šī JavaScript funkcija definē statisko HTML marķējumu, kas tiks saglabāts datubāzē un renderēts jūsu vietnes priekšgalā. Tam vajadzētu atspoguļot bloka atribūtu pašreizējo stāvokli.

Soli pa solim: Jūsu pirmā pielāgotā bloka izveide

Izveidosim vienkāršu pielāgotu bloku, kas parāda "Aicinājumu uz darbību" (CTA) ar virsrakstu un pogu. Šis piemērs koncentrēsies uz būtiskajiem JavaScript aspektiem bloku reģistrācijai un rediģēšanai, pieņemot, ka ir iestatīta pamata WordPress izstrādes vide.

Priekšnoteikumi:

• Vietēja WordPress izstrādes vide.
• Pamata izpratne par JavaScript, React un PHP.
• Instalēts Node.js un npm (vai yarn) līdzekļu kompilēšanai.

1. Projekta iestatīšana:

Pielāgoti bloki parasti tiek izstrādāti kā daļa no spraudņa. Izveidojiet jaunu spraudņa failu (piemēram, my-custom-blocks/my-custom-blocks.php) un JavaScript failu savam blokam (piemēram, src/index.js). Jums būs nepieciešams arī būvēšanas process, lai kompilētu jūsu JavaScript. Parasta pieeja ir izmantot @wordpress/scripts, kas nodrošina ērtu kompilēšanas apstrādi.

Jūsu spraudņa saknes direktorijā izveidojiet package.json failu:

{
  "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" 
  }
}

Instalējiet atkarības: npm install.

2. Bloka reģistrācija (JavaScript):

Savu src/index.js failā izmantosiet registerBlockType no @wordpress/blocks pakotnes.

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. Redaktora saskarnes definēšana (src/edit.js):

Šis komponents apstrādā to, kā bloks izskatās un darbojas redaktorā.

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. Saglabāšanas funkcijas definēšana (src/save.js):

Šī funkcija nosaka HTML izvadi priekšgalam.

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. Bloku skripta pievienošana (PHP):

Savas galvenās spraudņa failā (my-custom-blocks.php) jums ir jāreģistrē un jāpievieno jūsu kompilētais JavaScript fails.

<?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. Līdzekļu būvēšana:

Spraudņa direktorijā palaidiet npm run build. Tas kompilēs jūsu JavaScript uz build mapi.

Tagad aktivizējiet spraudni WordPress. Jums vajadzētu redzēt savu "Aicinājums uz darbību" bloku, kas pieejams redaktorā!

Pielāgoto bloku izstrādes paraugprakses

Pielāgoto bloku izstrāde ir vairāk nekā tikai to funkcionēšana. Paraugprakses ievērošana nodrošina, ka jūsu bloki ir droši, efektīvi, pieejami un uzturami.

• Nosaukumu telpa: Vienmēr izmantojiet unikālu nosaukumu telpu savam blokam (piemēram, my-custom-blocks/cta). Tas novērš konfliktus ar citiem blokiem. registerBlockType funkcija to apstrādā.
• Koda organizācija: Saglabājiet savu JavaScript un PHP kodu tīru un labi organizētu. Sarežģītiem blokiem apsveriet savu JavaScript sadalīšanu mazākos, atkārtoti lietojamos komponentos.
• Drošība:
  • Sanitārija: Saglabājot datus datubāzē (īpaši lietotāja radītu saturu), vienmēr tos sanitizējiet. WordPress nodrošina tādas funkcijas kā sanitize_text_field, esc_url utt.
  • Escape: Izejošos datus pārlūkprogrammā vienmēr escape, lai novērstu Cross-Site Scripting (XSS) uzbrukumus. Izmantojiet tādas funkcijas kā esc_html, esc_attr, esc_url.
  • Nonces: Jebkuriem AJAX pieprasījumiem vai veidlapu iesniegumiem, kas saistīti ar jūsu bloku, izmantojiet nonces, lai pārbaudītu, vai pieprasījums nāk no leģitīma WordPress avota.
• Internacionalizācija (i18n): Izmantojiet __() un _x() funkcijas (no @wordpress/i18n) visiem lietotājam redzamajiem tekstiem savā JavaScript. Tas padara jūsu bloku tulkojamu.
• Pieejamība: Nodrošiniet, lai jūsu bloks būtu pieejams visiem. Izmantojiet semantisko HTML, ja nepieciešams, nodrošiniet ARIA atribūtus un testējiet ar ekrāna lasītājiem.
• Veiktspēja:
  • Atliktā ielāde: Blokiem, kas ielādē smagus līdzekļus vai sarežģītus datus, apsveriet atliktās ielādes tehnikas ieviešanu.
  • Efektīva renderēšana: Optimizējiet savu save funkciju un jebkuru servera puses renderēšanu, lai tā būtu pēc iespējas efektīvāka.
  • Līdzekļu pievienošana: Pievienojiet tikai nepieciešamos skriptus un stilus savam blokam. Izmantojiet enqueue_block_style un enqueue_block_script_handle bloku specifiskiem līdzekļiem.
• Modulāritāte un paplašināmība: Izmantojiet WordPress āķus (darbības un filtrus) savā PHP, lai ļautu citiem spraudņiem vai tēmām modificēt jūsu bloka darbību vai izvadi.
• block.json: Sarežģītākiem blokiem izmantojiet block.json failu, lai deklarētu bloka metadatus, atkarības, stilus un skriptu rokturus. Šis ir moderns bloku izstrādes standarts un vienkāršo līdzekļu pārvaldību.

Integrācija ar WordPress arhitektūru

Pielāgoti bloki nav izolētas vienības. Tie dziļi integrējas ar WordPress pamat arhitektūru:

• Āķi: Jūs varat izmantot PHP darbības un filtrus savā spraudnī, lai modificētu bloku reģistrāciju, nosacīti pievienotu pielāgotus stilus vai skriptus, vai pat mainītu pamatbloku renderēto izvadi. Piemēram, jūs varētu izmantot block_type_metadata_settings filtru, lai modificētu reģistrēta bloka iestatījumus.
• Tēmas integrācija: Bloku bāzes tēmas un pilna vietnes rediģēšana (FSE) lielā mērā paļaujas uz blokiem. Pielāgoti bloki var tikt izstrādāti tā, lai tie nemanāmi iekļautos FSE veidnēs, ļaujot lietotājiem veidot veselas vietnes, izmantojot konsekventu bloku bāzes darba plūsmu.
• Spraudņu savietojamība: Jūsu pielāgotie bloki var mijiedarboties ar citiem spraudņiem. Piemēram, pielāgots produktu bloks varētu iegūt datus no e-komercijas spraudņa, vai pielāgots galerijas bloks varētu integrēties ar konkrētu multivides bibliotēkas spraudni.

Papildu koncepcijas un apsvērumi

• Servera puses renderēšana (SSR): Blokiem, kuriem nepieciešami dinamiski dati vai sarežģīta loģika, kas vislabāk apstrādājama serverī, varat ieviest servera puses renderēšanu. Tas ietver render_callback funkcijas definēšanu savā PHP, reģistrējot bloku.
• Dinamiskie bloki: Bloki, kas izmanto SSR, bieži tiek saukti par dinamiskajiem blokiem. Tie datubāzē nesaglabā statisku HTML; tā vietā tie saglabā tikai savus atribūtus, un render_callback ģenerē HTML katrā lapas ielādes reizē.
• Bloku stili: Jūs varat definēt pielāgotus stilus saviem blokiem, kurus lietotāji var izvēlēties redaktorā.
• Bloku variācijas: Izveidojiet bāzes bloka variācijas, lai piedāvātu iepriekš konfigurētas versijas ar atšķirīgiem noklusējuma iestatījumiem vai izskatu.
• Redaktora un priekšgala atšķirības: Ņemiet vērā, ka edit un save funkcijām var būt nepieciešams apstrādāt dažādus scenārijus. edit funkcija ir paredzēta interaktīvai redaktora pieredzei, savukārt save funkcija ir paredzēta statiskai HTML izvadei. Dažreiz jums var būt nepieciešams atsevišķs render_callback dinamiskai priekšgala renderēšanai.

Secinājums

Pielāgoto Gutenberg bloku izstrāde ir spēcīga prasme, kas atver jaunu pielāgošanas un funkcionalitātes līmeni WordPress vietnēm. Izprotot galvenās sastāvdaļas — reģistrāciju, atribūtus, rediģēšanas un saglabāšanas funkcijas — un ievērojot drošības, veiktspējas un pieejamības paraugprakses, jūs varat izveidot spēcīgus, atkārtoti lietojamus un lietotājam draudzīgus blokus. Neatkarīgi no tā, vai izstrādājat pielāgotu spraudni klientam vai uzlabojat savu vietni, pielāgoto bloku apgūšana ievērojami uzlabos jūsu WordPress izstrādes iespējas, ļaujot jums pāriet tālāk par standarta piedāvājumiem un izveidot patiesi unikālas digitālās pieredzes.