register_block_pattern<\/code>usted puede crear muy r\u00e1pidamente un patr\u00f3n de bloque para usted o sus clientes.<\/p>\nrequisitos previos<\/h2>\n\n- Instalaci\u00f3n de WordPress<\/li>\n
- Editor de c\u00f3digo<\/li>\n<\/ul>\n
Crea tu patr\u00f3n de bloques<\/h2>\n
Usted crea patrones de bloques a partir de los bloques que ha registrado en su sitio. Estos pueden ser bloques principales o cualquier cantidad de bloques personalizados o de terceros.<\/p>\n
Comience usando el editor de WordPress para crear un dise\u00f1o de bloque. Puede usar la configuraci\u00f3n para hacer esto tan complejo o tan simple como desee.<\/p>\n
En este ejemplo, lo mantendremos simple y simplemente crearemos un patr\u00f3n de bloque que se estructura de la siguiente manera:<\/p>\n
\n- Bloque de grupo\n
\n- B\u00f3veda<\/li>\n
- P\u00e1rrafo<\/li>\n
- columnas\n
\n- columna 1\n
\n- B\u00f3veda<\/li>\n
- P\u00e1rrafo<\/li>\n<\/ul>\n<\/li>\n
- columna 2\n
\n- B\u00f3veda<\/li>\n
- P\u00e1rrafo<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Una vez que haya creado su patr\u00f3n de bloques, simplemente copie el c\u00f3digo que se gener\u00f3 para usted.<\/p>\n
Copie el c\u00f3digo de patr\u00f3n de bloque<\/p>\n
Para hacer esto, vaya a los tres puntos en la parte superior derecha del editor (etiquetados como Opciones) y seleccione ‘Editor de c\u00f3digo’. Esto mostrar\u00e1 el HTML detr\u00e1s del patr\u00f3n de bloque que acaba de crear.<\/p>\n
Copie este c\u00f3digo en su portapapeles.<\/p>\n
Registre el patr\u00f3n de bloque<\/h2>\n
Pegue este c\u00f3digo del editor de bloques en su editor de c\u00f3digo. Si no est\u00e1 seguro de d\u00f3nde, puede usar el functions.php<\/code>de su tema.<\/p>\nAseg\u00farese de pasarlo a una variable colocando comillas simples ('<\/code>) alrededor del texto pegado, as\u00ed:<\/p>\n$block_pattern_content = '\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<h2>Example Block Pattern<\/h2>\n\n<p>Lorem ipsum dolor sit amet labore cras venenatis.<\/p>\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<h3>Sub Heading 1<\/h3>\n\n<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.<\/p>\n<\/div>\n\n<div class=\"wp-block-column\">\n<h3>Sub Heading 2<\/h3>\n\n<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n';\n<\/code><\/pre>\nEs posible que deba escapar algunos caracteres, seg\u00fan la complejidad de su patr\u00f3n de bloque.<\/p>\n
A continuaci\u00f3n, debemos pasar esto a la register_block_pattern<\/code>funci\u00f3n:<\/p>\nregister_block_pattern(\n 'wholesomecode\/example-block-pattern',\n [\n 'categories' => [\n 'text',\n ],\n 'content' => $block_pattern_content,\n 'description' => 'An example block pattern',\n 'keywords' => 'example',\n 'title' => 'Example Block Pattern',\n 'viewportWidth' => 800,\n ],\n);\n<\/code><\/pre>\nEso es todo, el patr\u00f3n de bloque est\u00e1 registrado.<\/p>\n
rompiendoregister_block_pattern<\/code><\/h3>\n\n- Espacio de nombres<\/strong>: (
wholesomecode\/example-block-pattern<\/code>) es el espacio de nombres del patr\u00f3n de bloque. Aseg\u00farese de que esto sea \u00fanico para su patr\u00f3n de bloques. Si alguna vez necesitamos cancelar el registro del patr\u00f3n de bloque, esta es la cadena que necesitaremos.<\/li>\n- Categor\u00edas<\/strong>: esta es la categor\u00eda de patr\u00f3n de bloque en la que aparecer\u00e1 el patr\u00f3n de bloque cuando insertemos nuestro patr\u00f3n de bloque. Tambi\u00e9n podemos a\u00f1adir nuestras propias categor\u00edas<\/a>.<\/li>\n
- Contenido<\/strong>: este es HTML que genera el patr\u00f3n de bloque. Este ejemplo usa la variable que creamos desde el editor.<\/li>\n
- Descripci\u00f3n<\/strong>: una descripci\u00f3n del patr\u00f3n de bloque.<\/li>\n
- Palabras clave<\/strong>: palabras clave que se pueden usar para buscar el patr\u00f3n de bloque.<\/li>\n
- T\u00edtulo<\/strong>: el t\u00edtulo del patr\u00f3n de bloque.<\/li>\n
- Ancho de ventana gr\u00e1fica<\/strong>: la ventana gr\u00e1fica del patr\u00f3n de bloque, utilizada para el \u00e1rea de vista previa.<\/li>\n<\/ul>\n
Insertar el patr\u00f3n de bloque<\/h2>\n
Para insertar el patr\u00f3n de bloque, simplemente use el signo m\u00e1s en la parte superior izquierda del editor y seleccione patrones de bloque.<\/p>\n
Seleccione la categor\u00eda en la que registr\u00f3 su patr\u00f3n y deber\u00eda aparecer.<\/p>\n
Inserci\u00f3n del patr\u00f3n de bloques<\/p>\n
Alternativamente, puede buscar por las palabras clave que registr\u00f3.<\/p>\n
Para registrar una categor\u00eda de bloque, simplemente use la register_block_pattern_category<\/code>funci\u00f3n.<\/p>\nregister_block_pattern_category(\n 'my-client',\n [\n 'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),\n ]\n);\n<\/code><\/pre>\nLuego puede usar la categor\u00eda que acaba de registrar en su c\u00f3digo de patr\u00f3n de bloque, as\u00ed:<\/p>\n
register_block_pattern(\n 'wholesomecode\/example-block-pattern',\n [\n 'categories' => [\n 'my-client',\n ],\n 'content' => $block_pattern_content,\n 'description' => 'An example block pattern',\n 'keywords' => 'example',\n 'title' => 'Example Block Pattern',\n 'viewportWidth' => 800,\n ],\n);\n<\/code><\/pre>\nAhora, cuando encuentre su patr\u00f3n de bloque, se ubicar\u00e1 en su categor\u00eda personalizada:<\/p>\n
![\"Registre](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168978-61e7f9e9b9076.png\")
Categor\u00eda de patr\u00f3n de bloque personalizado<\/p>\n
Ahora puede agrupar todos los patrones de bloques personalizados que acaba de crear para su cliente en un solo lugar.<\/p>\n