Dans ce guide, nous allons d\u00e9velopper ce que nous avons d\u00e9j\u00e0 construit dans notre guide Post Meta Fields<\/a>. Vous pouvez utiliser des attributs de bloc, mais en raison de la nature des m\u00e9ta-bo\u00eetes, nous utiliserons des champs post-m\u00e9ta dans ce guide.<\/p>\n Parce que nous suivons le guide Post Meta Fields<\/a>, nous aurons d\u00e9j\u00e0 utilis\u00e9 Il ne reste plus qu’\u00e0 impl\u00e9menter l’interface.<\/p>\n Modifiez le Remplacez ensuite le bloc de code d’\u00e9dition par ce qui suit\u00a0:<\/p>\n Nous avons maintenant un Remplacez le SCSS Si vous utilisez une Custom Meta Box cr\u00e9\u00e9e dans Gutenberg, je vous recommande de la placer avec un mod\u00e8le de bloc<\/a>, mais vous pouvez l’ins\u00e9rer normalement comme ceci :<\/p>\n Utilisation d’une m\u00e9ta-bo\u00eete personnalis\u00e9e de Gutenberg<\/p>\nConditions pr\u00e9alables<\/h2>\n
\n
register_meta<\/code>pour cr\u00e9er notre champ post meta, en nous assurant que nous avons d\u00e9fini show_in_rest<\/code>sur true et nous aurons \u00e9galement d\u00e9fini la source de notre attribut JavaScript sur meta<\/code>et d\u00e9fini la cl\u00e9 m\u00e9ta.<\/p>\n\/src\/edit.js<\/code>fichier en rempla\u00e7ant l’ @wordpress\/components<\/code>importation par ce qui suit\u00a0:<\/p>\nimport { Panel, PanelBody, TextControl } from '@wordpress\/components';\n<\/code><\/pre>\nexport default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<div { ...useBlockProps() }>\n <Panel>\n <PanelBody\n title={ __( 'Example Meta Box', 'wholesome-plugin') }\n icon=\"admin-plugins\"\n >\n <TextControl\n label={ __( 'Example Meta', 'wholesome-plugin') }\n help={ __( 'This is an example meta field.', 'wholesome-plugin') }\n onChange={ (blockText) => setAttributes( { blockText }) }\n value={ blockText }\n \/>\n <\/PanelBody>\n <\/Panel>\n <\/div>\n );\n}\n<\/code><\/pre>\nPanel<\/code>, un PanelBody<\/code>et un TextControl<\/code>. Notez que j’ai ajout\u00e9 le admin-plugins<\/code>param\u00e8tre \u00e0 l’ic\u00f4ne du PanelBody<\/code>pour le garder coh\u00e9rent avec l’ic\u00f4ne du plugin.<\/p>\nAppliquer les styles<\/h3>\n
\/src\/editor.scss<\/code>par ce qui suit\u00a0:<\/p>\n.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
![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169030-61e7fb6b454ff.png\")
Bo\u00eete m\u00e9ta personnalis\u00e9e avec champs m\u00e9ta suppl\u00e9mentaires<\/p>\n