{"id":20,"date":"2024-10-12T10:21:53","date_gmt":"2024-10-12T10:21:53","guid":{"rendered":"https:\/\/pleximat.nl\/?p=20"},"modified":"2024-10-12T10:21:53","modified_gmt":"2024-10-12T10:21:53","slug":"welkom-bij-de-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/pleximat.nl\/index.php\/2024\/10\/12\/welkom-bij-de-gutenberg-editor\/","title":{"rendered":"Welkom bij de Gutenberg editor"},"content":{"rendered":"\r\n<div class=\"wp-block-cover has-background-dim alignwide\" style=\"background-image: url('https:\/\/cldup.com\/Fz-ASbo2s3.jpg');\">\r\n<div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\r\n<p class=\"has-text-align-center has-white-color has-text-color has-large-font-size\">Over bergen &amp; drukpersen<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Het doel van deze nieuwe editor is het eenvoudig en plezierig maken om rijke inhoud aan WordPress toe te voegen. Dit hele bericht bestaat uit <em>stukjes inhoud<\/em> &#8211; het lijkt wat op LEGO-stenen &#8211; die je kunt bewegen en waarmee je kunt werken. Beweeg je cursor rond en je ziet dat de verschillende blokken oplichten met contouren en pijlen. Druk op de pijlen om blokken snel te verplaatsen zonder bang te hoeven zijn dingen te verliezen tijdens kopieer- en plakwerk.<\/p>\r\n\r\n\r\n\r\n<p>Wat je nu leest is een <strong>tekstblok<\/strong>, het eenvoudigste blok van allemaal. Het tekstblok heeft haar eigen besturing zodat je het overal in het bericht kunt zetten&#8230;<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-align-right\">&#8230; zoals deze, die rechts is uitgelijnd.<\/p>\r\n\r\n\r\n\r\n<p>Kopteksten zijn ook afzonderlijke blokken, wat helpt bij de opzet en organisatie van je inhoud.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Een foto is duizend woorden waard<\/h2>\r\n\r\n\r\n\r\n<p>Het zorgvuldig omgaan met afbeeldingen en media is een belangrijk punt van de nieuwe editor. Hopelijk vind je aspecten als het toevoegen van bijschriften of het over de volle breedte laten zien van je foto&#8217;s veel eenvoudiger en robuuster dan voorheen.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/cXyG__fTLN.jpg\" alt=\"Prachtig landschap\" \/>\r\n<figcaption>Wanneer je thema het ondersteunt, zie je de &#8220;breed&#8221; knop op je afbeeldingstoolbar. Probeer het maar.<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Probeer het citaat te selecteren en te verwijderen of te bewerken, je hoeft niet bang te zijn dat je per ongeluk de afbeelding of andere tekst selecteert en de presentatie ru\u00efneert.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Het <em>Inserter<\/em> gereedschap<\/h2>\r\n\r\n\r\n\r\n<p>Stel je voor dat alles wat WordPress kan doen snel en op dezelfde plaats in de interface beschikbaar is. Je hoeft geen HTML tags of klassen uit te zoeken, of ingewikkelde shortcode regels te onthouden. Dat is het idee achter de inserter: de knop <code>(+)<\/code> die rond de editor wordt weergegeven, waarmee je door alle beschikbare inhoudsblokken kunt bladeren en ze aan je bericht kunt toevoegen. Plugins en thema&#8217;s kunnen hun eigen blokken registreren, waardoor allerlei mogelijkheden beschikbaar komen voor bewerken en publiceren.<\/p>\r\n\r\n\r\n\r\n<p>Probeer het eens uit. Je zal erachter komen dat WordPress al dingen in je berichten kan zetten die je niet eens wist. Hierbij een korte lijst van wat je daar op dit moment kunt vinden:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Tekst &amp; kopteksten<\/li>\r\n<li>Afbeeldingen &amp; videos<\/li>\r\n<li>Galerijen<\/li>\r\n<li>Insluitingen, zoals YouTube, tweets of andere WordPress berichten.<\/li>\r\n<li>Lay-out blokken zoals knoppen, Hero afbeeldingen, afscheidingen, enz.<\/li>\r\n<li>En <em>lijsten<\/em> zoals deze, uiteraard \ud83d\ude42<\/li>\r\n<\/ul>\r\n\r\n\r\n<hr class=\"wp-block-separator\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Visueel bewerken<\/h2>\r\n\r\n\r\n\r\n<p>Een groot voordeel van blokken is, dat je ze op hun plaats kunt bewerken en de inhoud direct kunt manipuleren. In plaats van velden te hebben voor het bewerken van dingen zoals de bron van een citaat of de tekst van een knop, kun je de inhoud direct wijzigen. Probeer het volgende citaat eens te bewerken:<\/p>\r\n\r\n\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p>De editor biedt een nieuwe bouwervaring voor pagina&#8217;s en berichten, die het maken van berichten met opmaak eenvoudig maakt, en gebruikt &#8220;blokken&#8221; om zonder problemen te maken waar tot nog toe shortcodes, aangepaste HTML, of &#8220;mystery meat&#8221; insluitingen voor nodig zijn.<\/p>\r\n<cite>Matt Mullenweg, 2017<\/cite><\/blockquote>\r\n\r\n\r\n\r\n<p>De informatie die overeenkomt met de bron van het citaat is een apart tekstveld, zoals bijschriften onder afbeeldingen, zodat de structuur van het citaat is beschermd, zelfs wanneer je de bron selecteert, aanpast of verwijdert. Je kunt het altijd weer eenvoudig terugzetten.<\/p>\r\n\r\n\r\n\r\n<p>Blokken kunnen alles zijn wat je wilt. Zo kun je bijvoorbeeld een subtiel citaat toevoegen in de opbouw van je tekst, of misschien wil je wel een groot opgemaakt citaat laten zien. Al deze mogelijkheden zijn beschikbaar in de inserter.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\r\n<ul class=\"blocks-gallery-grid\">\r\n<li class=\"blocks-gallery-item\">\r\n<figure><img decoding=\"async\" src=\"https:\/\/cldup.com\/n0g6ME5VKC.jpg\" alt=\"\" \/><\/figure>\r\n<\/li>\r\n<li class=\"blocks-gallery-item\">\r\n<figure><img decoding=\"async\" src=\"https:\/\/cldup.com\/ZjESfxPI3R.jpg\" alt=\"\" \/><\/figure>\r\n<\/li>\r\n<li class=\"blocks-gallery-item\">\r\n<figure><img decoding=\"async\" src=\"https:\/\/cldup.com\/EKNF8xD2UM.jpg\" alt=\"\" \/><\/figure>\r\n<\/li>\r\n<\/ul>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>Je kunt het aantal kolommen in je galerijen wijzigen door een slider te slepen in de blokinfo in de zijbalk.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Media rijk<\/h2>\r\n\r\n\r\n\r\n<p>Door de nieuwe <strong>brede<\/strong> en <strong>volledige breedte<\/strong> uitlijningen met galerijen te combineren, kun je heel snel een media-rijke lay-out maken:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image alignfull\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/8lhI-gKnI2.jpg\" alt=\"Toegankelijkheid is belangrijk \u2014 vergeet het alt-attribuut van de afbeelding niet\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Zeker, de afbeelding over de gehele breedte kan nogal groot worden. Maar soms is de afbeelding het waard.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-gallery alignwide columns-2 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\r\n<ul class=\"blocks-gallery-grid\">\r\n<li class=\"blocks-gallery-item\">\r\n<figure><img decoding=\"async\" src=\"https:\/\/cldup.com\/_rSwtEeDGD.jpg\" alt=\"\" \/><\/figure>\r\n<\/li>\r\n<li class=\"blocks-gallery-item\">\r\n<figure><img decoding=\"async\" src=\"https:\/\/cldup.com\/L-cC3qX2DN.jpg\" alt=\"\" \/><\/figure>\r\n<\/li>\r\n<\/ul>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>Hierboven staat een galerij met maar twee afbeeldingen. Het is een eenvoudiger manier om visueel aantrekkelijke lay-outs te maken, zonder met floats te hoeven werken. Je kunt de galerij ook eenvoudig omzetten naar de individuele afbeeldingen met de blok omzetter.<\/p>\r\n\r\n\r\n\r\n<p>Elk blok kan gebruik maken van deze uitlijningen. Het insluitingsblok heeft deze ook en is standaard al responsive:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-embed-vimeo alignwide wp-block-embed is-type-video is-provider-vimeo wp-has-aspect-ratio wp-embed-aspect-16-9\">\r\n<div class=\"wp-block-embed__wrapper\">https:\/\/vimeo.com\/22439234<\/div>\r\n<\/figure>\r\n\r\n\r\n\r\n<p>Je kunt elk blok maken dat je wilt, statisch of dynamisch, decoratief of gewoontjes. Dit is bijvoorbeeld een pull quote blok:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-pullquote\">\r\n<blockquote>\r\n<p>Code is Poetry<\/p>\r\n<cite>De WordPress community<\/cite><\/blockquote>\r\n<\/figure>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center\"><em> Wil je meer weten over het bouwen van extra blokken, of ben je ge\u00efnteresseerd om te helpen met het project, ga dan naar de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\">GitHub repository<\/a>. <\/em><\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"https:\/\/github.com\/WordPress\/gutenberg\">Help Gutenburg bouwen<\/a><\/div>\r\n\r\n\r\n<hr class=\"wp-block-separator\" \/>\r\n\r\n\r\n<p class=\"has-text-align-center\">Bedankt voor het testen van Gutenberg!<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center\">\ud83d\udc4b<\/p>\r\n\r\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Het doel van deze nieuwe editor is het eenvoudig en plezierig maken om rijke inhoud aan WordPress toe te voegen. Dit hele bericht bestaat uit stukjes inhoud &#8211; het lijkt wat op LEGO-stenen &#8211; die je kunt bewegen en waarmee je kunt werken. Beweeg je cursor rond en je ziet dat de verschillende blokken oplichten [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":1,"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/posts\/20\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pleximat.nl\/index.php\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}