Gutenberg es el editor predeterminado de WordPress. Este editor permite crear y diseñar contenido utilizando bloques discretos de texto, imágenes, vídeo y otros elementos del sitio web a través de una interfaz de arrastrar y soltar. Este enfoque mejora la flexibilidad y las capacidades de diseño de WordPress.
Obtener contenido de Gutenberg con la API REST
Para interactuar mediante programación con un sitio de WordPress y recuperar contenido estructurado en bloques de Gutenberg, puedes utilizar la API REST de WordPress o el plugin WPGraphQL. Estas herramientas te permiten recuperar contenido de WordPress en formato JSON.
Para habilitar el acceso a datos JSON a través de la API REST, ajuste la configuración del permalink de WordPress lejos de "Plain". De ese modo, se podrá acceder a la API a través de una URL con un formato específico, como se muestra a continuación:
https://yoursite.com/wp-json/wp/v2Enviando peticiones API a esta URL, puede recuperar mediante programación diversa información y realizar acciones en su sitio WordPress. Por ejemplo, puede obtener una lista de entradas enviando una solicitud GET a la siguiente dirección:
https://yoursite.com/wp-json/wp/v2/postsSe devuelve un objeto JSON que contiene información sobre la entrada en el sitio de WordPress, incluido el título, el contenido, los detalles del autor, etc.
Conversión de bloques Gutenberg en HTML
Al recuperar publicaciones de un sitio de WordPress mediante el editor Gutenberg, el contenido almacenado en la base de datos puede utilizar una mezcla de metadatos HTML y JSON para describir varios tipos de bloques, como citas y galerías:
<!-- wp:quote {"className":"inspirational-quote","style":{"typography":{"fontSize":"large"}}} -->
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>"El viaje de mil millas comienza con un paso".</p><cite>Lao Tzu</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:gallery {"ids":[34,35],"columns":2,"linkTo":"none","sizeSlug":"medium","className":"custom-gallery"} -->
<ul class="wp-block-gallery columns-2 is-cropped custom-gallery"><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="Una vista impresionante de las montañas" class="wp-image-34"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Serena orilla del lago al amanecer" class="wp-image-35"/></figure></li></ul>
<!-- /wp:gallery -->Este fragmento muestra dos bloques de Gutenberg: una cita y una galería. Cada bloque tiene metadatos JSON encapsulados en comentarios HTML. Los metadatos definen atributos como nombres de clases, estilos y otras configuraciones relacionadas con la presentación de los bloques.
Cuando obtiene estos bloques a través de la API REST de WordPress o WPGraphQL, WordPress los procesa y convierte la combinación de metadatos HTML y JSON en elementos HTML completamente renderizados que puede integrar directamente en sus páginas. A continuación se muestra el HTML convertido del bloque anterior:
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>"El viaje de mil millas comienza con un paso".</p><cite>Lao Tzu</cite></blockquote>
<ul class="wp-block-gallery columns-2 is-cropped custom-gallery">
<li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="Una vista impresionante de las montañas" class="wp-image-34" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
<li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Serena orilla del lago al amanecer" class="wp-image-35" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
</ul>Para los desarrolladores que crean aplicaciones desacopladas o que utilizan marcos de JavaScript como Next.js, esto proporciona una forma sencilla de mostrar contenido inyectando HTML directamente en la página mediante atributosdangerouslySetInnerHTMLpara presentar los marcadores.
<div dangerouslysetinnerhtml="{{" __html: <raw_html_string> }} />
Parse Gutenberg bloque de contenido en Next.js sitio estático
Extrajimos el contenido de WordPress en un proyecto Next.js y, a continuación, analizamos los bloques de Gutenberg en HTML.
1. Primero configure una función para obtener entradas del sitio de WordPress. Abra la función src/page.js y sustituya su contenido por el siguiente fragmento de código:
const getWpPosts = async () => {
const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts');
const posts = await res.json();
const posts = await await res.json(); return posts;
};Esta función asíncrona realiza una petición a la API REST de WordPress. Obtiene todas las publicaciones disponibles en su sitio y las devuelve como una matriz.
2. A continuación, vamos a utilizar la entrada obtenida en un simple componente de página Next.js registrando la entrada en la consola y mostrando el saludo básico:
const page = async () => {
const posts = await getWpPosts(); console.log(posts);
console.log(posts);
return (
<div>
<h1>Hola Mundo</h1>
</div>
);
}.
exportar página por defecto.Al ejecutar un proyecto connpm run devMuestra un mensaje "Hola Mundo" y registra el mensaje obtenido en el terminal.
[
{
"_links" : {
"acerca de" : [...] ,
"autor" : [...] , "colección" : [...] , "autor" : [...]
"colección" : [...] , "curies" : [...] , "collection" : [...]
"curies" : [...] . ,
"versión anterior" : [...] . , "replies" : [...] , "replies" : [...] , "predecessor-version" : [...]
"respuestas" : [...] . , "self" : [...] , "replies" : [...]
"self" : [...] , "version-history" : [...] , "replies" : [...] , "self" : [...]
"version-history" : [...] . , "wp:attachment" : [...] , "self" : [...] , "version-history" : [...] .
"wp:attachment" : [...] . , "wp:term" : [...] , "version-history" : [...] , "wp:attachment" : [...] .
"wp:term" : [...] .
},
"categories" : [...] } , "comment_status" : "open", "comment_status" : "open", "wp:term" : [...] }
"comment_status" : "open", "content" : { "wp:term" : [...] }
"content" : {
"protected" : false, "rendered" : "\new", "content" : {
"renderizado" : "\n<p>El fuego, fuerza primordial, cautiva con su <strong>llamas parpadeantes</strong>evocando a la vez asombro y precaución. <quote>baile</quote> simboliza la destrucción y la renovación, consumiendo lo viejo para dar paso a lo nuevo. Al tiempo que calienta nuestros hogares y corazones, el fuego exige respeto por su poder de devastar.</p>\n\n\n\n<figure class="\"wp-block-image" size-full\"><img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https://img.example.com/wp-content/uploads/2024/02/burningbuilding.jpg\"" alt="\"\"" class="\"wp-image-14\"/"></figure>\n\n\n\n<p>En la antigüedad, el fuego era un faro de luz y calor, esencial para la supervivencia. En la actualidad, sigue siendo un símbolo del ingenio humano y del peligro. Desde el reconfortante resplandor de un hogar hasta la furia destructiva de los incendios forestales, la doble naturaleza del fuego nos recuerda nuestra frágil relación con el mundo. Desde el reconfortante resplandor de un hogar hasta la furia destructiva de los incendios forestales, la doble naturaleza del fuego nos recuerda nuestra frágil relación con los elementos. con el mundo.</p>\n\n\n\n<figure class="\"wp-block-image" size-large\"><img decoding="\"async\"" src="\"https://img.example.com/premium-photo/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\"" alt="\"\"/"></figure>\n\n\n\n<p>Puede consultar otros artículos en nuestro blog.</p>\n\n\n\n<ul>\n<li><a href="https://www.361sale.com/es/6/">Lorem Ipsum: Comienzos</a></li>\n\n\n\n<li><a href="https://www.361sale.com/es/usuario/">Lorem Ipsum: Acto 2</a></li>\n\n\n\n<li><a href="https://www.361sale.com/es/account/">Lorem Ipsum: Acto 3</a></li>\n</ul>\n"
},
"date" : "2024-02-27T12:08:30",
"date_gmt" : "2024-02-27T12:08:30",
"excerpt" : {
"protected" : false, "rendered" :
"renderizado" : "<p>El fuego, fuerza primigenia, cautiva con sus vacilantes llamas, evocando a la vez temor y cautela. Su danza simboliza la destrucción y la renovación, consumiendo lo viejo para dar paso a lo nuevo. Al tiempo que calienta nuestros hogares y corazones, el fuego exige respeto por su poder devastador. En la antigüedad, el fuego era un faro de luz y calor, [...]</p>\n"
},
"featured_media" : 0,
"formato" : "estándar",
"guid" : {
"rendered" : "https://yoursite.com/?p=13"
},
"meta" : {
"notas al pie" : ""
},
"plantilla" : "",
"title" : {
"rendered" : "Fuego"
},
"type" : "post"
},
},
...
]El objeto JSON que representa los datos de las entradas individuales de Gutenberg incluye varios campos, con los campos de contenido y extracto devueltos como bloques de Gutenberg analizados como cadenas HTML.
3. Para representar correctamente este contenido HTML en Next.js, utilizamos la funcióndangerouslySetInnerHTMLAtributos:
const page = async () => {
const posts = await getWpPosts();
return (
<>
<h1> Blog sin cabeza </h1>
<div>
{posts.map((post) => (
<link href="{'/blog/'" + post.id} key="{post.id}">
<h2>
{post.title.rendered} <span>-></span>
</h2>
<div dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }} />
</Link>
))}
</div>
</>
);
}.
exportar página por defecto.En el componente actualizado, asignamos la matriz de entradas obtenidas para generar una lista de extractos de entradas. Cada extracto está contenido en unEnlaceEl título de la entrada y su fragmento de contenido se muestran en el componente utilizado para la navegación.
deberíadangerouslySetInnerHTMLLos atributos se utilizan para el análisis sintáctico y la representaciónexcerpt.renderedEl contenido HTML del campo.
4.A continuación, en la aplicaciónCrear un archivo en el directorioblog/[id]/page.js . Las rutas pueden definirse utilizando carpetas. Por lo tanto, se puede definir una ruta creandoblog (préstamo) puede definirblog (préstamo) Rutas. Esto puede combinarse con el enrutamiento dinámico , que genera rutas para cada puesto.
5. Cada entrada tiene un ID./blog/{post_id}Genera su ruta única en la aplicación. Añada el siguiente código:
import Link from 'next/link';
export async function generarParámetrosEstáticos() {
const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts');
const posts = await res.json(); return posts.map((post); }); })
return posts.map((post) => {
return {
params: {
id: post.id.toString(), { params: { post.id.
}, }
}; }
});
}
export async function getPost(id) {
const response = await fetch('https://yoursite.com/wp-json/wp/v2/posts/' + id);
const post = await response.json(); return post; const post = await response.
const post = await response.json(); return post; }
}deberíagenerateStaticParams() genera rutas de forma estática en tiempo de compilación basándose en los ID correspondientes devueltos por cada entrada. La direccióngetPost()La función obtiene los datos de Gutenberg para el post desde la API REST usando el ID pasado.
La sección anterior muestra un ejemplo de datos de Gutenberg analizados y devueltos desde la API REST de la entrada. Por ahora, sólo nos interesa elcontenido.renderizado Campos:
[
{
...
"contenido": {
"renderizado" : "\n<p>El fuego, fuerza primordial, cautiva con su <strong>llamas parpadeantes</strong>evocando a la vez asombro y precaución. <quote>baile</quote> simboliza la destrucción y la renovación, consumiendo lo viejo para dar paso a lo nuevo. Al tiempo que calienta nuestros hogares y corazones, el fuego exige respeto por su poder de devastar.</p>\n\n\n\n<figure> class="wp-block-image size-full\"><img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https://img.example.com/wp-content/uploads/2024/02/burningbuilding.jpg\"" alt="\"\"" class="\"wp-image-14\"/"></figure>\n\n\n\n<p>En la antigüedad, el fuego era un faro de luz y calor, esencial para la supervivencia. En la actualidad, sigue siendo un símbolo del ingenio humano y del peligro. Desde el reconfortante resplandor de un hogar hasta la furia destructiva de los incendios forestales, la doble naturaleza del fuego nos recuerda nuestra frágil relación con el mundo. Desde el reconfortante resplandor de un hogar hasta la furia destructiva de los incendios forestales, la doble naturaleza del fuego nos recuerda nuestra frágil relación con los elementos. con el mundo.</p>\n\n\n\n<figure> class="wp-block-image size-large\"><img decoding="\"async\"" src="\"https://img.example.com/premium-photo/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\"" alt="\"\"/"></figure>\n\n\n\n<p>Puede consultar otros artículos en nuestro blog.</p>\n\n\n\n<ul>\n<li><a> href="https://yoursite.com/?p=6">Lorem Ipsum: Comienzos</a></li>\n\n\n\n<li><a> href="https://yoursite.com/?p=9">Lorem Ipsum: Acto 2</a></li>\n\n\n\n<li><a> href="https://yoursite.com/?p=11">Lorem Ipsum: Acto 3</a></li>\n</ul>\n"
},
...
}
]Este campo contiene el HTML sin procesar de la entrada, que puede utilizarse directamente con la funcióndangerouslySetInnerHTML Propiedades como ésta<div dangerouslysetinnerhtml="{{" __html: <raw_html_string> }} />.
6. A continuación, los datos pueden procesarse analizando los enlaces internos y redimensionando las imágenes. Instale elhtml-react-parser para simplificar el proceso de análisis sintáctico de las etiquetas:
npm install html-react-parser --save7. Añada el siguiente código ablog/[id]/page.js Documentación:
import parse, { domToReact } from "html-react-parser";
/*
* We use a regular expression (pattern) to match the specific URL you want to replace.
* The (\d+) part captures the numeric ID after ?p=.
* Then, we use the replacement string 'data-internal-link="true" href="/blog/$1"',
* where $1 is a placeholder for the captured ID.
*/
export function fixInternalLinks(html_string) {
const pattern = /href="https:\/\/yoursite.com\/\?p=(\d+)"/g;
const replacement = 'data-internal-link="true" href="/blog/$1"';
return html_string.replace(pattern, replacement);
}
export function parseHtml(html) {
// Replace 2+ sequences of '\n' with a single '<br />' tag
const _content = html.replace(/\n{2,}/g, '<br />');
const content = fixInternalLinks(_content);
const options = {
replace: ({ name, attribs, children }) => {
// Convert internal links to Next.js Link components.
const isInternalLink =
name === "a" && attribs["data-internal-link"] === "true";
if (isInternalLink) {
return (
<Link href={attribs.href} {...attribs}>
{domToReact(children, options)}
</Link>
);
} else if (name === "img") {
attribs["width"] = "250";
attribs["height"] = "150";
return (
<img {...attribs}/>
);
}
},
};
return parse(content, options);
}deberíafijarEnlacesInternos() utiliza una expresión regular para encontrar un enlace a una entrada del sitio de WordPress a partir de una cadena de HTML. En el HTML en bruto, se puede ver que el post contiene unListaque contiene enlaces a otras entradas del sitio, y los sustituye por enlaces internos que apuntan a rutas del sitio estático.
deberíaparseHTML() encuentra múltiples secuencias redundantes de nueva línea.ny sustituirlas por etiquetas<br /> . También busca enlaces internos y convierte las etiquetas de anclaje en etiquetas de enlace. A continuación, la función redimensiona la imagen utilizando el atributo tag.
8. Para generar la interfaz de usuario principal para cada ruta dinámica, añada el siguiente código:
export default async function Post({ params }) {
const post = await getPost(params.id);
const content = parseHtml(post.content.rendered);
return (
<>
<h1>
{post.title.rendered}
</h1>
<div>{content}</div>
</>
);
}Tras analizar el HTML sin procesar de los datos de Gutenberg, el código devuelve JSX que representa la interfaz de usuario formateada de la página.
Finalmente, cuando ejecutes el proyecto, la página de inicio mostrará una lista de entradas en WordPress. Además, al hacer clic en las entradas individuales, verás el contenido Gutenberg analizado correctamente.
