registerFormatType<\/code>que nos permitir\u00e1 elegir el color de resaltado del texto seleccionado usando la <mark><\/code>etiqueta HTML sem\u00e1ntica.<\/p>\nTodo el c\u00f3digo utilizado en este tutorial se puede encontrar en el complemento gratuito<\/strong> ‘Highlighter’<\/a>.<\/p>\nVale la pena se\u00f1alar que no solo puede aplicar formatos al texto seleccionado dentro de sus bloques, sino que tambi\u00e9n puede usarlos para insertar otros objetos directamente en los bloques, como im\u00e1genes e \u00edconos en l\u00ednea.<\/p>\n
Aplicar un tipo de formato usando el complemento Highlighter.<\/p>\n
El video de arriba muestra el complemento Highlighter y nuestro tipo de formato en acci\u00f3n. Saltemos a ello.<\/p>\n
requisitos previos<\/h2>\n\n- Lea la gu\u00eda Creaci\u00f3n de un complemento para el editor de bloques de WordPress (Gutenberg)<\/a> para que pueda comenzar a crear el complemento.<\/li>\n
- Opcionalmente , descargue el complemento gratuito ‘Highlighter’<\/a> y mire el archivo
\/src\/formats\/highlight.js<\/code><\/li>\n<\/ul>\nConfigurar los archivos del complemento<\/h2>\n
Si ha seguido el requisito previo y la gu\u00eda del complemento, debemos seguir adelante y eliminar un mont\u00f3n de esos archivos.<\/p>\n
\n- En la carpeta src, elimine todo excepto los archivos
index.js<\/code>y .style.scss<\/code><\/li>\n- Elimine el contenido de
index.js<\/code>y por style.scss<\/code>completo.<\/li>\n- En la
\/build<\/code>carpeta elimina todos los archivos. Los regeneraremos m\u00e1s tarde.<\/li>\n- quitar
block.json<\/code>_ No estamos construyendo un bloque hoy, as\u00ed que no necesitamos esto.<\/li>\n<\/ul>\nPoner en cola los scripts<\/h3>\n
En el archivo principal del complemento (wholesome-plugin.php<\/code>si ha seguido el tutorial anterior al pie de la letra), agregue el siguiente c\u00f3digo para poner en cola JavaScript y CSS para su complemento.<\/p>\n<?php\n\nfunction setup(): void {\n\n load_plugin_textdomain( 'wholesome-highlighter', false, ROOT_DIR. 'languages' );\n\n add_action( 'enqueue_block_editor_assets', __NAMESPACE__. 'enqueue_block_editor_assets', 10 );\n\n add_action( 'enqueue_block_assets', __NAMESPACE__. 'enqueue_block_styles', 10 );\n}\n\nfunction enqueue_block_editor_assets(): void {\n\n $asset_path = ROOT_DIR. '\/build\/index.asset.php';\n\n if (! file_exists( $asset_path)) {\n throw new Error(\n esc_html__( 'You need to run `npm start` or `npm run build` in the root of the plugin \"wholesome-highlighter\" first.', 'wholesome-highlighter') );\n }\n\n $scripts = '\/build\/index.js';\n $assets = include $asset_path;\n\n wp_enqueue_script(\n PLUGIN_SLUG. '-block-scripts',\n plugins_url( $scripts, ROOT_FILE ),\n $assets['dependencies'],\n $assets['version'],\n false\n );\n\n wp_set_script_translations(\n PLUGIN_SLUG. '-block-scripts',\n 'wholesome-highlighter',\n ROOT_DIR. 'languages'\n );\n}\nadd_action( 'plugins_loaded', __NAMESPACE__. 'setup' );\n\nfunction enqueue_block_styles(): void {\n\n $styles = '\/build\/style-index.css';\n\n wp_enqueue_style(\n PLUGIN_SLUG. '-block-styles',\n plugins_url( $styles, ROOT_FILE ),\n array(),\n filemtime( ROOT_DIR. $styles) );\n}\n\nadd_action( 'plugins_loaded', __NAMESPACE__. 'setup' );\n<\/code><\/pre>\n\n- Registrar el tipo de formato<\/li>\n<\/ol>\n
\nAbra su \/src\/index.js<\/code>archivo y agregue el siguiente c\u00f3digo.<\/p>\n\nimport { RichTextToolbarButton } from '@wordpress\/block-editor';\nimport { __ } from '@wordpress\/i18n';\n\nconst HighlighterButton = ({ isActive, onChange, value}) => {\n return (<RichTextToolbarButton\n icon='edit'\n isActive={ isActive }\n title={ __( 'Highlight', 'wholesome-highlighter') }\n \/>) };\n<\/code><\/pre>\nEsto crea nuestro bot\u00f3n resaltador que aparecer\u00e1 en el men\u00fa de formato. Ahora usaremos registerFormatType<\/code>para registrar el formato.<\/p>\nPrimero, necesitamos editar nuestras importaciones para importar tambi\u00e9n registerFormatType<\/code>desde @wordpress\/rich-text<\/code>.<\/p>\nimport { registerFormatType, toggleFormat } from '@wordpress\/rich-text';\n<\/code><\/pre>\nLuego registre el formato agregando el nombre del formato (wholesome\/highlighter<\/code>) y pasando un objeto con las siguientes propiedades. toggleFormat<\/code>se usar\u00e1 m\u00e1s tarde para nuestro evento de clic.<\/p>\n\nclassName<\/code>: El nombre de la clase que se agregar\u00e1 a la etiqueta que rodea el texto resaltado.<\/li>\nedit<\/code>: El bot\u00f3n que registramos previamente.<\/li>\ntagName<\/code>: El tipo de etiqueta que se aplicar\u00e1 al texto resaltado. En este caso, estamos usando <mark><\/code>el marcado sem\u00e1nticamente correcto para resaltar un texto.<\/li>\ntitle<\/code>: El t\u00edtulo del formato.<\/li>\n<\/ul>\n\nregisterFormatType(\n 'wholesome\/highlighter', {\n className: 'wholesome-highlight',\n edit: HighlighterButton,\n tagName: 'mark',\n title: __( 'Highlight', 'wholesome-highlighter' ),\n }\n);\n<\/code><\/pre>\nManejar el clic<\/h3>\n
Ahora que hemos agregado el bot\u00f3n al men\u00fa de formato, todo lo que tenemos que hacer es manejar el evento de clic.<\/p>\n
![\"Formatea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168405-61e7cb11d77e2.png\")
<\/a><\/p>\nEdite RichTextToolbarButton<\/code>y agregue el onClick<\/code>evento.<\/p>\n<RichTextToolbarButton\n icon='edit'\n isActive={ isActive }\n onClick={() => {\n onChange(\n toggleFormat( value, {\n type: 'wholesome\/highlighter',\n }) );\n } }\n title={ __( 'Highlight', 'wholesome-highlighter') }\n\/>\n<\/code><\/pre>\nEn el disparador llamamos a toggleFormat<\/code>pasar el valor (que es el texto resaltado) y pasamos un objeto con la type<\/code>propiedad establecida en el nombre de nuestro formato.<\/p>\nAhora, cuando se hace clic inicialmente en el bot\u00f3n, se aplicar\u00e1 la <mark><\/code>etiqueta HTML al texto seleccionado y, cuando se vuelva a hacer clic, cambiar\u00e1 el formato al eliminarlo nuevamente.<\/p>\nPara ver el c\u00f3digo en su totalidad y ver las \u00faltimas actualizaciones , eche un vistazo al \/src\/formats\/highlight.js<\/code>archivo completo dentro del complemento Highlighter<\/a>.<\/p>\nEl c\u00f3digo anterior registrar\u00e1 el bloque para todos los tipos de bloque. Sin embargo, si desea que el bloque solo aparezca en ciertos tipos de bloques, tambi\u00e9n puede hacerlo.<\/p>\n
Para hacer esto, necesitaremos usar el componente de orden superior ifCondition y useSelect para determinar el tipo de bloque que hemos seleccionado.<\/p>\n
Para hacer esto, agregue las siguientes importaciones en la parte superior de su archivo.<\/p>\n
import { ifCondition } from '@wordpress\/compose';\nimport { useSelect } from '@wordpress\/data';\n<\/code><\/pre>\nEncima del registerFormatType<\/code>bloque de c\u00f3digo, agregue el siguiente bloque de c\u00f3digo de redacci\u00f3n.<\/p>\n\nvar HighlighterButtonContainer = ifCondition( (props) => {\n const selectedBlock = useSelect( (select) => select('core\/block-editor').getSelectedBlock() );\n return (selectedBlock &&\n selectedBlock.name === 'core\/paragraph'\n ); \n} )( HighlighterButton );\n<\/code><\/pre>\nComo puede ver en el c\u00f3digo, si el bloque seleccionado es core\/paragraph<\/code>el componente de orden superior ifCondition<\/code>, devolver\u00e1 verdadero y, por lo tanto, permitir\u00e1 que el bot\u00f3n se procese.<\/p>\nTodo lo que tenemos que hacer ahora es pasar el Contenedor que acabamos de crear al registerBlockType<\/code>bloque de c\u00f3digo y nuestro c\u00f3digo estar\u00e1 terminado.<\/p>\n\nregisterFormatType(\n 'wholesome\/highlighter', {\n className: 'wholesome-highlight',\n edit: HighlighterButtonContainer,\n tagName: 'mark',\n title: __( 'Highlight', 'wholesome-highlighter' ),\n }\n);\n<\/code><\/pre>\nPara ver el c\u00f3digo completo , eche un vistazo al \/src\/formats\/highlight-paragraph.js<\/code>archivo en el complemento Highlighter<\/a>.<\/p>\n\n- Lleve las cosas m\u00e1s lejos agregando atributos personalizados a su formato personalizado con una ventana emergente modal<\/a>.<\/li>\n
- Agregue una barra lateral de bloque con InspectorControls<\/a><\/li>\n
- Mire la creaci\u00f3n de una p\u00e1gina de opciones y configuraciones usando componentes de Gutenberg<\/a><\/li>\n<\/ul>\n