InspectorControls<\/code>. Lo que ponga dentro de este componente se mostrar\u00e1 en la barra lateral y no dentro del bloque\/editor en s\u00ed. B\u00e1sicamente, puede colocar el componente y su contenido en todas partes en el retorno de la edit<\/code>funci\u00f3n.<\/p>\nAparte de eso, manejar\u00edas la configuraci\u00f3n dentro de la barra lateral como si estuviera dentro del bloque. Cada configuraci\u00f3n requiere un atributo, y carga y actualiza los atributos de la misma manera.<\/p>\n
![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50856030af.png\")
<\/a><\/p>\nPrimero echemos un vistazo r\u00e1pido a c\u00f3mo se ve la barra lateral de nuestro bloque (cuando nuestro bloque est\u00e1 activo en el editor), seg\u00fan el c\u00f3digo que terminamos en el paso anterior.<\/p>\n
Todos los bloques mostrar\u00e1n de forma predeterminada el icono, el nombre y la descripci\u00f3n del bloque, y la secci\u00f3n Avanzado: colapsado. Dentro de Avanzado encontrar\u00e1 una entrada de texto para proporcionar la clase CSS para el bloque.<\/p>\n
Agregar una secci\u00f3n de barra lateral y algunas configuraciones<\/h2>\n
La barra lateral est\u00e1 dividida en secciones (denominadas paneles en el c\u00f3digo), y para un dise\u00f1o y una funcionalidad \u00f3ptimos (incluida la funcionalidad de apertura y contracci\u00f3n) debemos usar los componentes de WordPress para generar paneles correctamente.<\/p>\n
Use el componente PanelBody<\/code>para agregar una secci\u00f3n (las que puede abrir o contraer), que se encuentra en el wp.components<\/code>paquete. El componente acepta algunos accesorios, por ejemplo, para el t\u00edtulo y si el panel debe estar abierto o cerrado de forma predeterminada. Tambi\u00e9n puede proporcionar una clase personalizada, un icono y adjuntar una funci\u00f3n de evento al activador de apertura y cierre.<\/p>\nDentro PanelBody<\/code>de WordPress se recomienda usar el PanelRow<\/code>componente que act\u00faa como contenedores gen\u00e9ricos dentro del panel, para garantizar la optimizaci\u00f3n del dise\u00f1o. Este componente aplica autom\u00e1ticamente un margen y un estilo de fila flexible para su contenido. Debido al flex-direction: row<\/code>estilo " ", debe envolver cada configuraci\u00f3n dentro de una PanelRow<\/code>. O puede omitirlo por completo y asumir la responsabilidad de dise\u00f1arlo usted mismo con divs y dem\u00e1s.<\/p>\nAgregar un panel y configuraciones<\/h3>\n
Agreguemos un panel de barra lateral para nuestro bloque con algunas configuraciones adentro, solo para verlo en la pr\u00e1ctica. Agregaremos un control de alternar, una entrada de selecci\u00f3n, un selector de color y una casilla de verificaci\u00f3n, solo para obtener algo de experiencia con diferentes tipos de componentes de entrada. He dejado el contenido del bloque (con las dos RichText<\/code>s) y la save<\/code>funci\u00f3n como antes.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls } = 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 toggle: {\n type: 'boolean',\n default: true\n },\n favoriteAnimal: {\n type: 'string',\n default: 'dogs'\n },\n favoriteColor: {\n type: 'string',\n default: '#DDDDDD'\n },\n activateLasers: {\n type: 'boolean',\n default: false\n }\n },\n edit: (props) => { \n const { attributes, setAttributes } = props;\n return (<div>\n <InspectorControls>\n <PanelBody\n title=\"Most awesome settings ever\"\n initialOpen={true}\n >\n <PanelRow>\n <ToggleControl\n label=\"Toggle me\"\n checked={attributes.toggle}\n onChange={(newval) => setAttributes({ toggle: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <SelectControl\n label=\"What's your favorite animal?\"\n value={attributes.favoriteAnimal}\n options={[\n {label: \"Dogs\", value: 'dogs'},\n {label: \"Cats\", value: 'cats'},\n {label: \"Something else\", value: 'weird_one'},\n ]}\n onChange={(newval) => setAttributes({ favoriteAnimal: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <ColorPicker\n color={attributes.favoriteColor}\n onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}\n disableAlpha\n \/>\n <\/PanelRow>\n <PanelRow>\n <CheckboxControl\n label=\"Activate lasers?\"\n checked={attributes.activateLasers}\n onChange={(newval) => setAttributes({ activateLasers: newval })}\n \/>\n <\/PanelRow>\n <\/PanelBody>\n <\/InspectorControls>\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 },\n save: (props) => { \n const { attributes } = props;\n return (<div>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n <\/div>\n );\n }\n});<\/code><\/pre>\nComo siempre, empezamos por desestructurar los componentes y la funci\u00f3n que queremos usar. En el attributes<\/code>interior registerBlockType()<\/code>, definimos un atributo por entrada y hacemos coincidir el tipo; por ejemplo, el control de alternar espera un booleano y, debido a que los valores del men\u00fa desplegable son cadenas, ese atributo tambi\u00e9n debe ser una cadena de tipo.<\/p>\nEn l\u00ednea #41<\/code>comenzamos el InspectorControls<\/code>componente, y todo desde ese punto hasta l\u00ednea #80<\/code>aparecer\u00e1 en la barra lateral. El resto aparecer\u00e1 dentro del propio editor, y no he realizado ning\u00fan cambio all\u00ed.<\/p>\n![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50857e3c95.png\")
<\/a><\/p>\nEn el interior, primero creamos un panel con PanelBody<\/code>y con el accesorio initialOpen<\/code>establecido en verdadero, le decimos a Gutenberg que este panel debe abrirse de forma predeterminada. Y luego depende de nosotros qu\u00e9 agregar dentro de cada uno PanelRow<\/code>.<\/p>\nPara el componente ToggleControl<\/code>, usamos los mismos accesorios que hemos hecho antes con las entradas de texto, excepto que en lugar del accesorio value<\/code>, proporcionamos el valor del atributo dentro del accesorio checked<\/code>. Esto se aplica a cualquier entrada que espera un atributo marcado en HTML sin formato, por ejemplo, casillas de verificaci\u00f3n. Para los botones de radio, usar\u00eda el accesorio, selected<\/code>ya que esto es lo que usar\u00eda tambi\u00e9n en HTML sin formato. Tenga en cuenta que el atributo de esta entrada debe ser de tipo boolean<\/code>.<\/p>\nEn cuanto CheckboxControl<\/code>al manejo de una casilla de verificaci\u00f3n singular, funciona exactamente igual que ToggleControl<\/code>: devuelve un valor booleano, ya sea que est\u00e9 marcada o no.<\/p>\nGenera un men\u00fa desplegable de selecci\u00f3n y espera las SelectControl<\/code>posibles opciones como una matriz en el prop options<\/code>. Cada elemento debe ser un objeto con las propiedades label<\/code>y value<\/code>. Lo mismo se aplica a las casillas de verificaci\u00f3n y los botones de opci\u00f3n (RadioControl<\/code>). En circunstancias normales, probablemente generar\u00eda las opciones como una variable fuera de la salida HTML.<\/p>\nPuede notar que ColorPicker<\/code>funciona un poco diferente a los dem\u00e1s, ya que este es un componente m\u00e1s complejo y no una entrada HTML est\u00e1ndar. Proporcione el accesorio color<\/code>para el color guardado, y en lugar de onChange<\/code>(se dispara una vez al hacer clic, pero tambi\u00e9n cada vez que se cambia el valor mientras se arrastra, lo que puede resultar en muchos incendios) use onChangeComplete<\/code>. El accesorio devuelto en este evento tambi\u00e9n es un objeto en el que debemos decidir qu\u00e9 parte queremos guardar en nuestro atributo. En este ejemplo, queremos guardar el valor hexadecimal (sin alfa\/opacidad), por lo que dentro setAttributes()<\/code>extraemos la hex<\/code>propiedad del color<\/code>objeto devuelto. Esta es tambi\u00e9n la raz\u00f3n por la que agregamos la propiedaddisableAlpha<\/code>como para eliminar la interfaz de usuario del canal alfa (para controlar la opacidad), ya que no tiene sentido ofrecer esto al usuario cuando nunca guardamos el valor de opacidad.<\/p>\nCada uno de los componentes tiene un label<\/code>accesorio disponible, excepto el selector de color. Si desea generar una etiqueta o texto antes, deber\u00e1 jugar con HTML o estilo para asegurarse de que se vea bien.<\/p>\nObviamente, puede agregar tantos paneles como desee, simplemente agregue otro PanelBody<\/code>componente despu\u00e9s del anterior.<\/p>\nSi est\u00e1 interesado en obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo agregar configuraciones de bloque, tengo tutoriales separados para configuraciones y componentes m\u00e1s complejos para Inspector; C\u00f3mo agregar una selecci\u00f3n<\/a> de imagen y c\u00f3mo agregar un panel de configuraci\u00f3n de color<\/a>.<\/p>\nManejosave<\/code><\/h3>\nHe dejado la save<\/code>funci\u00f3n como estaba antes. Depende de usted y todo depende de lo que controle la configuraci\u00f3n en la salida. Ya sabes c\u00f3mo obtener los valores de cada ajuste. Como ejemplo, supongamos que el atributo booleano activateLasers<\/code>controla si se representa o no un elemento HTML personalizado. Si el atributo es true<\/code>un div, debe generarse, de lo contrario, no. Puede hacerlo con el tradicional if-check o usar el operador if<\/code>y en l\u00ednea de JSX. &&<\/code>Lea m\u00e1s sobre esto en la gu\u00eda de React para renderizado condicional<\/a>.<\/p>\nsave: (props) => { \n const { attributes } = props;\n return (<div>\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}<\/code><\/pre>\nDebido a que usamos RichText<\/code>esta salida, no ser\u00eda visible en el editor, pero aparecer\u00e1 en la interfaz.<\/p>\nEncontrar\u00e1 m\u00e1s componentes en el repositorio de wp.components<\/code> Github<\/a>. La mayor\u00eda de estas carpetas deber\u00edan proporcionarle un archivo L\u00e9ame con alguna documentaci\u00f3n sobre c\u00f3mo usarlo. Aprend\u00ed la mayor parte de esto mirando en este repositorio y tambi\u00e9n en los componentes principales de WordPress c\u00f3mo lo hicieron.<\/p>\n