BlockControls<\/code>(desde wp.blockEditor<\/code>). Dentro de este componente podemos agregar cualquiera de los componentes de WordPress para las barras de herramientas est\u00e1ndar que conocemos de otros bloques (por ejemplo, alineaci\u00f3n) o podemos agregar nuestra propia barra de herramientas.<\/p>\nDe forma predeterminada, un bloque tendr\u00e1 una barra de herramientas que contiene solo el icono del bloque (para la funcionalidad Transformar a) y el men\u00fa del bloque para, por ejemplo, eliminar el bloque. No podemos eliminarlos, pero podemos agregar nuestros propios botones y barras de herramientas en el medio.<\/p>\n
Sin embargo, algunos componentes de WordPress agregar\u00e1n por s\u00ed mismos sus propias barras de herramientas. A partir de ahora, nuestro bloque muestra una barra de herramientas para formatear texto que proviene del RichText<\/code>componente que agregamos.<\/p>\n![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7785e80.png\")
<\/a><\/p>\nAgregar una barra de herramientas de alineaci\u00f3n de bloques<\/h2>\n
La barra de herramientas de alineaci\u00f3n de bloques existe en pr\u00e1cticamente todos los tipos de bloques de WordPress, as\u00ed que agreguemos eso a nuestro bloque tambi\u00e9n. Detr\u00e1s de escena existe un componente BlockAlignmentToolbar<\/code>que podr\u00edamos agregar, sin embargo recomiendo no hacerlo. Usarlo requiere que manejes manualmente las clases para la alineaci\u00f3n de bloques y te asegures de que el bloque extienda su ancho en el editor al elegir "Ancho ancho" o "Ancho completo". Afortunadamente, WordPress ha hecho que sea muy f\u00e1cil de implementar, completamente autom\u00e1tico.<\/p>\nPD: El tema activo debe haber agregado activamente soporte de tema para estas dos alineaciones de bloques. Puede agregar soporte para estos al tener add_theme_support('align-wide')<\/code>en el after_setup_theme<\/code>gancho.<\/p>\nPodemos agregar una nueva propiedad a la configuraci\u00f3n de nuestro objeto en registerBlockType()<\/code>, llamada supports<\/code>. Hay algunas otras caracter\u00edsticas, pero lo que nos interesa aqu\u00ed es align<\/code>. Podemos configurar align<\/code>para true<\/code>agregar todas las alineaciones posibles, o podemos proporcionar una matriz de alineaciones precisas que permitimos para nuestro bloque.<\/p>\n...\nregisterBlockType('awp\/firstblock', {\n ...\n supports: {\n align: true\n },\n edit: (props) => {\n ...\n});<\/code><\/pre>\nLo que nos da esto en el editor:<\/p>\n
![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7967acd.png\")
<\/a><\/p>\nSi desea, por ejemplo, evitar que alguien use Wide Width o Full Width, puede proporcionar una matriz y excluir esos dos. Los nombres de las alineaciones de bloques son los siguientes: left<\/code>, right<\/code>, center<\/code>, wide<\/code>y full<\/code>.<\/p>\nsupports: {\n align: ['left', 'right', 'center']\n},<\/code><\/pre>\n\u00bfNecesita alineaci\u00f3n predeterminada?<\/h3>\n
De forma predeterminada, el bloque no tiene alineaci\u00f3n de bloque. Si lo desea, puede establecer un valor predeterminado creando un atributo con la clave align<\/code>, establezca el tipo en string<\/code>y establezca el valor predeterminado all\u00ed. WordPress conectar\u00e1 autom\u00e1ticamente este atributo a la alineaci\u00f3n del bloque.<\/p>\nattributes: {\n align: {\n type: 'string',\n default: 'center'\n }\n},\nsupports: {\n align: true\n},<\/code><\/pre>\nCon esto cada vez que se crea un nuevo bloque de nuestro tipo, se centra la alineaci\u00f3n del bloque por defecto.<\/p>\n
\u00bfDesorden de estilo de alineaci\u00f3n de bloques? no es nuestra culpa<\/h3>\n
Nota:<\/strong> El estilo de bloque predeterminado de WordPress arruinar\u00e1 el flujo del contenido de su publicaci\u00f3n cuando use la alineaci\u00f3n de bloque izquierda y derecha. Lo mismo sucede con otros tipos de bloques de WordPress tambi\u00e9n y no es un problema exclusivo de nuestro bloque. Esto se produce al agregar float al elemento, lo que colapsa el elemento principal. Cr\u00e9ame, he intentado construir el bloque para evitar este problema. Lo \u00fanico que he encontrado que funciona correctamente sin alterar las otras alineaciones de bloques es agregar estilo al editor y ajustar el estilo flotante.<\/p>\n![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7baa1f0.png\")
<\/a><\/p>\nDe todos modos, WordPress ha hecho que sea bastante f\u00e1cil implementar la alineaci\u00f3n de bloques. Ahora veamos otras barras de herramientas que podemos usar.<\/p>\n
Agregar una barra de herramientas de alineaci\u00f3n de texto<\/h2>\n
Si prefiere la barra de herramientas para la alineaci\u00f3n del texto, puede hacerlo en lugar de la alineaci\u00f3n de bloques: en esta barra de herramientas solo tenemos alineaci\u00f3n a la izquierda, al centro y a la derecha. De hecho, puede usar la alineaci\u00f3n de texto y la alineaci\u00f3n de bloques juntas; funcionan por separado. Para no confundir a los usuarios, por ejemplo, solo podr\u00eda agregar soporte para la alineaci\u00f3n de bloques de ancho y ancho completo, y usar la barra de herramientas de alineaci\u00f3n de texto para controlar la alineaci\u00f3n a la izquierda, al centro o a la derecha. Al hacer esto, evita el problema mencionado anteriormente<\/strong> con el flujo de bloques en el editor. Depende de usted c\u00f3mo quiere que funcione su bloque.<\/p>\nWordPress tiene un componente para generar la barra de herramientas de alineaci\u00f3n de texto, sin embargo, no tiene un manejo autom\u00e1tico para agregar las clases correctas para alinear el contenido, tanto dentro del editor como en la interfaz (\u00a1al menos hasta donde he encontrado!). Necesitamos agregar y actualizar manualmente un atributo para la alineaci\u00f3n del texto.<\/p>\n
Agregar BlockControls<\/code>yAlignmentToolbar<\/code><\/h3>\nAgreguemos finalmente BlockControls<\/code>a nuestra edit<\/code>funci\u00f3n para nuestra salida en la barra de herramientas. El componente para la alineaci\u00f3n del texto es AlignmentToolbar<\/code>del wp.blockEditor<\/code>paquete.<\/p>\nconst { 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>\nTenga en cuenta que exclu\u00ed el contenido de todo lo que creamos en InspectorControls<\/code>el paso anterior para acortar el c\u00f3digo.<\/p>\nEntre l\u00edneas #37<\/code>se #42<\/code>encuentra todo el contenido de nuestra barra de herramientas (aparte de la alineaci\u00f3n de bloques agregada autom\u00e1ticamente por la supports<\/code>propiedad y el formato de texto agregado por nuestros RichText<\/code>componentes). Usamos BlockControls<\/code>para acceder a la barra de herramientas, y dentro a\u00f1adimos el AlignmentToolbar<\/code>componente.<\/p>\nComo hemos hecho varias veces con las entradas, proporcionamos un value<\/code>accesorio para mostrar el valor guardado y un onChange<\/code>accesorio para actualizar nuestro atributo al AlignmentToolbar<\/code>componente. El atributo que usaremos para almacenar la alineaci\u00f3n de texto elegida se define como textAlignment<\/code>y debe ser de tipo string<\/code>. Como de costumbre, puede proporcionar un default<\/code>para asegurarse de que los bloques reci\u00e9n creados obtengan una alineaci\u00f3n predeterminada.<\/p>\nPara asegurarnos de que el bloque genere la informaci\u00f3n de alineaci\u00f3n y tambi\u00e9n tenga el estilo correcto (para que realmente veamos el cambio de alineaci\u00f3n del texto) tanto en el editor como en la interfaz, debemos configurar manualmente la clase correcta en el div de envoltura. En ambos edit<\/code>y save<\/code>defino una variable que verifica si attributes.textAlignment<\/code>est\u00e1 configurada. Si es as\u00ed, construyo el nombre de la clase siguiendo los est\u00e1ndares de WordPress para alineaciones de texto, que es "has-text-align-(left|center|right)". Con esta clase, WordPress aplicar\u00e1 su estilo a nuestro bloque y se asegurar\u00e1 de que nuestro bloque se alinee visualmente correctamente, tanto en el editor como en la interfaz.<\/p>\nAgregar barras de herramientas personalizadas con nuestros propios botones<\/h3>\n
Tambi\u00e9n puede agregar sus propios botones en la barra de herramientas para hacer lo que desee al hacer clic en ellos. Para hacer esto, querr\u00e1 agregar el componente Toolbar<\/code>y dentro de este elemento agregar un IconButton<\/code>(ambos en el wp.components<\/code>paquete). Todo dentro BlockControls<\/code>, por supuesto.<\/p>\nNota<\/strong>: Seg\u00fan WordPress, el registro de cambios de Gutenberg IconButton<\/code>est\u00e1 en desuso a favor del uso de Button<\/code>. Sin embargo, parece que no puedo hacer que aparezca un \u00edcono usando el Button<\/code>componente sin importar lo que haga, aunque se supone que lo admite. As\u00ed que a partir de ahora usar\u00e9 IconButton<\/code>.<\/p>\nObviamente, puede combinar m\u00faltiples componentes de la barra de herramientas dentro de BlockControls<\/code>. Con el siguiente c\u00f3digo, agregamos la barra de herramientas de alineaci\u00f3n de texto y nuestra barra de herramientas personalizada con un bot\u00f3n despu\u00e9s.<\/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