![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\")
<\/a><\/p>\nAhora est\u00e1 actualizando con \u00e9xito nuestros atributos al elegir colores. Puede ver que recuerda su elecci\u00f3n de color al guardar la publicaci\u00f3n.<\/p>\n
Sin embargo, no sucede nada visualmente cuando cambias de color. La elecci\u00f3n de color se almacena en los atributos, pero no se produce ning\u00fan cambio de color en el editor, ni al obtener una vista previa de la publicaci\u00f3n. Esto se debe a que necesitamos agregar c\u00f3digo para las clases y estilos del bloque. Necesitamos hacer esto tanto para la edit<\/code>funci\u00f3n (que es para el editor) como para la save<\/code>funci\u00f3n (interfaz). Ese es el siguiente paso.<\/p>\nManejo de clases y estilos en l\u00ednea enedit<\/code><\/h3>\nNecesitamos construir la clase de nodo y los atributos de estilo del bloque de acuerdo con la configuraci\u00f3n de color elegida. Afortunadamente withColors<\/code>, conseguimos algo de automatizaci\u00f3n en esto. Recuerda que props.textColor<\/code>es un objeto que contiene toda la informaci\u00f3n que necesitamos, incluido el nombre de la clase.<\/p>\nPodr\u00edamos hacer algo como esto:<\/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>\nEn l\u00ednea #20<\/code>, aplicamos la clase cr\u00edtica y el estilo en l\u00ednea al nodo ra\u00edz de nuestro bloque. Antes de eso, construimos la clase y el atributo de estilo en l\u00ednea al verificar el props.textColor<\/code>objeto.<\/p>\nDespu\u00e9s de este cambio, su bloque personalizado ahora deber\u00eda ser completamente funcional en el editor. Siempre que cambies de color, el bloque cambiar\u00e1 el color del texto. \u00a1Impresionante! El \u00faltimo paso es hacer esto tambi\u00e9n para la save<\/code>funci\u00f3n, de modo que tambi\u00e9n obtengamos estas clases y estilos en la interfaz.<\/p>\nManejo de clases y estilos en l\u00ednea ensave<\/code><\/h3>\nEl concepto de construir la clase y los estilos en l\u00ednea y aplicarlos al nodo ra\u00edz es el mismo save<\/code>que en edit<\/code>. Pero hay una diferencia crucial. En save<\/code>no tenemos los accesorios proporcionados por withColors<\/code>. Y no podemos agregar componentes de orden superior a la save<\/code>funci\u00f3n. Entonces, en la save<\/code>funci\u00f3n, toda la informaci\u00f3n que tenemos son los atributos.<\/p>\nEs una buena regla general evitar codificar nombres de clase "has-". \u00bfQu\u00e9 pasa si WordPress decide cambiar esta regla en el futuro? Afortunadamente, tenemos una funci\u00f3n que puede ayudarnos a generar los nombres de clase adecuados para nosotros: getColorClassName()<\/code>.<\/p>\nAntes de que olvidemos, vamos a desestructurarlo. Tambi\u00e9n est\u00e1 en el wp.blockEditor<\/code>paquete.<\/p>\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;<\/code><\/pre>\nEl uso de la getColorClassName()<\/code>funci\u00f3n requiere dos par\u00e1metros. Primero una cadena para la regla CSS. Debido a que nuestra configuraci\u00f3n de color es para el color del texto, proporcionamos ‘ color<\/code>‘. Esto le dice a la funci\u00f3n que debe devolver un nombre de clase de "tiene-algo-color" y no "tiene-algo-color-de-fondo", por ejemplo. Como segundo par\u00e1metro necesitamos proporcionar el valor del atributo.<\/p>\nEl atributo de estilo se crea simplemente configurando "color" en el valor del atributo customTextColor<\/code>, si est\u00e1 definido.<\/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>\nY, por supuesto, no olvide aplicar la clase y el estilo en el nodo ra\u00edz de su bloque; como en linea #12<\/code>.<\/p>\nPD: si est\u00e1 probando su bloque en el editor mientras escribe este c\u00f3digo, ahora obtendr\u00e1 un error de bloque. Esto sucede porque ahora hemos cambiado la salida de la save<\/code>funci\u00f3n y todo lo que haya guardado anteriormente est\u00e1 en conflicto. Deber\u00e1 eliminar el bloque y volver a agregarlo.<\/p>\nDespu\u00e9s de este cambio, su bloque ahora tambi\u00e9n deber\u00eda aplicar correctamente el color de texto elegido en la interfaz.<\/p>\n
\u00a1Y eso es! Ahora ha implementado con \u00e9xito la configuraci\u00f3n de color en su bloque. Si est\u00e1 interesado en agregar varias configuraciones de color (no solo el color del texto), siga leyendo.<\/p>\n
Una nota sobre la configuraci\u00f3n de varios colores<\/h2>\n
A estas alturas, deber\u00eda poder implementar m\u00faltiples configuraciones de color. Es posible que desee agregar configuraciones para el color de fondo, el color del texto, el color del borde o cualquier otra cosa para su bloque. En esta secci\u00f3n, har\u00e9 una descripci\u00f3n general r\u00e1pida de lo que debemos hacer para implementar m\u00faltiples configuraciones de color.<\/p>\n
Supongamos que tambi\u00e9n quiero agregar color de fondo a mi bloque.<\/p>\n
Primero necesito definir un nuevo atributo llamado creativamente backgroundColor<\/code>. Defino otro atributo customBackgroundColor<\/code>tambi\u00e9n.<\/p>\nEn la edit<\/code>funci\u00f3n cambio el objeto provisto withColors<\/code>como tal:<\/p>\nwithColors({textColor: 'color', backgroundColor: 'background-color'})<\/code><\/pre>\nEsto indica withColors<\/code>que mi textColor<\/code>atributo es para la regla CSS " color<\/code>" (para el color del texto), y el atributo backgroundColor<\/code>es para la regla CSS " background-color<\/code>". withColors<\/code>reconocer\u00e1 y actualizar\u00e1 autom\u00e1ticamente los atributos y tambi\u00e9n customTextColor<\/code>.customBackgroundColor<\/code><\/p>\nEn el PanelColorSettings<\/code>componente, proporciono otro objeto a la matriz para el accesorio colorSettings<\/code>. Al igual que:<\/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>\nCon esto, deber\u00eda obtener dos configuraciones de color separadas dentro del cuadro Inspector para la configuraci\u00f3n de color.<\/p>\n
El \u00faltimo paso es construir los nombres y estilos de clase apropiados en ambos edit<\/code>y save<\/code>. Este es un paso bastante simple, ya que solo se trata de construir una cadena o un objeto de estilo correctamente. Recuerde que el nombre de su clase debe admitir varias clases de color (por ejemplo, si se eligieron tanto el color del texto como el color de fondo). Simplemente agregue un espacio entre cada nombre de clase.<\/p>\nPD: si necesita manejar muchos nombres de clase para su bloque, puede beneficiarse instalando el classnames<\/code>paquete. Pr\u00e1cticamente todos los componentes de Gutenberg utilizan esta biblioteca para combinar nombres de clases m\u00e1s f\u00e1cilmente.<\/p>\nConclusi\u00f3n y c\u00f3digo completo.<\/h2>\n
Ahora deber\u00eda haber aprendido c\u00f3mo implementar configuraciones de color en su bloque personalizado. \u00a1Espero que esto te haya servido de algo! Tuve que agregar esta caracter\u00edstica a mi proyecto, y realmente no pude encontrar ninguna informaci\u00f3n o buena documentaci\u00f3n. As\u00ed que este es el resultado de consolidar todo lo que aprend\u00ed sobre este tema, despu\u00e9s de mucho ensayo y error.<\/p>\n
Aqu\u00ed est\u00e1 el c\u00f3digo final, en conjunto, para el bloque personalizado de ejemplo con configuraci\u00f3n de color de texto:<\/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>\nFuente de grabaci\u00f3n:
awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"Esta publicaci\u00f3n profundiza en c\u00f3mo agregar configuraciones de color a su bloque personalizado de WordPress Gutenberg, de la manera correcta, tal como lo hacen los bloques de WordPress.<\/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":[810,935,935,1110,800,800,810,840,840,861,861],"tags":[1172],"class_list":["post-233911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-complementos","category-gutenberg-2","category-n-a","category-php-2","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233911"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233911\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/151573"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\")
<\/a><\/p>\n