WordPress Gutenberg Block API look en feel blokkeren

De nieuwe WordPress-editor (met codenaam Gutenberg) moet in versie 5.0 verschijnen. Dit is de perfecte tijd om het te begrijpen voordat het in WordPress-kern terechtkomt. In deze serie laat ik je zien hoe je met de Block API werkt en creëer je eigen inhoudsblokken die je kunt gebruiken om je berichten en pagina's uit te bouwen..

In het eerste bericht van deze serie hadden we een overzicht van de Block API en creëerden we een eenvoudig blok om te testen. We zullen binnenkort de Block API nader bekijken, maar laten we eerst het standaardblok bewerken dat we in de vorige post hebben gemaakt om een ​​idee te krijgen hoe eenvoudig het is om wijzigingen aan te brengen in een bestaand blok.

Als je dit onthoudt, is ons aangepaste blok aan de voor- en achterkant anders weergegeven om aan te tonen dat je volledige controle hebt over hoe het blok in de editor wordt gerenderd en hoe sitebezoekers het blok zien.

Als je meegekeken hebt, open dan de / Wp-content / plugins / my-maat-block / src / blok map waarin de blokbroncode zich bevindt. Die map bevat een JavaScript-bestand en twee Sass-bestanden, die het gedrag van het blok bepalen en hoe het binnen de editor en aan de voorkant wordt gerenderd.

De block.js JavaScript-bestand bevat JSX, dat tijdens het bouwproces wordt omgezet in een geldig JavaScript. Op dezelfde manier worden de twee Sass-bestanden geconverteerd naar standaard CSS.

Tijdens het bouwproces moeten deze bestanden worden verwerkt om de distributiebestanden binnen de plug-ins te maken dist / map. Dit zijn de eigenlijke bestanden die door WordPress zijn uitgelijnd omdat ze geldige JavaScript en CSS bevatten die alle browsers kunnen begrijpen.

Gelukkig is de create-Guten-block toolkit behandelt het bouwen en transpireren voor ons door te kijken naar wijzigingen in onze blokbestanden. Dit is echt een leuke functie, omdat het een ding minder is om ons zorgen over te maken. We kunnen ons concentreren op het schrijven van onze blokcode (en stijlen) en de plug-inbestanden worden allemaal automatisch bijgewerkt. Leuk!

Zorg ervoor dat u de npm start commando vanuit de root-map van de plug-in om het kijken naar bestanden te activeren.

Tijd om een ​​code te bewerken!

Maak je geen zorgen over de details van de JSX-code in block.js gewoon nog zoals we dat later in detail zullen bespreken. Laten we ons nu concentreren op het maken van enkele eenvoudige wijzigingen in de blokuitvoer voor de weergaven aan de voor- en achterkant.

Doe open block.js, vind de Bewerk methode voor het object waaraan het tweede argument is doorgegeven registerBlockType (), en vervang het door het volgende:

bewerken: functie (rekwisieten) ga terug ( 
 
Editor-weergave
 
Dit is ons aangepaste blok in de editor.
 
Laten we een ongeordende lijst toevoegen!
 
 
appel
 
Oranje
 
Peer
 
Pruim
 
 
 ); ,

Deze methode bepaalt hoe het blok wordt weergegeven in het editorvenster. Zoek nu het opslaan methode en vervang deze door:

opslaan: functie (rekwisieten) terug ( 
 
Frontend weergave
 
Dit is ons aangepaste blok zoals gezien door sitebezoekers.
 
Laten we een geordende lijst toevoegen!
 
 
Rood
 
Blauw
 
Roze
 
Bruin
 
 
 ); ,

Deze methode wordt gebruikt om de blokuitvoer aan de voorkant te renderen.

In style.scss, vervang alle stijlen met:

.wp-block-cgb-block-my-custom-block background: # a7d9f1; kleur: #ffffff; rand: 1px vast # 62afd4; grensradius: 15px; marge: 0 auto; maximale breedte: 740 px; opvulling: 1.5rem; ol, ul margin-left: 20px! important;  li margin-bottom: 0;  h3 color: #ffffff; margin-top: 0; 

Dan in editor.scss, vervang alle stijlen met:

.wp-block-cgb-block-my-custom-block background: # cba7f1; rand: 1px vast # a170d6; 

Je kunt in de onderstaande schermafbeeldingen zien hoe deze veranderingen van invloed zijn op de weergave van ons blok, afhankelijk van of we het in het editorvenster of in de frontend bekijken.

We zullen nog geen verslavende blokscripts behandelen, maar het is genoeg om dat nu te weten editor.scss stijlen worden alleen toegepast op het editorvenster en style.scssis toegevoegd aan beide het editorvenster en de voorkant. Daarom kunnen stijlen die zowel in de editor als in de frontend worden gebruikt, worden weggelaten style.scss.

Let op hoe we in de Sass-bestanden verwijzen naar een lange CSS-selector om onze blokelementen te targeten.

.wp-block-CGB-block-my-maat-block

Deze klasse wordt automatisch door Gutenberg toegevoegd aan het blokcontainerelement aan de voorkant, maar we moeten het handmatig toepassen in het editorvenster om dezelfde klasse te krijgen, zoals je kunt zien in de Bewerk methode hieronder.

De klassennaam gegenereerd door Gutenberg wordt als volgt bepaald: wp-block- [block namespace] - [block name.

In ons geval gebruikten we de create-Guten-block toolkit om ons blok te maken, dat gebruikt cgb voor de naamruimte standaard, en block-my-maat-block is gebaseerd op de bloknaam die we hebben opgegeven. Dit resulteert in de CSS-klassenaam wp-block-CGB-block-my-maat-block wordt toegevoegd aan de blokcontainer. De naamruimte en bloknaam worden door Gutenberg intern gebruikt om blokken uniek te identificeren.

Toen ik daar wijzigingen aanbracht in het blokkeren van bestanden, vond ik een aantal pijnpunten die het vermelden waard zijn.

Allereerst wanneer u wijzigingen aanbrengt in de Bewerk methode, moest ik de browsercache leegmaken voordat ik het editorvenster vernieuwde om de nieuwste wijzigingen te bekijken. Dit gebeurde niet altijd, maar dat was vrij vaak het geval. Als u merkt dat u hetzelfde overkomt, verwijdert u gewoon de cache van uw browser en probeert u het opnieuw.

Ten tweede, bij het bewerken van de inhoud van de opslaan methode, er lijkt iets vreemds met het editorvenster te gebeuren wanneer het volgende wordt vernieuwd.

Om dit aan te tonen, heb ik een nieuw lijstitem toegevoegd (

Indigo

) in de opslaan methode en vervolgens de berichteditor vernieuwd (na natuurlijk opnieuw de cache te hebben leeggemaakt!). Dit is het resultaat:

Als je een van beide kiest Converteren naar blokken of Bewerken als HTML dan krijg je de inhoud van de opslaan methode, die bedoeld is om te worden bekeken aan de voorkant en niet in de editor.

Dit is erg verwarrend en de enige voor de hand liggende manier om dingen weer normaal te maken was om het blok uit het editorvenster te verwijderen en het opnieuw in te voegen. Zoals ik in de vorige post al zei, is Gutenberg nog steeds een werk in uitvoering en dit is daar een goed voorbeeld van!

Hopelijk wordt dit in toekomstige versies intuïtiever gemaakt, maar voor nu is het gewoon iets om op te letten. Wanneer u wijzigingen aanbrengt in de opslaan functie, bereid zijn om de gerelateerde blokken in het editorvenster te verwijderen en ze opnieuw toe te voegen.

Zoals eerder vermeld, is de uitvoer van de opslaan en Bewerk methoden kunnen compleet anders zijn. In de meeste gevallen wilt u waarschijnlijk dat de uitvoer aan de voorzijde overeenkomt met de uitvoer van de editor, zodat de bewerkingservaring zo consistent mogelijk is met front-end rendering.

In ons bovenstaande voorbeeld hierboven heb ik alleen voor demonstratiedoeleinden verschillende inhoud en stijlen toegevoegd in de editor en in de frontend.

Block API Overview

De Block-API bestaat uit een reeks JavaScript-objecten die aan de globale zijn toegevoegd wp admin-object. En omdat wp is wereldwijd, we hoeven het niet specifiek te importeren in onze broncode - het is beschikbaar op aanvraag.

De objecten beschikbaar in wp afhankelijk van de beheerderspagina die u momenteel bekijkt. Bijvoorbeeld als u uw site aan het aanpassen bent wp bevat het hoofd-API-object voor de klant. 

Momenteel is de Gutenberg Block API echter alleen beschikbaar in de berichteditor. Ik verwacht dat dit in de toekomst zal veranderen wanneer de integratie tussen de berichteditor en de site-aanpasser dichterbij komt.

U kunt de structuur van bekijken wp door de Gutenberg-editor te openen en binnen te gaan wp in de browserconsole.

Zoals je kunt zien, wp bevat veel objecten, maar degene waarin we het meest geïnteresseerd zijn, zijn:

• wp.elements
• wp.blocks
• wp.components
• wp.data
• wp.i18n

Deze objecten geven u toegang tot alle tools die nodig zijn om enkele zeer complexe blokken te maken. Probeer de volledige objectnaam in de browserconsole in te voeren om deze objecten verder te verkennen.

Bijvoorbeeld als u typt wp.blocks en vergroot het object, je zult zien dat een van de beschikbare functies dat is registerBlockType (). Dit is een zeer belangrijke functie die we in de volgende post uitgebreid behandelen

De wp.elements Voorwerp

Dit object is de abstractielaag bovenop React (en ReactDom) die React-functionaliteit op een voorspelbare en consistente manier blootstelt. Dit blijft waar, zelfs als de onderliggende implementatie volledig is gewijzigd of gewijzigd.

Zolang de interface hetzelfde blijft, zullen plug-ins die interactie hebben met de Block API in de toekomst niet worden beïnvloed.

De wp.blocks Voorwerp

De kernfunctie om een ​​blok te maken (registerBlockType ()) is opgenomen in wp.blocks samen met andere functies die nodig zijn voor algemeen blokbeheer, zoals:

• getBlockType ()
• getBlockContent ()
• getBlockAttributes ()
• hasBlockSupport ()
• isValidBlock ()

Dit object bevat ook een reeks herbruikbare blokken die u kunt opnemen in uw eigen blokken om functionaliteit te bieden zonder extra overheadkosten. Deze kant-en-klare ready-blokken kunnen de ontwikkeling van een blok drastisch versnellen, en we zullen er een paar in de volgende post gebruiken terwijl we ons verder verdiepen in het maken van blokken..

Enkele van de beschikbare zijn:

• uitlijningswerkbalk
• autocomplete
• media-uploader
• kleurenpalet
• rich text-editor

De wp.components Voorwerp

De wp.components object bevat ook herbruikbare componenten, maar deze zijn meer generiek en worden meestal gebruikt om extra gebruikersinterface-elementen in het editorvenster te maken, zoals bedieningspanelen voor blokinstellingen.

Waaronder:

• knop
• checkbox
• codebewerker
• streepjespictogram
• datum Tijd
• laten vallen
• menu onderdeel
• Radio knop
• bereikregeling

De wp.data Voorwerp

De datamodule beheert de applicatiestatus in de Gutenberg-editor, die opslaginstellingen voor elk blok bevat. We zullen verschillende manieren bekijken waarop je instellingen kunt toevoegen aan een blok in het laatste bericht van deze serie.

wp.data wordt geïmplementeerd bovenop Redux, dus wanneer Gutenberg wordt samengevoegd met core, hebben we niet alleen toegang tot React, maar ook tot een complete gecentraliseerde datastore die wordt aangedreven door Redux! 

Het object wp.i18n

Met plug-ins en thema's kunnen PHP-strings nu al jaren gemakkelijk worden vertaald, en een vergelijkbare methode is ook beschikbaar voor het vertalen van tekenreeksen in JavaScript dankzij de wp.i18n voorwerp. Dit betekent dat alle reeksen in uw blok, inclusief de bloknaam, trefwoorden en labels, in elke taal kunnen worden vertaald.

Als je eerder de standaard PHP-vertaalfuncties hebt gebruikt, zul je je meteen thuis voelen, want het proces is vrijwel hetzelfde. Ik denk dat dit een slimme zet is omdat het ontwikkelaars zal aanmoedigen om vanaf het begin stringvertalingen in hun blokken in te schakelen.

Binnen uw blokcode is het vertalen van een reeks zo eenvoudig als:

wp.i18n .__ ('Deze tekenreeks is vertaalbaar', 'tekstdomein');

Conclusie

In deze zelfstudie hebben we een basisblok geïmplementeerd en de code bewerkt. We hebben ook gezien dat we volledige controle hebben over het renderen van blokken en dat we in de editor verschillende blokvensters kunnen hebben vergeleken met de frontend.

De redacteur heeft nog steeds een aantal problemen die u van tijd tot tijd kunt verrassen - dit herinnert ons eraan dat Gutenberg nog steeds in ontwikkeling is en misschien niet klaar is voor gebruik op productiesites.

Ten slotte zijn we klaar met een overzicht van de blok-API, die verschillende nieuwe objecten op de globale introduceert wp JavaScript-object om blokken te maken en te beheren.

In het volgende bericht pakken we het tempo op en creëren we een uitgebreider blok. Om dit te doen, zullen we de registerBlockType () functie in de diepte. We zullen ook goed kijken naar het correct in orde brengen van uw blokscripts.