De Icon Block-plug-in is vorige week beschikbaar gesteld door Nick Diego. Het is niet afhankelijk van een bibliotheek van derden zoals andere vergelijkbare blokken. Ontwikkelaars en doe-het-zelvers zullen het prettig vinden dat elk SVG-bestand eenvoudig aan de editor kan worden toegevoegd.
Met iets meer dan een jaar onder zijn riem heeft Diego de Block Visibility-plug-in gemaakt , die snel een van de meest populaire in zijn vakgebied wordt. Tijdens de zomer voegde hij een pro-versie toe met meer gespecialiseerde functies. Als het gaat om de blokeditor, heeft hij blijk gegeven van de bereidheid om met innovatieve ideeën te komen, terwijl hij tot nu toe de algehele tevredenheid van de eindgebruiker in de gaten houdt. Het lijkt erop dat zijn meest recente plug-in niet anders is.
Hij werd geïnspireerd om Icon Block te maken nadat hij de prijspagina voor Block Visibility had samengesteld. Hij had een lange lijst met functies en codeerde handmatig de pictogrammen in het HTML-blok om erbij te horen.
Een screenshot van de prijstabel van de Block Visibility-prijspagina. Een lijst met functies vindt u aan de linkerkant van het scherm. Vinkjes en "x"-pictogrammen zijn te vinden aan de rechterkant van het scherm.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nu
Het gebruik van HTML-blokken voor SVG-pictogrammen (en het niet willen gebruiken van een blokbibliotheek) was een bron van irritatie voor Diego geworden, dus hij lanceerde deze snelle oplossing. "Mijn doel was om alleen native WordPress-componenten te gebruiken om een eenvoudig SVG-pictogramblok te maken. En naarmate er nieuwe functies aan de kern worden toegevoegd (zoals marges en responsieve bedieningselementen), zal ik dit blok dienovereenkomstig bijwerken.
De uitkomst was positief. Voor een pictogramoplossing die afhankelijk is van het WordPress-bloksysteem, controleert deze alle juiste criteria.
SVG-code in een tekstveld wordt als resultaat van deze functie zowel in de editor als aan de voorkant weergegeven.
Daar houdt het echter niet op. Om de oplossing af te ronden, maakt het gebruik van zowel kerncomponenten als door blokken ondersteunde functies. Het heeft functies die een must-have zijn, zoals ondersteuning voor kleuren en uitlijning. Om naar een URL te linken, kunnen gebruikers de grootte, opvulling en randradius van het pictogram wijzigen.
Een ding dat ik graag zou willen zien, is de mogelijkheid om de randstijl, -breedte en -kleur aan te passen. Een leuk extraatje, maar voor de meeste mensen geen topprioriteit.
Met een blauwe achtergrond en een wit symbool is het WordPress-logo te zien als een icoon.
Het wijzigen van de kleuren, grootte, afstand en randradius van het pictogram is een eenvoudig proces.
Het zou voor een lancering voldoende zijn geweest om ondersteuning voor belangrijke componenten op te nemen, maar Diego ging een stap verder door op maat gemaakte functionaliteit op te nemen. Met de knop "roteren" op het pictogramblok kunnen gebruikers het pictogram 90 graden draaien. Het pictogram kan horizontaal of verticaal worden omgedraaid met behulp van de knoppen op de werkbalk.
Icon-plug-ins zoals deze hebben een breed scala aan toepassingen in de WordPress-editor. Een eenvoudig raster van dozen met een afbeelding bovenaan is een typisch ontwerp.
Door het Kolommenblok in Icon Block te gebruiken, kunnen aangepaste pictogrammen worden toegevoegd en aangepast. De mogelijkheden zijn echter vrijwel eindeloos.
WordPress is waar de componenten ontbreken. Er zijn momenteel niet veel goede opties om horizontale lay-outs te maken. Het is in dit geval moeilijk om pictogrammen uit te lijnen met tekst.
De Row-variant van het groepsblok, die nieuw is toegevoegd, heeft een groot potentieel. Pictogrammen kunnen naast alinea's in de editor worden geplaatst, zoals aangetoond in de bijgevoegde schermafbeelding. De prijstabel die ik heb gemaakt, was eenvoudig en bevatte vinkjes.
Het gebruik van het pictogramblok als vinkjes in een lijst wordt gedemonstreerd in deze prijstabel met twee kolommen.
Op dit moment is er geen interfacebesturing voor het aanpassen van de afstand tussen objecten. Idealiter moeten de pictogrammen zo dicht mogelijk bij de tekst staan.
Bovendien moet dit een lijst zijn in plaats van een verklaring. Voor het bouwen van het arrangement zijn geen andere blokken nodig. Gebruikers kunnen echter geen blokken nesten in het lijstblok.
Er is niets mis met de Icon Block-plug-in; alles is zoals het moet zijn. Het illustreert slechts een scenario waarin WordPress nuttig zou zijn. Dit zou de functionaliteit van plug-ins van dit type aanzienlijk verbeteren.
De Gutenberg-plug-in, die in de nabije toekomst in WordPress wordt geïntegreerd, heeft ondersteuning voor een icon block. Er is enige discussie geweest over het toestaan van gebruikers om SVG-bestanden rechtstreeks in de editor in te voegen sinds Gutenberg Project Lead Matas Ventura er in 2019 een ticket over heeft gemaakt. Het is waarschijnlijker dat dit een visuele keuze is die voorkomt dat eindgebruikers aangepaste code toevoegen. Als alternatieve methode met meer flexibiliteit kan Diego's blok nog steeds bestaan.
Hoewel de huidige vorm van de plug-in misschien geweldig is voor velen in de WordPress-gemeenschap, heeft Diego ambities om het nog beter te maken. Gebruikers die geen SVG-code willen toevoegen, kunnen een icon selector gebruiken, zegt hij. De ingebouwde WordPress-pictogrammen worden standaard weergegeven. Hij is echter van plan om externe ontwikkelaars in staat te stellen aangepaste "pictogrampakketten" te maken om de functionaliteit van de app uit te breiden.
