{"id":233424,"date":"2023-02-14T14:42:00","date_gmt":"2023-02-14T11:42:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233424"},"modified":"2022-11-10T23:37:02","modified_gmt":"2022-11-10T20:37:02","slug":"skapa-anpassat-gutenberg-block-del-6-verktygsfaelt","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-anpassat-gutenberg-block-del-6-verktygsfaelt\/","title":{"rendered":"Skapa anpassat Gutenberg-block – Del 6: Verktygsf\u00e4lt"},"content":{"rendered":"\n

I det h\u00e4r inl\u00e4gget l\u00e4r vi oss hur du l\u00e4gger till WordPress verktygsf\u00e4lt i v\u00e5rt block, dvs f\u00f6r justering och blockjustering. Vi kommer ocks\u00e5 att l\u00e4ra oss att l\u00e4gga till v\u00e5ra egna verktygsf\u00e4lt med v\u00e5ra egna knappar f\u00f6r att g\u00f6ra anpassade \u00e5tg\u00e4rder.<\/p>\n

L\u00e4gga till verktygsf\u00e4lt<\/h2>\n

F\u00f6r att l\u00e4gga till n\u00e5got i verktygsf\u00e4ltet f\u00f6r v\u00e5rt block m\u00e5ste vi linda in det vi vill ha i det i en komponent som heter BlockControls<\/code>(fr\u00e5n wp.blockEditor<\/code>). Inuti denna komponent kan vi l\u00e4gga till antingen en av WordPress-komponenterna f\u00f6r standardverktygsf\u00e4lten vi k\u00e4nner fr\u00e5n andra block (till exempel justering) eller s\u00e5 kan vi l\u00e4gga till v\u00e5rt eget verktygsf\u00e4lt.<\/p>\n

Som standard kommer ett block att ha ett verktygsf\u00e4lt som endast inneh\u00e5ller blockets ikon (f\u00f6r Transformera till funktionalitet) och blockmenyn f\u00f6r att t.ex. ta bort blocket. Vi kan inte ta bort dem, men vi kan l\u00e4gga till v\u00e5ra egna knappar och verktygsf\u00e4lt d\u00e4remellan.<\/p>\n

Vissa WordPress-komponenter kommer dock att l\u00e4gga till sina egna verktygsf\u00e4lt. Fr\u00e5n och med nu visar v\u00e5rt block ett verktygsf\u00e4lt f\u00f6r textformatering som kommer fr\u00e5n RichText<\/code>komponenten vi lagt till.<\/p>\n

\"Skapa<\/a><\/p>\n

L\u00e4gga till ett verktygsf\u00e4lt f\u00f6r blockjustering<\/h2>\n

Blockjusteringsverktygsf\u00e4ltet finns p\u00e5 praktiskt taget alla WordPress-blocktyper, s\u00e5 l\u00e5t oss l\u00e4gga till det i v\u00e5rt block ocks\u00e5. Bakom kulisserna finns det en komponent BlockAlignmentToolbar<\/code>som vi skulle kunna l\u00e4gga till, men jag rekommenderar att inte g\u00f6ra det. Att anv\u00e4nda det kr\u00e4ver att du manuellt hanterar klasserna f\u00f6r blockjustering och ser till att blocket ut\u00f6kar sin bredd i editorn n\u00e4r du v\u00e4ljer "Wide Width" eller "Full Width". Som tur \u00e4r har WordPress gjort det v\u00e4ldigt enkelt att implementera det, helautomatiskt.<\/p>\n

PS: Det aktiva temat m\u00e5ste aktivt ha lagt till temast\u00f6d f\u00f6r dessa tv\u00e5 blockjusteringar. Du kan l\u00e4gga till st\u00f6d f\u00f6r dessa genom att ha add_theme_support('align-wide')<\/code>i after_setup_theme<\/code>kroken.<\/p>\n

Vi kan l\u00e4gga till en ny egenskap till v\u00e5r objektkonfiguration i registerBlockType()<\/code>, kallad supports<\/code>. Det finns n\u00e5gra andra funktioner men det vi \u00e4r intresserade av h\u00e4r \u00e4r align<\/code>. Vi kan antingen st\u00e4lla align<\/code>in f\u00f6r true<\/code>att l\u00e4gga till alla m\u00f6jliga justeringar, eller s\u00e5 kan vi tillhandah\u00e5lla en upps\u00e4ttning av exakt vilka justeringar vi till\u00e5ter f\u00f6r v\u00e5rt block.<\/p>\n

...\nregisterBlockType('awp\/firstblock', {\n    ...\n    supports: {\n        align: true\n    },\n    edit: (props) => {\n        ...\n});<\/code><\/pre>\n
Vilket ger oss detta i redakt\u00f6ren:<\/p>\n
\"Skapa<\/a><\/p>\n
Om du till exempel vill f\u00f6rhindra att n\u00e5gon anv\u00e4nder Wide Width eller Full Width, kan du tillhandah\u00e5lla en array och utesluta dessa tv\u00e5. Namnen p\u00e5 blockjusteringarna \u00e4r f\u00f6ljande: left<\/code>, right<\/code>, center<\/code>, wide<\/code>, och full<\/code>.<\/p>\n
supports: {\n    align: ['left', 'right', 'center']\n},<\/code><\/pre>\n
Beh\u00f6ver du standardjustering?<\/h3>\n
Som standard f\u00e5r blocket ingen blockjustering. Om du vill kan du st\u00e4lla in en standard genom att skapa ett attribut med nyckeln align<\/code>, st\u00e4lla in typen p\u00e5 string<\/code>och st\u00e4lla in standarden d\u00e4r. WordPress kommer automatiskt att koppla detta attribut till blockjusteringen.<\/p>\n
attributes: {\n    align: {\n        type: 'string',\n        default: 'center'\n    }\n},\nsupports: {\n    align: true\n},<\/code><\/pre>\n
Med detta n\u00e4r ett nytt block av v\u00e5r typ skapas, centreras standardblockinriktningen.<\/p>\n
Blockera inriktning styling r\u00f6ra? Inte v\u00e5rt fel<\/h3>\n
Obs:<\/strong> Standardblockstilen fr\u00e5n WordPress kommer att st\u00f6ra fl\u00f6det av ditt inl\u00e4ggsinneh\u00e5ll n\u00e4r du anv\u00e4nder v\u00e4nster och h\u00f6ger blockjustering. Samma sak h\u00e4nder med andra blocktyper fr\u00e5n WordPress ocks\u00e5 och \u00e4r inte enbart v\u00e5rt blocks problem. Detta orsakas av att l\u00e4gga till float till elementet, vilket kollapsar det \u00f6verordnade elementet. Tro mig, jag har f\u00f6rs\u00f6kt konstruera blocket f\u00f6r att undvika detta problem. Det enda jag har funnit fungera korrekt utan att kr\u00e5ngla med de andra blockjusteringarna \u00e4r genom att l\u00e4gga till styling i editorn och justera flytstilen.<\/p>\n
\"Skapa<\/a><\/p>\n
Oavsett vilket har WordPress gjort det ganska enkelt att implementera blockjustering. L\u00e5t oss nu titta p\u00e5 andra verktygsf\u00e4lt vi kan anv\u00e4nda.<\/p>\n
L\u00e4gga till ett verktygsf\u00e4lt f\u00f6r textjustering<\/h2>\n
Om du hellre vill ha verktygsf\u00e4ltet f\u00f6r textjustering kan du g\u00f6ra detta ist\u00e4llet f\u00f6r blockjustering \u2013 i detta verktygsf\u00e4lt har vi bara v\u00e4nster-, centrerings- och h\u00f6gerjustering. Faktum \u00e4r att du kan anv\u00e4nda b\u00e5de textjustering och blockjustering tillsammans \u2013 de fungerar separat. F\u00f6r att inte f\u00f6rvirra anv\u00e4ndare kan du till exempel bara l\u00e4gga till st\u00f6d f\u00f6r bred- och fullbreddsblockjustering, och anv\u00e4nda verktygsf\u00e4ltet f\u00f6r textjustering f\u00f6r att styra v\u00e4nster-, mitt- eller h\u00f6gerjusteringen. Genom att g\u00f6ra detta undviker du ovan n\u00e4mnda problem<\/strong> med blockfl\u00f6det i editorn. Det \u00e4r upp till dig hur du vill att ditt block ska fungera.<\/p>\n
WordPress har en komponent f\u00f6r att mata ut verktygsf\u00e4ltet f\u00f6r textjustering, men ingen automatisk hantering av att l\u00e4gga till r\u00e4tt klasser f\u00f6r att faktiskt g\u00f6ra inneh\u00e5llet justerat \u2013 b\u00e5de inuti editorn och frontend (s\u00e5vitt jag har hittat \u00e5tminstone!). Vi m\u00e5ste manuellt l\u00e4gga till och uppdatera ett attribut f\u00f6r textjusteringen.<\/p>\n
L\u00e4gger till BlockControls<\/code>ochAlignmentToolbar<\/code><\/h3>\n
L\u00e5t oss \u00e4ntligen l\u00e4gga BlockControls<\/code>till v\u00e5r edit<\/code>funktion f\u00f6r v\u00e5r produktion i verktygsf\u00e4ltet. Komponenten f\u00f6r textjustering \u00e4r AlignmentToolbar<\/code>fr\u00e5n wp.blockEditor<\/code>paketet.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    icon: 'smiley',\n    description: 'Learning in progress',\n    keywords: ['example', 'test'],\n    attributes: {\n        myRichHeading: {\n            type: 'string',\n        },\n        myRichText: {\n            type: 'string',\n            source: 'html',\n            selector: 'p'\n        },\n        textAlignment: {\n            type: 'string',\n        }\n    },\n    supports: {\n        align: ['wide', 'full']\n    },\n    edit: (props) => {\n        const { attributes, setAttributes } = props;\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n        return (<div className={alignmentClass}>\n                <InspectorControls>\n                    ... \n                <\/InspectorControls>\n                <BlockControls>\n                    <AlignmentToolbar\n                        value={attributes.textAlignment}\n                        onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n                    \/>\n                <\/BlockControls>\n                <RichText \n                    tagName=\"h2\"\n                    placeholder=\"Write your heading here\"\n                    value={attributes.myRichHeading}\n                    onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n                \/>\n                <RichText\n                    tagName=\"p\"\n                    placeholder=\"Write your paragraph here\"\n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/>\n            <\/div>\n        );\n\u00a0\n    },\n    save: (props) => { \n        const { attributes } = props;\n\u00a0\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n        return (<div className={alignmentClass}>\n                <RichText.Content \n                    tagName=\"h2\"\n                    value={attributes.myRichHeading}\n                \/>\n                <RichText.Content \n                    tagName=\"p\"\n                    value={attributes.myRichText}\n                \/>\n                {attributes.activateLasers && \n                    <div className=\"lasers\">Lasers activated<\/div>\n                }\n            <\/div>\n        );\n    }\n});<\/code><\/pre>\n
Observera att jag har uteslutit inneh\u00e5llet i allt vi skapade InspectorControls<\/code>i f\u00f6reg\u00e5ende steg f\u00f6r att f\u00f6rkorta koden.<\/p>\n
Mellan raden #37<\/code>till #42<\/code>finns hela inneh\u00e5llet i v\u00e5rt verktygsf\u00e4lt (f\u00f6rutom blockjusteringen som automatiskt l\u00e4ggs till av supports<\/code>egenskapen och textformateringen som l\u00e4ggs till av v\u00e5ra RichText<\/code>komponenter). Vi anv\u00e4nder BlockControls<\/code>f\u00f6r att komma \u00e5t verktygsf\u00e4ltet, och inuti l\u00e4gger vi till AlignmentToolbar<\/code>komponenten.<\/p>\n
Som vi har gjort flera g\u00e5nger med ing\u00e5ngar tillhandah\u00e5ller vi en value<\/code>prop f\u00f6r att visa det sparade v\u00e4rdet och en onChange<\/code>prop f\u00f6r att uppdatera v\u00e5rt attribut till AlignmentToolbar<\/code>komponenten. Attributet vi kommer att anv\u00e4nda f\u00f6r att lagra den valda textjusteringen definieras som textAlignment<\/code>och m\u00e5ste vara typ string<\/code>. Som vanligt kan du tillhandah\u00e5lla ett default<\/code>f\u00f6r att s\u00e4kerst\u00e4lla att nyskapade block f\u00e5r en standardjustering.<\/p>\n
F\u00f6r att s\u00e4kerst\u00e4lla att blocket b\u00e5de matar ut anpassningsinformationen och \u00e4ven blir formaterad korrekt (s\u00e5 att vi faktiskt ser texten \u00e4ndra justering) b\u00e5de i editorn och i frontend, m\u00e5ste vi manuellt st\u00e4lla in r\u00e4tt klass p\u00e5 wrapping div. I b\u00e5de edit<\/code>och save<\/code>jag definierar en variabel som kontrollerar om attributes.textAlignment<\/code>\u00e4r satt. Om det \u00e4r s\u00e5 bygger jag klassnamnet efter WordPresss standarder f\u00f6r textjusteringar, vilket \u00e4r "has-text-align-(left|center|right)". Med den h\u00e4r klassen kommer WordPress att applicera sin stil p\u00e5 v\u00e5rt block och se till att v\u00e5rt block visuellt justeras korrekt, b\u00e5de i editorn och frontend.<\/p>\n
L\u00e4gga till anpassade verktygsf\u00e4lt med v\u00e5ra egna knappar<\/h3>\n
Du kan ocks\u00e5 l\u00e4gga till dina egna knappar i verktygsf\u00e4ltet f\u00f6r att g\u00f6ra vad du vill n\u00e4r du klickar p\u00e5 dem. F\u00f6r att g\u00f6ra detta vill du l\u00e4gga till komponenten Toolbar<\/code>och inuti detta element l\u00e4gga till en IconButton<\/code>(b\u00e5da i wp.components<\/code>paketet). Allt inom BlockControls<\/code>s\u00e5klart.<\/p>\n
Obs<\/strong>: Enligt WordPress \u00e4r Gutenbergs \u00e4ndringslogg utfasad IconButton<\/code>till f\u00f6rm\u00e5n f\u00f6r att anv\u00e4nda Button<\/code>. Men jag verkar inte f\u00e5 en ikon att visas med Button<\/code>komponenten oavsett vad jag g\u00f6r, \u00e4ven om den ska st\u00f6dja det. S\u00e5 fr\u00e5n och med nu kommer jag att anv\u00e4nda IconButton<\/code>.<\/p>\n
Du kan sj\u00e4lvklart kombinera flera verktygsf\u00e4ltskomponenter inom BlockControls<\/code>. Med koden nedan l\u00e4gger vi till verktygsf\u00e4ltet f\u00f6r textjustering och v\u00e5rt anpassade verktygsf\u00e4lt med en knapp efter.<\/p>\n
<BlockControls>\n    <AlignmentToolbar\n        value={attributes.textAlignment}\n        onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n    \/>\n    <Toolbar>\n        <IconButton\n            label=\"My very own custom button\"\n            icon=\"edit\"\n            className=\"my-custom-button\"\n            onClick={() => console.log('pressed button')}\n        \/>\n    <\/Toolbar>\n<\/BlockControls><\/code><\/pre>\n
IconButton-komponenten accepterar en WordPress-dashikonikon<\/a> eller en SVG till rekvisitan icon<\/code>. Vi kan tillhandah\u00e5lla n\u00e5gra andra rekvisita som className<\/code>och label<\/code>(kommer att visas i verktygstipset n\u00e4r du h\u00e5ller muspekaren \u00f6ver knappen). Den rekvisita vi \u00e4r mest intresserad av \u00e4r uppenbarligen den onClick<\/code>rekvisita som avfyras n\u00e4r knappen klickas. H\u00e4r kan vi tillhandah\u00e5lla en funktion och i princip g\u00f6ra vad vi vill. M\u00f6jligheterna \u00e4r o\u00e4ndliga och beror p\u00e5 vad du vill g\u00f6ra. I koden ovan konsolloggar jag helt enkelt n\u00e5got n\u00e4r knappen klickas. N\u00e4r vi g\u00e5r vidare i den h\u00e4r handledningsserien kommer du f\u00f6rmodligen att f\u00e5 n\u00e5gra id\u00e9er om hur du f\u00e5r din anpassade knapp att g\u00f6ra vad du vill att den ska g\u00f6ra.<\/p>\n
\"Skapa<\/a><\/p>\n
Det h\u00e4r \u00e4r vad vi har gjort hittills. I n\u00e4sta steg i serien b\u00f6rjar vi titta p\u00e5 mer avancerade saker och vi kommer att l\u00e4ra oss hur vi skapar v\u00e5ra egna komponenter f\u00f6r att utnyttja statliga och andra f\u00f6rdelar.<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
I det h\u00e4r inl\u00e4gget kommer vi att l\u00e4ra oss hur du l\u00e4gger till WordPress Gutenbergs verktygsf\u00e4lt till v\u00e5rt block; textjustering, blockjustering och v\u00e5ra egna anpassade verktygsf\u00e4lt.<\/p>\n","protected":false},"author":1,"featured_media":153354,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,838,942,942,848,901,922,1110,922,818,818,838,848,868,868],"tags":[1173],"class_list":["post-233424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-guide-foer-nyboerjare","category-gutenberg-9","category-handledningar","category-oevrig","category-n-a","category-plugins-3","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233424"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233424\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/153354"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}