Myönnetään, että WordPressin kehittäminen on tällä hetkellä outoa. Olitpa uusi WordPressin käyttäjä tai työskennellyt sen kanssa ikuisuuden ajan, "Full-Site Editing" (FSE) -ominaisuudet, mukaan lukien Estä editori (WordPress 5.0) ja Sivuston editori (WordPress 5.9), ovat muuttaneet perinteisen tavan rakentaa WordPress-teemoja ja -laajennuksia.
Vaikka Block Editorin ensimmäisestä tapaamisesta on kulunut viisi vuotta, sen kehittäminen on vaikeaa, koska dokumentaatio on joko puutteellista tai vanhentunutta. Se on enemmänkin lausunto siitä, kuinka nopeasti FSE-ominaisuudet liikkuvat, jotain Geoff valitti tuoreessa viestissä.
Esimerkki: Vuonna 2018 an esittelysarja Gutenbergin kehittämiseen osallistumisesta julkaistiin täällä CSS-temppuja. Ajat ovat muuttuneet sen jälkeen, ja vaikka tämä kehitystyyli toimii edelleen, se on ei suositella enää (paitsi, create-guten-block projektia, johon se perustuu, ei myöskään enää ylläpidetä).
Tässä artikkelissa aion auttaa sinua pääsemään alkuun WordPress-lohkokehityksen kanssa tavalla, joka noudattaa nykyistä menetelmää. Joten kyllä, asiat voivat hyvinkin muuttua tämän julkaisun jälkeen. Mutta yritän keskittyä siihen tavalla, joka toivottavasti kuvaa lohkokehityksen ydintä, sillä vaikka työkalut saattavat kehittyä ajan myötä, ydinideat todennäköisesti pysyvät samoina.
Aloitetaan tuomalla esiin hämmennystä siitä, mitä tarkoitamme sellaisilla termeillä kuin lohkot. Kaikki näihin ominaisuuksiin WordPress 5.0 johtanut kehitystyö oli koodinimeltään "Gutenberg" - tiedäthän, sen keksijä painokone.
Siitä lähtien sanaa "Gutenberg" on käytetty kuvaamaan kaikkea lohkoihin liittyvää, mukaan lukien Block Editor ja Site Editor, joten se on mennyt niin sekavaksi, että jotkut ihmiset halveksia nimeä. Kaiken huipuksi on olemassa a Gutenberg-laajennus jossa kokeellisia ominaisuuksia testataan mahdollisen sisällyttämisen varalta. Ja jos luulet, että koko sivuston muokkaaminen ratkaisee ongelman, siinäkin on huolenaiheita.
Joten kun tässä artikkelissa viitataan "lohkoihin", tarkoitamme komponentteja sisällön luomiseen WordPress Block Editorissa. Lohkot lisätään sivulle tai viestiin, ja ne tarjoavat rakenteen tietyntyyppiselle sisällölle. WordPressin mukana tulee kourallinen "ydinlohkoja" yleisille sisältötyypeille, kuten kappale, luettelo, kuva, video ja ääni, muutamia mainitakseni.
Näiden ydinlohkojen lisäksi voimme luoda myös mukautettuja lohkoja. Siitä WordPress-lohkokehityksessä on kyse (myös ydinlohkojen suodatustoimintoja muokataan, mutta et todennäköisesti tarvitse sitä vielä).
Mitä lohkot tekevät
Ennen kuin sukeltaamme lohkojen luomiseen, meidän on ensin saatava käsitys siitä, kuinka lohkot toimivat sisäisesti. Se säästää meidät varmasti monelta turhautumiselta myöhemmin.
Tapa, jolla pidän lohkosta, on melko abstrakti: minulle lohko on kokonaisuus, jolla on joitain ominaisuuksia (jota kutsutaan attribuuteiksi), joka edustaa jotakin sisältöä. Tiedän, että tämä kuulostaa melko epämääräiseltä, mutta pysy kanssani. Lohko ilmenee pohjimmiltaan kahdella tavalla: graafisena käyttöliittymänä lohkoeditorissa tai tietopalana tietokannassa.
Kun avaat WordPress Block Editorin ja lisäät lohkon, esimerkiksi Pullquote-lohkon, saat mukavan käyttöliittymän. Voit napsauttaa kyseistä käyttöliittymää ja muokata lainattua tekstiä. Lohkoeditorin käyttöliittymän oikealla puolella oleva Asetukset-paneeli tarjoaa vaihtoehtoja tekstin säätämiseen ja lohkon ulkoasun asettamiseen.
Kun olet luonut hienon vetolainauksen ja painat Julkaise, koko viesti tallennetaan tietokantaan wp_posts pöytä. Tämä ei ole mitään uutta Gutenbergin takia. Näin asiat ovat aina toimineet – WordPress-myymälät julkaisevat sisällön tietokannan määrättyyn taulukkoon. Mutta se on uutta esitys Pullquote-lohkosta on osa sisältöä, joka tallennetaan post_content kenttä wp_posts pöytä.
Miltä tämä esitys näyttää? Katso:
It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.
The Encyclopedia of world peas
Näyttää tavalliselta HTML:ltä, eikö?! Tämä on teknisesti sanottuna "serialisoitu" lohko. Huomaa JSON-tiedot HTML-kommentissa, "textAlign": "right". Se on an ominaisuus - lohkoon liittyvä ominaisuus.
Oletetaan, että suljet lohkoeditorin ja avaat sen uudelleen jonkin ajan kuluttua. Sisältö asiaankuuluvasta post_content Lohkoeditori hakee kentän. Sen jälkeen editori jäsentää haetun sisällön ja missä tahansa se kohtaa tämän:
...
…se sanoo ääneen itselleen:
OK, se näyttää minusta Pullquote-lohkolta. Hmm.. siinä on myös attribuutti... Minulla on JavaScript-tiedosto, joka kertoo, kuinka editorissa rakennetaan graafinen käyttöliittymä Pullquote-lohkolle sen attribuuteista. Minun pitäisi tehdä se nyt tehdäkseni tämän lohkon kaikessa loistossaan.
Lohkojen kehittäjänä tehtäväsi on:
Kerro WordPressille, että haluat rekisteröidä tietyn tyyppisen lohkon niin ja niin yksityiskohdilla.
Anna JavaScript-tiedosto lohkoeditorille, joka auttaa sitä hahmontamaan lohkon editorissa ja samalla "sarjoittamaan" sen tallentaakseen sen tietokantaan.
Tarjoa kaikki lisäresurssit, joita lohko tarvitsee toimiakseen kunnolla, esim. tyylit ja fontit.
Yksi huomioitava asia on, että kaikki tämä muuntaminen sarjoitetusta tiedosta graafiseksi käyttöliittymäksi - ja päinvastoin - tapahtuu vain lohkoeditorissa. Etuosassa sisältö näytetään täsmälleen samalla tavalla kuin se on tallennettu. Siksi lohkot ovat tietyssä mielessä hieno tapa sijoittaa tietoja tietokantaan.
Toivottavasti tämä selventää lohkon toimintaa.
WordPress-lohkokehityksen aloittaminen
Lohkot ovat vain laajennuksia
Lohkot ovat vain laajennuksia. No teknisesti sinä voida laita lohkoja teemoihin ja sinä voida laita laajennukseen useita lohkoja. Mutta useammin kuin ei, jos haluat tehdä lohkon, aiot tehdä laajennuksen. Joten jos olet joskus luonut WordPress-laajennuksen, olet jo osittain siinä, että sinulla on kahva WordPress-lohkon tekemisessä.
Oletetaan kuitenkin hetkeksi, että et ole koskaan määrittänyt WordPress-laajennusta, saati lohkosta. Mistä edes aloitat?
Lohkon perustaminen
Olemme käsitelleet, mitä lohkot ovat. Aloitetaan asioiden järjestäminen sellaisen tekemiseksi.
Varmista, että sinulla on Node asennettuna
Tämä antaa sinulle pääsyn npm ja npx komennot, missä npm asentaa lohkosi riippuvuudet ja auttaa kääntämään tavaraa, kun npx suorittaa komentoja paketeille asentamatta niitä. Jos käytät macOS:ää, sinulla on luultavasti jo Node ja voit käyttää sitä nvm versioiden päivittämiseen. Jos käytät Windowsia, sinun on tehtävä se lataa ja asenna Node.
Luo projektikansio
Nyt saatat törmätä muihin opetusohjelmiin, jotka hyppäävät suoraan komentoriville ja neuvovat sinua asentamaan paketin nimeltä @wordpress/create-block. Tämä paketti on loistava, koska se sylkee ulos täysin muodostetun projektikansion, jossa on kaikki riippuvuudet ja työkalut, joita tarvitset kehittämisen aloittamiseen.
Itse kuljen tätä reittiä perustaessani omia lohkojani, mutta huumaa minua hetkeksi, koska haluan leikata läpi sen esittelemät mielipiteet ja keskittyä vain vaadittuihin palasiin peruskehitysympäristön ymmärtämisen vuoksi.
Nämä ovat tiedostot, jotka haluan nimenomaan kutsua esiin:
readme.txt: Tämä on ikään kuin laajennushakemiston etupuoli, jota käytetään yleensä kuvaamaan laajennusta ja antamaan lisätietoja käytöstä ja asennuksesta. Jos lähetät lohkosi osoitteeseen WordPress-laajennusluettelo, tämä tiedosto auttaa täyttämään laajennussivun. Jos aiot luoda GitHub-repon lohkolaajennuksellesi, voit myös harkita a README.md tiedosto, jossa on samat tiedot, joten se näkyy siellä hienosti.
package.json: Tämä määrittää kehittämiseen vaadittavat solmupaketit. Avaamme sen, kun pääsemme asennukseen. Klassisessa WordPress-laajennusten kehittämisessä saatat olla tottunut työskentelemään Composerin ja a composer.json tiedosto sen sijaan. Tämä on sen vastine.
plugin.php: Tämä on päälaajennustiedosto ja kyllä, se on klassinen PHP! Laitamme laajennuksen otsikon ja metatiedot tähän ja käytämme niitä laajennuksen rekisteröintiin.
Näiden tiedostojen lisäksi on myös src hakemistoon, jonka oletetaan sisältävän lohkomme lähdekoodin.
Nämä tiedostot ja src hakemisto on kaikki mitä tarvitset aloittaaksesi. Tuosta ryhmästä, huomaa se tarvitsemme teknisesti vain yhden tiedoston (plugin.php) tehdäksesi laajennuksen. Loput joko tarjoavat tietoa tai niitä käytetään kehitysympäristön hallintaan.
Edellä mainittu @wordpress/create-block paketti rakentaa nämä tiedostot (ja enemmän) meille. Voit ajatella sitä automaatiotyökaluna välttämättömyyden sijaan. Siitä huolimatta se tekee työstä helpompaa, joten voit ottaa vapauden rakennustelineeseen sen mukana ajamalla:
npx @wordpress/create-block
Asenna lohkoriippuvuudet
Olettaen, että sinulla on kolme edellisessä osiossa mainittua tiedostoa valmiina, on aika asentaa riippuvuudet. Ensinnäkin meidän on määritettävä tarvitsemamme riippuvuudet. Teemme sen muokkaamalla package.json. Kun käytät @wordpress/create-block apuohjelma, seuraava luodaan meille (kommentit lisätty; JSON ei tue kommentteja, joten poista kommentit, jos kopioit koodia):
{
// Defines the name of the project
"name": "block-example",
// Sets the project version number using semantic versioning
"version": "0.1.0",
// A brief description of the project
"description": "Example block scaffolded with Create Block tool.",
// You could replace this with yourself
"author": "The WordPress Contributors",
// Standard licensing information
"license": "GPL-2.0-or-later",
// Defines the main JavaScript file
"main": "build/index.js",
// Everything we need for building and compiling the plugin during development
"scripts": {
"build": "wp-scripts build",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
// Defines which version of the scripts packages are used (24.1.0 at time of writing)
// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}
- @wordpress/scripts paketti on tärkein riippuvuus tässä. Kuten näet, se on a devDependency eli se auttaa kehitystä. Kuinka niin? Se paljastaa wp-scripts binaari, jota voimme käyttää koodimme kääntämiseen src hakemisto hakemistoon build hakemistoon mm.
On olemassa useita muita paketteja, joita WordPress ylläpitää eri tarkoituksiin. Esimerkiksi, @wordpress/components paketti tarjoaa useita esivalmistettuja UI osat WordPress Block Editorille, jota voidaan käyttää johdonmukaisten käyttökokemusten luomiseen lohkollesi, joka vastaa WordPressin suunnittelustandardeja.
Et itse asiassa tarve asentaaksesi nämä paketit, vaikka haluaisit käyttää niitä. Tämä johtuu siitä, että nämä @wordpress riippuvuuksia ei ole yhdistetty estokoodiisi. Sen sijaan mikä tahansa import lausekkeet, jotka viittaavat apuohjelmien koodiin - kuten @wordpress/components — käytetään "omaisuus"-tiedoston luomiseen kääntämisen aikana. Lisäksi nämä tuontikäskyt muunnetaan käskyiksi, jotka yhdistävät tuonnin globaalin objektin ominaisuuksiin. Esimerkiksi, import { __ } from "@wordpress/i18n" muunnetaan pienennetyksi versioksi const __ = window.wp.i18n.__. (window.wp.i18n on esine, joka on taatusti saatavilla maailmanlaajuisesti, kun vastaava i18n pakettitiedosto on jonossa).
Lohkojen rekisteröinnin aikana laajennustiedostoon "resurssit" -tiedostoa käytetään implisiittisesti kertomaan WordPressille lohkon pakettiriippuvuudet. Nämä riippuvuudet asetetaan automaattisesti jonoon. Kaikki tämä hoidetaan kulissien takana, jos käytät scripts paketti. Tästä huolimatta voit silti asentaa riippuvuuksia paikallisesti koodin täydentämistä ja parametritietoja varten package.json tiedosto:
Nyt package.json on asennettu, meidän pitäisi pystyä asentamaan kaikki nämä riippuvuudet siirtymällä komentorivillä projektikansioon ja suorittamalla npm install.
WordPress-lohkokehityksen aloittaminen
Lisää laajennuksen otsikko
Jos olet kotoisin klassisen WordPress-laajennusten kehitystyöstä, tiedät luultavasti, että kaikilla laajennuksilla on päälaajennustiedostossa tietolohko, jonka avulla WordPress tunnistaa laajennuksen ja näyttää sen tiedot WordPress-järjestelmänvalvojan Plugins-näytössä.
Tässä on mitä @wordpress/create-block luotu minulle laajennukseen nimeltä "Hello World":
<?php
/**
* Plugin Name: Block Example
* Description: Example block scaffolded with Create Block tool.
* Requires at least: 5.9
* Requires PHP: 7.0
* Version: 0.1.0
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*
* @package create-block
*/
Se on päälaajennustiedostossa, jota voit kutsua miksi haluat. Voit kutsua sitä joksikin yleiseksi index.php or plugin.php. create-block paketti kutsuu sitä automaattisesti miksi tahansa annat projektin nimeksi sitä asentaessasi. Koska kutsuin tätä esimerkkiä "lohkoesimerkiksi", paketti antoi meille a block-example.php tiedosto kaikella tällä tavaralla.
Haluat muuttaa joitain yksityiskohtia, kuten tehdä itsestäsi kirjoittaja ja mitä muuta. Eikä kaikki tämä ole välttämätöntä. Jos rullasin tätä "tyhjästä", se saattaa näyttää lähempänä tätä:
<?php
/**
* Plugin Name: Block Example
* Plugin URI: https://css-tricks.com
* Description: An example plugin for learning WordPress block development.
* Version: 1.0.0
* Author: Arjun Singh
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*/
build/: Tämä kansio vastaanotti kootut resurssit käsitellessään tiedostoja tuotantokäyttöön.
node_modules: Tämä sisältää kaikki kehitysriippuvuudet, jotka asensimme käynnissä ollessamme npm install.
src/: Tämä kansio sisältää laajennuksen lähdekoodin, joka käännetään ja lähetetään osoitteeseen build hakemistosta. Tarkastelemme kutakin tässä olevaa tiedostoa hetken kuluttua.
.editorconfig: Tämä sisältää määritykset, joilla koodieditori mukautetaan koodin johdonmukaisuuteen.
.gitignore: Tämä on tavallinen repo-tiedosto, joka tunnistaa paikalliset tiedostot, jotka tulisi jättää versionhallinnan seurannan ulkopuolelle. Sinun node_modules pitäisi ehdottomasti sisällyttää tähän.
package-lock.json: Tämä on automaattisesti luotu tiedosto, joka sisältää päivitysten seurantaa tarvittaviin paketteihin, joiden kanssa olemme asentaneet npm install.
Estä metatiedot
Haluan kaivaa sisään src hakemiston kanssasi, mutta keskittyy ensin vain yhteen tiedostoon siinä: block.json. Jos olet käyttänyt create-block , se on jo siellä sinua varten; jos ei, mene eteenpäin ja luo se. WordPress pyrkii tekemään tästä standardin, kanonisen tavan rekisteröidä lohko tarjoamalla metatietoja, jotka tarjoavat WordPress-kontekstin sekä tunnistamaan lohkon että renderöimään sen lohkoeditorissa.
Tässä on mitä @wordpress/create-block luotu minulle:
Siellä on todella joukko erilaista tietoa voimme sisällyttää tähän, mutta todellisuudessa vaaditaan vain name ja title. Superminimaalinen versio voisi näyttää tältä:
$schema määrittää skeeman muotoilun, jota käytetään tiedoston sisällön vahvistamiseen. Se kuulostaa vaaditulta asialta, mutta se on täysin valinnainen, koska sen avulla tukevat koodieditorit voivat vahvistaa syntaksin ja tarjota muita lisäetuja, kuten työkaluvihjeitä ja automaattisen täydennyksen.
apiVersion viittaa mihin versioon Estä API laajennus käyttää. Nykyään versio 2 on uusin.
name on pakollinen ainutlaatuinen merkkijono, joka auttaa tunnistamaan laajennuksen. Huomaa, että olen liittänyt tämän etuliitteen css-tricks/ jota käytän nimitilana välttääkseni ristiriidat muiden samannimististen laajennusten kanssa. Voit käyttää sen sijaan jotain nimikirjaimia (esim as/block-example).
title on toinen pakollinen kenttä, ja se määrittää nimen, jota käytetään kaikkialla, missä laajennus näytetään.
category ryhmittelee lohkon muiden lohkojen kanssa ja näyttää ne yhdessä Lohkoeditorissa. Nykyiset olemassa olevat kategoriat sisältävät text, media, design, widgets, themeja embed, ja voit jopa luoda mukautetut luokat.
icon voit valita jotain joukosta Dashiconsin kirjasto esittääksesi lohkoasi visuaalisesti lohkoeditorissa. Minä käytän format-quote icon](https://developer.wordpress.org/resource/dashicons/#format-quote), koska teemme tässä esimerkissä oman pullquote-lajin. On mukavaa, että voimme hyödyntää olemassa olevia kuvakkeita sen sijaan, että joutuisimme luomaan omia, vaikka se on varmasti mahdollista.
editorScript on pää JavaScript-tiedosto, index.js, elää.
Rekisteröi lohko
Viimeinen asia ennen kuin osumme varsinaiseen koodiin, ja se on liitännäisen rekisteröinti. Olemme vain määrittäneet kaikki metatiedot ja tarvitsemme tavan, jolla WordPress käyttää niitä. Tällä tavalla WordPress tietää, mistä löytää kaikki laajennusomaisuudet, jotta ne voidaan asettaa jonoon käytettäväksi Block Editorissa.
Lohkon rekisteröinti on kaksiosainen prosessi. Meidän on rekisteröitävä se sekä PHP:ssä että JavaScriptissä. PHP-puolella avaa päälaajennustiedosto (block-example.php tässä tapauksessa) ja lisää seuraava heti laajennuksen otsikon jälkeen:
Tämä on mitä create-block minulle luotu apuohjelma, joten funktio on nimetty sellaiseksi kuin se on. Voimme käyttää eri nimeä. Tärkeintä on jälleen välttää ristiriitoja muiden laajennusten kanssa, joten on hyvä idea käyttää nimiavaruuttasi tehdäksesi siitä mahdollisimman yksilöllinen:
Miksi osoitamme build hakemisto, jos block.json kaikki lohkon metatiedot ovat mukana src? Tämä johtuu siitä, että koodimme on vielä käännettävä. The scripts paketti käsittelee koodin tiedostoista src hakemistoon ja sijoittaa tuotannossa käytetyt käännetyt tiedostot hakemistoon build hakemistosta myös kopioimallablock.jsontiedosto prosessissa.
Selvä, siirrytään lohkon rekisteröinnin JavaScript-puolelle. Avata src/index.js ja varmista, että se näyttää tältä:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
Pääsemme Reactin ja JSX:n maahan! Tämä kertoo WordPressille:
Tuo registerBlockType moduuli @wordpress/blocks paketti.
Tuo metatiedot kohteesta block.json.
Tuo Edit ja Save komponentteja vastaavista tiedostoistaan. Laitamme koodin näihin tiedostoihin myöhemmin.
Rekisteröi lohko ja käytä Edit ja Save komponentit lohkon renderöimiseksi ja sen sisällön tallentamiseksi tietokantaan.
Mitä kuuluu edit ja save toimintoja? Yksi WordPress-lohkokehityksen vivahteista on erottaa "takaosa" "etuosasta" ja näitä toimintoja käytetään renderöimään lohkon sisältö niissä yhteyksissä, joissa edit käsittelee taustan renderöinnin ja save kirjoittaa sisällön lohkoeditorista tietokantaan sisällön näyttämiseksi sivuston etuosassa.
Pikainen testi
Voimme tehdä nopeaa työtä nähdäksemme lohkomme toimivan lohkoeditorissa ja renderöitynä käyttöliittymässä. Avataan index.js uudelleen ja käytä edit ja save funktiot palauttamaan perussisältöä, joka havainnollistaa niiden toimintaa:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
const { name } = metadata;
registerBlockType(name, {
edit: () => {
return (
"Hello from the Block Editor"
);
},
save: () => {
return (
"Hello from the front end"
);
}
});
Tämä on pohjimmiltaan riisuttu versio samasta koodista, joka meillä oli aiemmin, mutta osoitamme suoraan metatietoihin block.json hakeaksesi lohkon nimen, ja jätti pois Edit ja Save komponentteja, koska käytämme toimintoja suoraan täältä.
Voimme koota tämän ajamalla npm run build komentorivillä. Sen jälkeen meillä on pääsy lohkoon nimeltä "Block Esimerkki" lohkoeditorissa:
Jos pudotamme lohkon sisältöalueelle, saamme palautettavan viestin edit toiminto:
WordPress-lohkokehityksen aloittaminen
Jos tallennamme ja julkaisemme viestin, meidän pitäisi saada palautettava viesti save toiminto, kun katsot sitä etuosasta:
WordPress-lohkokehityksen aloittaminen
Lohkon luominen
Kaikki näyttää olevan kiinni! Voimme palata siihen, mitä meillä oli index.js ennen testiä nyt kun olemme varmistaneet, että asiat toimivat:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
Huomaa, että edit ja save funktiot on sidottu kahteen olemassa olevaan tiedostoon src hakemisto tuo @wordpress/create-block luotu meille ja sisältää kaikki tarvitsemamme lisätuonnit jokaiseen tiedostoon. Vielä tärkeämpää on kuitenkin se, että nämä tiedostot vahvistavat Edit ja Save osat, jotka sisältävät lohkon merkinnän.
Takapään merkintä (src/edit.js)
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Edit() {
return (
{__("Hello from the Block Editor", "block-example")}
);
}
Katso mitä teimme siellä? Tuomme rekvisiittaa @wordpress/block-editor paketti, jonka avulla voimme luoda luokkia, joita voimme käyttää myöhemmin muotoiluun. Tuomme myös maahan __ kansainvälistymistoiminto käännösten käsittelyyn.
WordPress-lohkokehityksen aloittaminen
Käyttöliittymän merkintä (src/save.js)
Tämä luo a Save komponentti ja aiomme käyttää melkein samaa asiaa kuin src/edit.js hieman eri tekstillä:
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Save() {
return (
{__("Hello from the front end", "block-example")}
);
}
Jälleen saamme mukavan luokan, jota voimme käyttää CSS:ssämme:
WordPress-lohkokehityksen aloittaminen
Muotoilulohkot
Käsittelimme juuri kuinka lohkorekvisiitta käytetään luokkien luomiseen. Luet tätä artikkelia CSS:ää käsittelevällä sivustolla, joten minusta tuntuu, että minulta puuttuisi jotain, jos emme käsittele erityisesti lohkotyylien kirjoittamista.
Erottelevat etu- ja takaosan tyylit
Jos katsot block.json vuonna src hakemistosta löydät kaksi tyyleihin liittyvää kenttää:
editorStyle tarjoaa polun taustapäässä käytettyihin tyyleihin.
style on polku jaetuille tyyleille, joita käytetään sekä etu- että takapäässä.
Muista, että @wordpress/scripts paketti kopioi block.json tiedosto, kun se käsittelee koodin /src hakemistoon ja sijoittaa kootut varat /build hakemistosta. Se on build/block.json tiedosto, jota käytetään lohkon rekisteröintiin. Se tarkoittaa mitä tahansa polkua, jonka tarjoamme src/block.json tulee kirjoittaa suhteessa build/block.json.
Käyttämällä Sassia
Voisimme pudottaa pari CSS-tiedostoa build hakemistoon, viittaa polkuihin src/block.json, suorita rakennus ja kutsu se päiväksi. Mutta se ei hyödynnä koko voimaa @wordpress/scripts käännösprosessi, joka pystyy kääntämään Sassin CSS:ksi. Sen sijaan asetamme tyylitiedostomme src hakemistoon ja tuo ne JavaScriptillä.
Sitä tehdessämme meidän on oltava tietoisia siitä, miten @wordpress/scripts prosessityylit:
Nimetty tiedosto style.css or style.scss or style.sass, tuotu JavaScript-koodiin, on käännetty muotoon style-index.css.
Kaikki muut tyylitiedostot kootaan ja niputetaan index.css.
- @wordpress/scripts paketti käyttää webpack niputtamiseen ja @wordpress/scripts käyttää PostCSS-laajennus prosessointityylien työskentelyyn. PostCSS:ää voidaan laajentaa lisälaajennuksilla. The scripts paketti käyttää Sassin, SCSS:n ja Autoprefixerin paketteja, jotka kaikki ovat käytettävissä ilman lisäpakettien asentamista.
Itse asiassa, kun pyörität alkulohkosi kanssa @wordpress/create-block, saat hyvän etumatkan SCSS-tiedostoilla, joiden avulla voit päästä liikkeelle:
editor.scss sisältää kaikki taustaeditorissa käytettävät tyylit.
style.scss sisältää kaikki sekä etu- että takapään yhteiset tyylit.
Katsotaan nyt tätä lähestymistapaa käytännössä kirjoittamalla pieni Sass, jonka kokoamme lohkomme CSS:ään. Vaikka esimerkit eivät tule olemaan kovin sassisia, kirjoitan ne silti SCSS-tiedostoihin käännösprosessin havainnollistamiseksi.
Etusivu ja taustatyylejä
OK, aloitetaan tyyleillä, joita käytetään sekä etu- että takapäässä. Ensinnäkin meidän on luotava src/style.scss (se on jo olemassa, jos käytät @wordpress/create-block) ja varmista, että tuomme sen, minkä voimme tehdä index.js:
import "./style.scss";
Avata src/style.scss ja pudota sinne muutama perustyyli käyttämällä luokkaa, joka luotiin meille lohkorekvisiittasta:
Siinä se toistaiseksi! Kun suoritamme koontiversion, tämä käännetään osaksi build/style.css ja siihen viittaavat sekä lohkoeditori että käyttöliittymä.
Taustatyylejä
Sinun on ehkä kirjoitettava tyylejä, jotka ovat ominaisia Block Editorille. Sitä varten luo src/editor.scss (uudelleen, @wordpress/create-block tekee tämän puolestasi) ja pudota siihen joitain tyylejä:
Tuo se sitten sisään edit.js, joka on tiedosto, joka sisältää meidän Edit komponentti (voimme tuoda sen minne haluamme, mutta koska nämä tyylit ovat editoria varten, on loogisempaa tuoda komponentti tähän):
import "./editor.scss";
Nyt kun juostaan npm run build, tyylejä sovelletaan lohkoon molemmissa yhteyksissä:
Toimme tyylitiedostot edit.js ja index.js, mutta muista, että käännösvaihe luo meille kaksi CSS-tiedostoa build hakemistoon: index.css ja style-index.css vastaavasti. Meidän on viitattava näihin luotuihin tiedostoihin lohkon metatiedoissa.
Lisätään tähän pari väitettä block.json metatiedot:
ajaa npm run build jälleen kerran, asenna ja aktivoi laajennus WordPress-sivustollesi, ja olet valmis käyttämään sitä!
Voit käyttää npm run start suorittaaksesi koontiversiosi kellotilassa, kääntäen koodisi automaattisesti aina, kun muutat koodia ja tallennat.
Raapataan pintaa
Varsinaiset lohkot hyödyntävät Block Editorin Asetukset-sivupalkkia ja muita WordPressin tarjoamia ominaisuuksia luodakseen monipuolisia käyttökokemuksia. Lisäksi se, että lohkostamme on pohjimmiltaan kaksi versiota - edit ja save — Sinun on myös harkittava koodin järjestämistä koodin päällekkäisyyden välttämiseksi.
Mutta toivottavasti tämä auttaa poistamaan WordPress-lohkojen luomisprosessin yleisen prosessin. Tämä on todella uusi aikakausi WordPress-kehityksessä. On vaikeaa oppia uusia tapoja tehdä asioita, mutta odotan innolla, miten se kehittyy. Työkalut kuten @wordpress/create-block apua, mutta silloinkin on mukavaa tietää tarkalleen, mitä se tekee ja miksi.
Muuttuvatko täällä käsitellyt asiat? Todennäköisimmin! Mutta ainakin sinulla on perusta, jonka pohjalta voit työskennellä, kun seuraamme jatkuvasti WordPress-lohkojen kypsymistä, mukaan lukien parhaat käytännöt niiden tekemiseen.
Viitteet
Tavoitteeni on jälleen kartoittaa tehokas polku lohkokehitykseen pääsemiseksi tällä kaudella, jossa asiat kehittyvät nopeasti ja WordPress-dokumentaatiolla on hieman vaikeuksia saada kiinni. Tässä on joitain resursseja, joita käytin tämän yhdistämiseen:
