![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\")
<\/a><\/p>\nIl met maintenant \u00e0 jour avec succ\u00e8s nos attributs lors du choix des couleurs. Vous pouvez voir qu’il se souvient de votre choix de couleur lors de l’enregistrement du message.<\/p>\n
Cependant, rien ne se passe visuellement lorsque vous changez de couleur. Le choix de couleur est stock\u00e9 dans les attributs, mais aucun changement de couleur ne se produit dans l’\u00e9diteur, ni lors de la pr\u00e9visualisation de la publication. C’est parce que nous devons ajouter du code pour les classes et les styles du bloc. Nous devons le faire \u00e0 la fois pour la edit<\/code>fonction (qui est pour l’\u00e9diteur) et save<\/code>la fonction (frontend). C’est la prochaine \u00e9tape.<\/p>\nGestion des styles de classe et en ligne dansedit<\/code><\/h3>\nNous devons cr\u00e9er les attributs de classe et de style de n\u0153ud du bloc en fonction du param\u00e8tre de couleur choisi. Heureusement, withColors<\/code>nous obtenons une certaine automatisation dans ce domaine. N’oubliez pas qu’il props.textColor<\/code>s’agit d’un objet qui contient toutes les informations dont nous avons besoin, y compris le nom de la classe.<\/p>\nNous pourrions faire quelque chose comme ceci :<\/p>\n
...\nconst BlockWithColorSettings = (props) => {\n const { textColor, setTextColor } = props; \/\/ Props received from withColors\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n if (textColor.class != undefined) {\n divClass = textColor.class;\n } else {\n divStyles.color = textColor.color;\n }\n }\n return(\n <Fragment>\n <InspectorControls>\n ...\n <\/InspectorControls>\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n ...<\/code><\/pre>\n\u00c0 la ligne, #20<\/code>nous appliquons la classe critique et le style en ligne au n\u0153ud racine de notre bloc. Avant cela, nous construisons la classe et l’attribut de style en ligne en v\u00e9rifiant l’ props.textColor<\/code>objet.<\/p>\nApr\u00e8s ce changement, votre bloc personnalis\u00e9 devrait maintenant \u00eatre enti\u00e8rement fonctionnel dans l’\u00e9diteur. Chaque fois que vous changez de couleur, le bloc change la couleur du texte. Impressionnant! La derni\u00e8re \u00e9tape consiste \u00e0 le faire save<\/code>\u00e9galement pour la fonction, afin que nous obtenions \u00e9galement ces classes et ces styles dans le frontend.<\/p>\nGestion des styles de classe et en ligne danssave<\/code><\/h3>\nLe concept de construction des styles de classe et en ligne et de leur application au n\u0153ud racine est le m\u00eame dans save<\/code>que dans edit<\/code>. Mais il y a une diff\u00e9rence cruciale. Dans save<\/code>nous n’avons pas les accessoires fournis par withColors<\/code>. Et nous ne pouvons pas ajouter de composants d’ordre sup\u00e9rieur \u00e0 la save<\/code>fonction. Ainsi, dans la save<\/code>fonction, toutes les informations dont nous disposons sont les attributs.<\/p>\nC’est une bonne r\u00e8gle d’or d’\u00e9viter de coder en dur les noms de classe "has-". Et si WordPress d\u00e9cidait de changer cette r\u00e8gle \u00e0 l’avenir? Heureusement, nous avons une fonction qui peut nous aider \u00e0 g\u00e9n\u00e9rer les bons noms de classe pour nous: getColorClassName()<\/code>.<\/p>\nAvant d’oublier, d\u00e9structurons-le. C’est aussi dans le wp.blockEditor<\/code>paquet.<\/p>\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;<\/code><\/pre>\nL’utilisation de la getColorClassName()<\/code>fonction n\u00e9cessite deux param\u00e8tres. D’abord une cha\u00eene pour la r\u00e8gle CSS. \u00c9tant donn\u00e9 que notre param\u00e8tre de couleur concerne la couleur du texte, nous fournissons ‘ color<\/code>‘. Cela indique \u00e0 la fonction qu’elle doit renvoyer un nom de classe "a-quelque chose-couleur" et non "a-quelque chose-couleur-arri\u00e8re-plan" par exemple. Comme deuxi\u00e8me param\u00e8tre, nous devons fournir la valeur de l’attribut.<\/p>\nL’attribut style est simplement construit en d\u00e9finissant \u00abcolor\u00bb sur la valeur de l’attribut customTextColor<\/code>, s’il est d\u00e9fini.<\/p>\nsave: (props) => { \n const { textColor, customTextColor } = props.attributes;\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n divClass = getColorClassName('color', textColor);\n }\n if (customTextColor != undefined) {\n divStyles.color = customTextColor;\n }\n return(\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n );\n}<\/code><\/pre>\nEt bien s\u00fbr, n’oubliez pas d’appliquer la classe et le style sur le n\u0153ud racine de votre bloc ; comme en ligne #12<\/code>.<\/p>\nPS: Si vous testez votre bloc dans l’\u00e9diteur en \u00e9crivant ce code, vous obtiendrez maintenant une erreur de bloc. Cela se produit parce que nous avons maintenant modifi\u00e9 la sortie de la save<\/code>fonction et que tout ce que vous avez enregistr\u00e9 pr\u00e9c\u00e9demment est en conflit. Vous devrez supprimer le bloc et le rajouter \u00e0 nouveau.<\/p>\nApr\u00e8s ce changement, votre bloc devrait maintenant appliquer correctement la couleur de texte choisie dans le frontend \u00e9galement.<\/p>\n
Et c’est tout! Vous avez maintenant impl\u00e9ment\u00e9 avec succ\u00e8s les param\u00e8tres de couleur dans votre bloc. Si vous souhaitez ajouter plusieurs param\u00e8tres de couleur (pas seulement la couleur du texte), lisez la suite.<\/p>\n
Remarque sur les param\u00e8tres de couleurs multiples<\/h2>\n
\u00c0 pr\u00e9sent, vous devriez \u00eatre en mesure d’impl\u00e9menter plusieurs param\u00e8tres de couleur. Vous voudrez peut-\u00eatre ajouter des param\u00e8tres pour la couleur d’arri\u00e8re-plan, la couleur du texte, la couleur de la bordure ou quoi que ce soit d’autre pour votre bloc. Dans cette section, je vais faire un bref aper\u00e7u de ce que nous devons faire pour impl\u00e9menter plusieurs param\u00e8tres de couleur.<\/p>\n
Supposons que je souhaite \u00e9galement ajouter une couleur d’arri\u00e8re-plan \u00e0 mon bloc.<\/p>\n
Je dois d’abord d\u00e9finir un nouvel attribut nomm\u00e9 de mani\u00e8re cr\u00e9ative backgroundColor<\/code>. Je d\u00e9finis \u00e9galement un autre attribut customBackgroundColor<\/code>.<\/p>\nDans la edit<\/code>fonction, je change l’objet fourni en withColors<\/code>tant que tel:<\/p>\nwithColors({textColor: 'color', backgroundColor: 'background-color'})<\/code><\/pre>\nCela indique withColors<\/code>que mon textColor<\/code>attribut est pour la r\u00e8gle CSS " color<\/code>" (pour la couleur du texte), et l’attribut backgroundColor<\/code>est pour la r\u00e8gle CSS " background-color<\/code>". withColors<\/code>reconna\u00eetra et mettra \u00e9galement \u00e0 jour automatiquement les attributs et customTextColor<\/code>.customBackgroundColor<\/code><\/p>\nDans le PanelColorSettings<\/code>composant, je fournis un autre objet au tableau au prop colorSettings<\/code>. Ainsi:<\/p>\n<PanelColorSettings \n title={__('Color settings')}\n colorSettings={[\n {\n value: textColor.color,\n onChange: setTextColor,\n label: __('Text color')\n },\n {\n value: backgroundColor.color,\n onChange: setBackgroundColor,\n label: __('Background color')\n },\n ]}\n\/><\/code><\/pre>\nAvec cela, vous devriez obtenir deux param\u00e8tres de couleur distincts dans la zone Inspecteur pour les param\u00e8tres de couleur.<\/p>\n
La derni\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er les noms et les styles de classe appropri\u00e9s dans edit<\/code>et save<\/code>. Il s’agit d’une \u00e9tape assez simple car il s’agit simplement de cr\u00e9er correctement une cha\u00eene ou un objet de style. N’oubliez pas que votre nom de classe doit prendre en charge plusieurs classes de couleurs (par exemple, si la couleur du texte et la couleur d’arri\u00e8re-plan ont \u00e9t\u00e9 choisies). Ajoutez simplement un espace entre chaque nom de classe.<\/p>\nPS\u00a0: si vous devez g\u00e9rer de nombreux noms de classe pour votre bloc, vous pourriez b\u00e9n\u00e9ficier de l’installation du classnames<\/code>package. Presque tous les composants de Gutenberg utilisent cette biblioth\u00e8que pour combiner plus facilement les noms de classe.<\/p>\nConclusion et code complet<\/h2>\n
Vous devriez maintenant avoir appris \u00e0 impl\u00e9menter les param\u00e8tres de couleur dans votre bloc personnalis\u00e9. J’esp\u00e8re que cela vous a \u00e9t\u00e9 utile! J’ai d\u00fb ajouter cette fonctionnalit\u00e9 \u00e0 mon projet, et je n’ai vraiment trouv\u00e9 aucune information ou bonne documentation. C’est donc le r\u00e9sultat de la consolidation de tout ce que j’ai appris sur ce sujet, apr\u00e8s de nombreux essais et erreurs.<\/p>\n
Voici le code final, au total, pour l’exemple de bloc personnalis\u00e9 avec r\u00e9glage de la couleur du texte\u00a0:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;\n\u00a0\nconst BlockWithColorSettings = (props) => {\n const { textColor, setTextColor } = props; \/\/ Props received from withColors\n\u00a0\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n if (textColor.class != undefined) {\n divClass = textColor.class;\n } else {\n divStyles.color = textColor.color;\n }\n }\n return(\n <Fragment>\n <InspectorControls>\n <PanelColorSettings \n title={__('Color settings')}\n colorSettings={[\n {\n value: textColor.color,\n onChange: setTextColor,\n label: __('Text color')\n },\n ]}\n \/>\n <\/InspectorControls>\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n <\/Fragment>\n );\n}\n\u00a0\nregisterBlockType('awp\/colorsettings', {\n title: __('Color Settings Demo'),\n icon: 'carrot',\n category: 'common',\n attributes: {\n textColor: {\n type: 'string'\n },\n customTextColor: {\n type: 'string'\n },\n },\n edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n save: (props) => { \n const { textColor, customTextColor } = props.attributes;\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n divClass = getColorClassName('color', textColor);\n }\n if (customTextColor != undefined) {\n divStyles.color = customTextColor;\n }\n return(\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n );\n }\n});<\/code><\/pre>\nSource d’enregistrement:
awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"Cet article explique en d\u00e9tail comment ajouter des param\u00e8tres de couleur \u00e0 votre bloc WordPress Gutenberg personnalis\u00e9, de la bonne mani\u00e8re – tout comme les blocs WordPress le font.<\/p>\n","protected":false},"author":1,"featured_media":151573,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[936,936,1110,801,801,811,811,841,841,862,862],"tags":[1167],"class_list":["post-234275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-3","category-n-a","category-php-3","category-plugins-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234275"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234275\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/151573"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\")
<\/a><\/p>\n