Noile CMS-uri apărute, cum ar fi Squarespace sau Medium, au un alt concept de inserare text și media. Textul este inserat cu ajutorul blocurilor de text, iar imaginile, galeriile foto, video și audio sunt inserate cu ajutorul blocurilor specifice. Conceptul de blocuri a dus la simplificarea inserării de conținut diversificat, fără a scrie cod HTML. Exact ceea ce au nevoie utilizatorii WordPress.

WordPress este o platformă matură și stabilă, criticată de unii ca rămasă în urmă din punctul de vedere al editării. Editorul este aproape neschimbat de 10 ani. Totuși, un aspect important este că WordPress asigură compatibilitatea cu versiunile mai vechi în timp ce se introduc elemente noi. Nicio altă platformă nu are grija versiunilor vechi. Dar a venit timpul pentru o schimbare radicală.

În versiunea majoră WordPress 5.0, care apare în prima parte a lui 2018, editarea va fi mult mai ușor de făcut, fiind utilizat conceptul de editor cu tipuri de blocuri. Până atunci poți testa pluginul Gutenberg ca să-ți faci o idee asupra ceea ce vine.

Pluginul Gutenberg – utilizare

Pentru că s-a stârnit o mare furtună de discuții în comunitatea WordPress, mai ales din partea dezvoltatorilor de teme și pluginuri, s-a preferat crearea unui plugin, înainte de a se trece la implementarea noului concept de editare tip blocuri.

Editorul va crea o nouă experiență de construire a paginilor și a post-creării, care face ca postările bogate în media să fie ușor de realizat și au „blocuri” pentru a face mai ușor ceea ce astăzi ar putea să folosească scurtcoduri, cod HTML personalizat sau să descopere „mistery meat”. – Matt Mullenweg

În descrierea pluginului se spune că Gutenberg este mai mult decât un editor, ce va avea impact asupra întregii experiențe de publicare, de la inserare conținut până la personalizarea conținutului. Mistery meat se referă la funcționalități ascunse, pe care poți să le descoperi dacă studiezi codul.

Deocamdată Gutenberg este un plugin ce se concentrează pe editare. După cum am spus, principiul editării este de creare a blocurilor de care avem nevoie în articol sau pagină. Pentru demonstrație am instalat pluginul Gutenberg pe un WordPress 4.9 cu tema implicită, Twenty Seventeen. Ține cont că pluginul este încă în versiunea beta și poate avea incompatibilitați cu alte pluginuri sau teme.

Apoi am dat click pe Gutenberg -> Demo și am intrat într-un articol cu o nouă interfață. Ai imaginea mai jos:

Ce poți vedea în acest ecran? Două coloane: cea principală, unde vei insera text și media sub fomă de blocuri și coloana din dreapta, cu modificările pe care le poți face conținutului și articolului în sine.

În partea stângă-sus, ai 4 elemente grafice: Adăugare bloc, Undo, Redo și Structura conținutului – unde se afișează numărul de cuvinte, subtitluri, paragrafe și blocuri, precum și Cuprinsul documentului, format din titlu și subtitluri.

Dacă dai click pe primul element – Adăugare bloc, vei avea de ales dintre blocurile utilizate recent, toate blocurile, inserare media din alte platforme (embed) și blocurile salvate. Blocurile sunt următoarele:

• Blocuri generale – imagine, galerie, titlu, citat (quote), listă, copertă – imagine în fundal cu text deasupra, video, audio și paragraf.
• Formatare – pullquote (text evidențiat, extras din pagină), tabel, text preformatat (adaugă tag-ul pre), cod (se pot insera tag-uri HTML, de exemplu, care se afișează ca atare), HTML personalizat, clasic (se afișează butoanele din editorul clasic) și verset (versurile apar pe fundal gri cu tag-ul br între ele).
• Blocuri aspect – separator, more (afișare rezumat în arhivă cu link citește mai mult), buton, coloane text
• Widget-uri – shortcode, ultimele articole, categorii

În secțiunea Embed, ai 35 de opțiuni, cele mai cunoscute fiind YouTube și Vimeo. Cel mai mult mi-a plăcut că există și posibilitatea de inserare video TED.

Blocurile salvate pot fi reutilizate oriunde, fără a mai putea fi modificate. Dar poți detașa un bloc reutilizabil dacă e nevoie să-l modifici. Blocul salvat ca reutilizabil va rămîne in blocuri salvate.

Când se pune mouse-ul peste un bloc creat apar în stânga săgeți sus-jos pentru a schimba poziția în pagină a blocului.  În dreapta sunt trei puncte verticale ce deschide mai multe opțiuni pentru bloc. Fiecare tip de bloc are  opțiuni comune și opțiuni specifice.

Blocurile pot fi transformate în alt tip de blocuri, cum ar fi galeria foto în bloc imagine sau paragraful în citat, liste, subtitlu, text preformatat și pot fi editate în mod vizual sau în mod HTML.

În coloana a doua sus, ai funcțiile de unde poți salva, previzualiza, publica articolul și configura editorul. Dacă dai click pe Settings (rotița pe fond gri închis), coloana a doua dispare și zona de editare se mărește. Revii tot cu click pe rotiță.

Dacă dai click pe More (trei puncte verticale), ai următoarele opțiuni:

• Editor vizual sau Editor HTML
• Bară fixă cu butoanele din editor, afișată în partea de sus
• Copierea întregului conținut

M-am jucat puțin și am copiat tot conținutul prin click pe ultima opțiune, am creat un nou articol și am dat Paste în blocul creat. A funcționat de minune! Acum pot să modific textul și imaginile fără să mai creez blocuri.

În continuarea coloanei a doua poți alege funcții ale documentului sau opțiuni ale blocului pe care l-ai selectat.

Documentul are toate opțiunile cunoscute deja: stare și vizibilitate, revizii, categorii și tag-uri, imagine reprezentativă, rezumat, discuții. Poți da click pe fiecare opțiune pentru detalii. În plus se afișează cuprinsul documentului, iar dacă dai click pe un subtitlu, cursorul se mută la începutul blocului. Asta da experiență a utilizatorului!

Cam asta ar fi din punct de vedere al utilizării editorului Gutenberg.

Codul sursă – unde se salvează și cum

Nu m-am putut abține și m-am uitat în sursa codului HTML generat,  Rezultatul e foarte curat, simple paragrafe, div-uri, heading-uri, section etc, ce au clase CSS unde este nevoie:

<section class="wp-block-cover-image has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)">
    <h2>Of Mountains &amp; Printing Presses</h2>
</section>

Am mers mai departe și am cercetat cum se salvează în baza de date. De exemplu paragraful din articol a fost salvat în câmpul post_content din tabela wp_posts, sub forma:

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content — somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.

Blocurile reutilizabile sunt salvate ca post_type tip wp_block.

În tabela wp_postmeta, am găsit video de la TED:

<iframe src="https://embed.ted.com/talks/jacob_collier_a_one_man_audio_visual_viral_sensation" width="525" height="296" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

iar dacă vrei să-l înglobezi în site, este foarte ușor acum: din blocuri – Înglobare (Embeds) alegi TED, inserezi URL – adresa sa și gata!

Concluzie

Utilizatorul de WordPress va beneficia din plin de editorul Gutenberg pentru că este ușor de utilizat și are opțiuni suplimentare.

Nu-mi dau seama dacă este intuitiv, pentru mine a durat mai puțin de 5 minute ca să mă obișnuiesc cu el. Am dat click pe toate iconițele pe care le-am întâlnit și multe opțiuni sunt cele cu care ne-a obișnuit WordPress, doar poziționate puțin altfel.

Nu știu câte bătăi de cap va da programatorilor implementarea în noua versiune a Gutenberg, mai ales celor care vor trebui să-și refacă pluginurile, dar ceea ce am experimentat este superior față de ce este acum.

Te invit și pe tine să testezi pluginul Gutenberg. Lasă un comentariu și spune dacă ți-a plăcut sau nu.