{"id":228142,"date":"2022-10-16T09:30:00","date_gmt":"2022-10-16T06:30:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228142"},"modified":"2022-11-09T00:56:04","modified_gmt":"2022-11-08T21:56:04","slug":"skapa-anpassade-metaboxar-med-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-anpassade-metaboxar-med-wordpress-block-editor-gutenberg\/","title":{"rendered":"Skapa anpassade metaboxar med WordPress Block Editor (Gutenberg)"},"content":{"rendered":"\n<p>Den f\u00f6rsta fr\u00e5gan du kanske har \u00e4r &quot;varf\u00f6r skulle jag beh\u00f6va skapa anpassade metaboxar med Block Editor (Gutenberg)?&quot;, du kan fortfarande implementera metaboxar med PHP och l\u00e4gga till kontroller i blocket, inl\u00e4gget eller till och med en anpassad sidof\u00e4lt i Gutenberg.<\/p>\n<p>Det finns n\u00e5gra anledningar till varf\u00f6r du kanske vill g\u00f6ra detta, inklusive:<\/p>\n<ul>\n<li>Vissa block har komplexa inst\u00e4llningar och att visa en metabox i redigeringsl\u00e4ge kan g\u00f6ra det l\u00e4ttare att anv\u00e4nda f\u00f6r en klient<\/li>\n<li>Eftersom du kanske vill \u00e4ndra en viss layoutaspekt av inl\u00e4gget, till exempel rubriken. Du kan d\u00f6lja inl\u00e4ggets rubrikf\u00e4lt och ers\u00e4tta det med en anpassad metabox h\u00f6gst upp p\u00e5 sidan och kunna kontrollera all inl\u00e4ggsmeta som relaterar till det<\/li>\n<li>Eftersom du kan anv\u00e4nda <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blockmallar<\/a> f\u00f6r att placera de anpassade metaboxarna d\u00e4r du vill, s\u00e5 att de blir mer vettiga i sammanhanget<\/li>\n<li>Eftersom du kan till\u00e4mpa denna inl\u00e4rning p\u00e5 andra aspekter av utvecklingen av blockredigerare (Gutenberg).<\/li>\n<\/ul>\n<p>I den h\u00e4r guiden kommer vi att ut\u00f6ka det vi redan har byggt i v\u00e5r <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Post Meta Fields-guide<\/a>. Du kan anv\u00e4nda blockattribut, men p\u00e5 grund av metaboxarnas natur kommer vi att anv\u00e4nda postmetaf\u00e4lt i den h\u00e4r guiden.<\/p>\n<h2>F\u00f6ruts\u00e4ttningar<\/h2>\n<ul>\n<li>Var bekant med <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att skapa plugins f\u00f6r WordPress Gutenberg<\/a><\/li>\n<li>Var bekant <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">med dynamiska block och rendering p\u00e5 serversidan<\/a><\/li>\n<li>Var bekant med att anv\u00e4nda <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">postmetaf\u00e4lt i WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<p>Eftersom vi f\u00f6ljer efter <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Post Meta Fields-guiden<\/a> kommer vi redan att ha anv\u00e4nt <code>register_meta<\/code>f\u00f6r att skapa v\u00e5rt post-metaf\u00e4lt, vilket s\u00e4kerst\u00e4ller att vi har st\u00e4llt <code>show_in_rest<\/code>in p\u00e5 sant och att vi ocks\u00e5 har st\u00e4llt in v\u00e5rt JavaScript-attributs k\u00e4lla till <code>meta<\/code>och definierat meta-nyckeln.<\/p>\n<p>Allt som \u00e5terst\u00e5r \u00e4r att implementera gr\u00e4nssnittet.<\/p>\n<p>Redigera <code>\/src\/edit.js<\/code>filen och ers\u00e4tt <code>@wordpress\/components<\/code>importen med f\u00f6ljande:<\/p>\n<pre><code>import { Panel, PanelBody, TextControl } from '@wordpress\/components';\n<\/code><\/pre>\n<p>Byt sedan ut blocket Redigera kod med f\u00f6ljande:<\/p>\n<pre><code>export default function Edit( { attributes, setAttributes }) {\n    const { blockText } = attributes;\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n                    &lt;TextControl\n                        label={ __( 'Example Meta', 'wholesome-plugin') }\n                        help={ __( 'This is an example meta field.', 'wholesome-plugin') }\n                        onChange={ (blockText) =&gt; setAttributes( { blockText }) }\n                          value={ blockText }\n                    \/&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Vi har nu en <code>Panel<\/code>, en <code>PanelBody<\/code>och en <code>TextControl<\/code>. Observera att jag har lagt <code>admin-plugins<\/code>till parametern till ikonen f\u00f6r <code>PanelBody<\/code>att h\u00e5lla den \u00f6verens med plugin-ikonen.<\/p>\n<h3>Anv\u00e4nd stilarna<\/h3>\n<p>Ers\u00e4tt SCSS <code>\/src\/editor.scss<\/code>med f\u00f6ljande:<\/p>\n<pre><code>.wp-block.wp-block-wholesomecode-wholesome-plugin {\n    color: unset;\n    background: unset;\n    padding: unset;\n\n    p {\n        all: unset;\n    }\n}\n<\/code><\/pre>\n<p>Om du anv\u00e4nder en Custom Meta Box skapad i Gutenberg, skulle jag rekommendera att du placerar den med en <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blockmall<\/a>, men du kan infoga den p\u00e5 vanligt s\u00e4tt s\u00e5 h\u00e4r:<\/p>\n<p>Anv\u00e4nda en Gutenberg Custom Meta Box<\/p>\n<p>N\u00e4r du v\u00e4l har skapat din metabox finns det ingen gr\u00e4ns f\u00f6r vad du kan l\u00e4gga till i den. Hela biblioteket med WordPress Gutenberg React-komponenter \u00e4r tillg\u00e4ngligt f\u00f6r dig, tillsammans med ett stort bibliotek av externa React-komponenter (<a href=\"https:\/\/wholesomecode.ltd\/blog\/select2-as-inspectorcontrol-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se min artikel om att l\u00e4gga till select2 i ditt projekt<\/a> ).<\/p>\n<p>F\u00f6ljande exempel \u00e4r toppen av isberget p\u00e5 vad du kan uppn\u00e5:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169030-61e7fb6b454ff.png\" alt=\"Skapa anpassade metaboxar med WordPress Block Editor (Gutenberg)\" \/>Anpassad metabox med ytterligare metaf\u00e4lt<\/p>\n<p>F\u00f6r att bygga detta, h\u00e4r \u00e4r koden du beh\u00f6ver:<\/p>\n<h3>Registrera dina inl\u00e4ggsmetaf\u00e4lt i PHP<\/h3>\n<p>\u00d6ppna root-PHP-filen f\u00f6r plugin-programmet (i det h\u00e4r fallet <code>wholesome-plugin.php<\/code>) och uppdatera den <code>register_meta<\/code>vi lade till i den tidigare guiden med f\u00f6ljande:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_select',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text_2',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text_3',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_toggle',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; false,\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'boolean',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<h3>Uppdatera JavaScript-attributen<\/h3>\n<p>\u00d6ppna <code>\/src\/index.js<\/code>och ers\u00e4tt attributen som vi lade till i den tidigare guiden med f\u00f6ljande:<\/p>\n<pre><code>attributes: {\n    exampleSelect: {\n        meta: '_wholesomecode_wholesome_plugin_example_select',\n        source: 'meta',\n    },\n    exampleText: {\n        meta: '_wholesomecode_wholesome_plugin_example_text',\n        source: 'meta',\n    },\n    exampleText2: {\n        meta: '_wholesomecode_wholesome_plugin_example_text_2',\n        source: 'meta',\n    },\n    exampleText3: {\n        meta: '_wholesomecode_wholesome_plugin_example_text_3',\n        source: 'meta',\n    },\n    exampleToggle: {\n        meta: '_wholesomecode_wholesome_plugin_example_toggle',\n        source: 'meta',\n    },\n},\n<\/code><\/pre>\n<h3>Importera komponenterna<\/h3>\n<p>Redigera <code>\/src\/edit.js<\/code>filen och ers\u00e4tt <code>@wordpress\/components<\/code>importen med f\u00f6ljande:<\/p>\n<pre><code>import {\n    Panel,\n    PanelBody,\n    PanelRow,\n    SelectControl,\n    TextControl,\n    ToggleControl,\n} from '@wordpress\/components';\n<\/code><\/pre>\n<h3>Uppdatera redigeringsmetoden<\/h3>\n<p>Forts\u00e4tt att redigera <code>\/src\/edit.js<\/code>filen och ers\u00e4tt <code>Edit<\/code>kodblocket med f\u00f6ljande:<\/p>\n<pre><code>export default function Edit( { attributes, setAttributes }) {\n    const {\n        exampleSelect,\n        exampleText,\n        exampleText2,\n        exampleText3,\n        exampleToggle,\n    } = attributes;\n\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n\n                        &lt;SelectControl\n                            help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                            label={ __( 'Example Select','wholesome-plugin') }\n                            onChange={ (exampleSelect) =&gt; setAttributes( { exampleSelect }) }\n                            options={ [\n                                {\n                                    label: __( 'Please Select...', 'wholesome-plugin' ),\n                                    value: '',\n                                },\n                                {\n                                    label: __( 'Option 1', 'wholesome-plugin' ),\n                                    value: 'option-1',\n                                },\n                                {\n                                    label: __( 'Option 2', 'wholesome-plugin' ),\n                                    value: 'option-2',\n                                },\n                            ] }\n                            value={ exampleSelect }\n                        \/&gt;\n\n                        &lt;TextControl\n                            help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                            label={ __( 'Example Text', 'wholesome-plugin') }\n                            onChange={ (exampleText) =&gt; setAttributes( { exampleText }) }\n                            value={ exampleText }\n                        \/&gt;\n\n                    &lt;PanelRow&gt;\n                        &lt;TextControl\n                            help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }\n                            label={ __( 'Example Text 2', 'wholesome-plugin') }\n                            onChange={ (exampleText2) =&gt; setAttributes( { exampleText2 }) }\n                            value={ exampleText2 }\n                        \/&gt;\n                        &lt;TextControl\n                            help={ __( 'This control is inline.', 'wholesome-plugin') }\n                            label={ __( 'Example Text 3', 'wholesome-plugin') }\n                            onChange={ (exampleText3) =&gt; setAttributes( { exampleText3 }) }\n                            value={ exampleText3 }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n\n                        &lt;ToggleControl\n                            checked={ exampleToggle }\n                            help={ __( 'An example toggle.', 'wholesome-plugin') }\n                            label={ __( 'Example Toggle', 'wholesome-plugin') }\n                            onChange={ (exampleToggle) =&gt; setAttributes( { exampleToggle }) }\n                        \/&gt;\n\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<h3>L\u00e4gg till lite SCSS<\/h3>\n<p>\u00d6ppna slutligen <code>\/src\/editor.scss<\/code>filen och ers\u00e4tt dess inneh\u00e5ll med f\u00f6ljande:<\/p>\n<pre><code>.wp-block.wp-block-wholesomecode-wholesome-plugin {\n    color: unset;\n    background: unset;\n    padding: unset;\n\n    .components-base-control {\n        margin-bottom: 1rem;\n\n        select {\n            height: 2rem;\n            min-height: 2rem;\n        }\n    }\n\n    p {\n        all: unset;\n    }\n}\n<\/code><\/pre>\n<ul>\n<li>Ta en titt p\u00e5 att skapa <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kapslade underordnade block med <code>InnerBlocks<\/code>komponenten<\/a><\/li>\n<li>Ta en titt p\u00e5 hur du <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">anv\u00e4nder inst\u00e4llningar f\u00f6r att lagra data i alternativtabellen i Gutenberg<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Den f\u00f6rsta fr\u00e5gan du kanske har \u00e4r &#8221;varf\u00f6r skulle jag beh\u00f6va skapa anpassade metaboxar med Block Editor (Gutenberg)?&#8221;, du kan fortfarande implementera metaboxar med PHP och l\u00e4gga till kontroll&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[942,848,901,922,724,868],"tags":[1173],"class_list":["post-228142","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-handledningar","category-koda","category-oevrig","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228142","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=228142"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228142\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}