Archivo del Autor: alumnos

Meet Studio: Your New Favorite Way to Develop WordPress Locally

Say goodbye to manual tool configuration, slow site setup, and clunky local development workflows, and say hello to Studio by WordPress.com, our new, free, open source local WordPress development environment.

We’ve built Studio to be the fastest and simplest way to build WordPress sites locally.

Designed to empower developers, designers, and site builders, Studio offers a seamless solution for creating and running WordPress sites directly on your local machine, as well as showcasing work-in-progress sites with your clients, teams, and colleagues.

Check out a few of our favorite features in the video below:

A new way to develop WordPress locally, available for free

Studio is now available to use for free on Mac*, and you can get up and running with a new local site in just a few minutes:

  1. Download Studio for Mac.
  2. Install and open Studio.
  3. Click Add site, and you’re done!

Once you have a local site running, you can access WP Admin, the Site Editor, global styles, and patterns, all with just one click—and without needing to remember and enter a username or password.

You can even open your local sites in your favorite development tools, such as VS Code, PhpStorm, Terminal, and Finder, making it even easier to add Studio to your existing development workflow.

Plus, Studio is open source; feel free to fork away on GitHub.

*A Windows version of Studio is coming soon, and you can request early access here

Effortlessly share your work and keep moving forward

In the realm of web development, showcasing local work has often been a challenge when projects live solely on your machine. With Studio’s demo sites, you have a convenient, built-in solution for sharing your progress with your team, clients, or designers. 

These publicly-accessible demo sites, hosted on WordPress.com, are a convenient way to share your work without the need for complex server setups or lengthy deployments. In less than 15 seconds, you can have a shareable link to your local site that stays active for seven days.

The best part? Demo sites can be refreshed to reflect your latest build, allowing you to easily convey any updates or changes!

Breaking free from traditional constraints

Unlike traditional local environment tools like MAMP or Docker, Studio takes a fresh approach to local WordPress development. Studio is a lightweight and efficient solution that minimizes overhead and maximizes simplicity by forgoing the need for web servers, MySQL servers, or virtualization technologies.

Behind the scenes, Studio uses WordPress Playground, the WebAssembly-powered PHP binary. Thanks to this technology, there is no need to use a traditional web server, making your development experience much quicker and smoother.

Say goodbye to complex setups and compatibility issues. Studio makes it easier than ever to build and manage WordPress sites locally.

a cursor clicking a white Add Site button on Studio by WordPress.com

Let’s get building

At WordPress.com, we’re committed to making your website management experience seamless. In the last few years alone, we launched staging sites with synchronization features, SSH and WP-CLI access, global edge caching, GitHub Deployments, and more. 

Studio is yet another powerful feature to add to your toolkit. Stay tuned for more exciting updates, and remember to follow our blog to stay in the loop.

And, of course, download Studio today. Your local development workflow will thank you.


Major kudos to the Studio team on this launch! Antonio Sejas, Antony Agrios, Kateryna Kodonenko, Philip Jackson, Carlos García Prim, David Calhoun, Derek Blank, Siobhan Bamber, Tanner Stokes, Matt West, Adam Zielinski, Brandon Payton, Berislav Grgicak, Alexa Peduzzi, Jeremy Massel, Gio Lodi, Olivier Halligon, Matthew Denton, Ian Stewart, Daniel Bachhuber, Kei Takagi, Claudiu Filip, Niranjan Uma Shankar, Noemí Sánchez, and our beta testers.

Presentamos Studio, una nueva forma de desarrollar con WordPress en local

Descubre Studio de WordPress.com y despídete de la configuración manual de herramientas. Acelera la creación de tus sitios web y simplifica tus flujos de trabajo con nuestro nuevo entorno de desarrollo local para WordPress, gratuito y de código abierto. 

Hemos creado Studio para que sea la forma más rápida y sencilla de crear webs con WordPress de forma local.  

Studio ha sido diseñado para ayudar a creadores, desarrolladores y diseñadores web a crear y trabajar en sitios web de WordPress en local de forma más ágil, así como para mostrar el progreso de los proyectos en desarrollo a sus clientes, equipo o colegas. 

Echa un vistazo a algunas de nuestras funciones favoritas en el siguiente vídeo: 

Desarrolla en local y de forma gratuita 

Studio ya está disponible de forma gratuita para Mac*. Puedes poner en marcha un nuevo sitio web local en cuestión de minutos siguiendo estos pasos:

Una vez tengas un sitio local en funcionamiento, podrás acceder a WP Admin, al Editor de Sitios, a estilos globales y a patrones, todo con un solo clic y sin la necesidad de recordar e introducir un nombre de usuario o una contraseña.

Además, puedes abrir tus sitios locales en tus herramientas de desarrollo preferidas como VS Code, PhpStorm, Terminal y Finder, lo que simplifica aún más la integración de Studio en tu flujo de trabajo de desarrollo actual. 

Studio es de código abierto. Siéntete libre de bifurcar en GitHub.

*Próximamente estará disponible la versión de Studio para Windows. Puedes solicitar acceso anticipado aquí

Comparte tu trabajo sin esfuerzo

En el ámbito del desarrollo web, mostrar el trabajo local ha sido a menudo un reto ya que los proyectos se encuentran únicamente en el equipo personal. Con los sitios demo de Studio, tendrás a tu disposición una solución cómoda e integrada para compartir tus avances con tu equipo, clientes o diseñadores. 

Estos sitios demo de acceso público están alojados en WordPress.com y son una forma cómoda de mostrar tu trabajo, sin necesidad de complejas configuraciones de servidor ni largas implementaciones. En menos de 15 segundos puedes obtener un enlace a tu sitio local para compartir que estará disponible durante siete días. 

¿Y sabes qué es lo mejor? Los sitios demo se pueden actualizar para reflejar la última versión, lo que te permite compartir fácilmente cualquier actualización o cambio. 

Libérate de las limitaciones de siempre

A diferencia de las herramientas clásicas de entorno local como MAMP o Docker, Studio adopta un enfoque innovador para el desarrollo local de WordPress. Es una solución liviana y eficiente que reduce la carga y simplifica el proceso al prescindir de la necesidad de servidores web, servidores MySQL o tecnologías de virtualización . 

Studio utiliza WordPress Playground, el binario PHP potenciado por WebAssembly. Gracias a esta tecnología, no es necesario emplear un servidor web convencional, lo que agiliza y facilita enormemente tu experiencia de desarrollo. 

Despídete de las configuraciones complejas y los problemas de compatibilidad. Con Studio, crear y gestionar sitios de WordPress de forma local nunca había sido tan sencillo. 

Empieza a construir

En WordPress.com nos esforzamos por hacer que tu experiencia de gestión de sitios web sea excepcional. Tan solo en el último año, hemos introducido características como los sitios staging con funciones de sincronización, acceso SSH y WP-CLI, caché global, implementaciones desde GitHub y mucho más. 

Studio es otra potente característica que agregar a tu conjunto de herramientas. Sigue nuestro blog y mantente informado sobre las actualizaciones.

Descarga Studio hoy mismo. 


Enhorabuena al equipo de Studio por este lanzamiento. Antonio Sejas, Antony Agrios, Kateryna Kodonenko, Philip Jackson, Carlos García Prim, David Calhoun, Derek Blank, Siobhan Bamber, Tanner Stokes, Matt West, Adam Zielinski, Brandon Payton, Berislav Grgicak, Alexa Peduzzi, Jeremy Massel, Gio Lodi, Olivier Halligon, Matthew Denton, Ian Stewart, Daniel Bachhuber, Kei Takagi, Claudiu Filip, Niranjan Uma Shankar, Noemí Sánchez, y nuestros beta testers. 

WordPress Block Patterns Give You Superpowers

With the power of block patterns you’ll be a WordPress superstar in no time, whether you’re an establish pro or just starting out. Block patterns are professionally designed layouts that you can add your site in a single click. What makes them especially powerful is that once they’re inserted, you can edit and customize every aspect. (Or, you can leave them be!)

In today’s Build and Beyond video, Jamie Marsland walks you through everything you need to go to become a block pattern expert, in under four minutes.

Get started on your site today with a free trial:

10 Amazing WordPress Design Resouces

Designing a beautiful website from scratch can be difficult for developers of all skill levels. Luckily, in today’s Build and Beyond video, Jamie Marsland reveals his ten favorite WordPress design tools and websites to elevate your next build.

Get inspiration for your next website’s design and then start building with WordPress.com. Ready to get going? Click below to embark on your free trial today:

Here are the sites and resources mentioned in the video:

Heikei

Stunning backgrounds and visuals

WordPress.com Assembler

A design-your-own-theme tool using block patterns

Glassmorphism

Free CSS generator for a glass effect

Designspiration

Save and explore inspiring designs

Shots

Easy mockups for products and thumbnails

WordPress.com Pattern Library

WordPress.com’s free library of block patterns

Coolors

Generate color palettes with a click

WordPress.org Pattern Library

Another block pattern library, but with community-uploaded designs

Midjourney

The best AI image generator

Instant Images

WordPress plugin to easily find free-to-use images

Making 43% of the Web More Dynamic with the WordPress Interactivity API

Creating rich, engaging, and interactive website experiences is a simple way to surprise, delight, and attract attention from website readers and users. Dynamic interactivity like instant search, form handling, and client-side “app-like” navigation where elements can persist across routes, all without a full page reload, can make the web a more efficient and interesting place for all.

But creating those experiences on WordPress hasn’t always been the easiest or most straightforward, often requiring complex JavaScript framework setup and maintenance. 

Now, with the Interactivity API, WordPress developers have a standardized way for doing that, all built directly into core. 

The Interactivity API started as an experimental plugin in early 2022, became an official proposal in March 2023, and was finally merged into WordPress core with the release of WordPress 6.5 on April 2, 2024. It provides an easier, standardized way for WordPress developers to create rich, interactive user experiences with their blocks on the front-end.

ELI5: The Interactivity API and the Image Block

Several core WordPress blocks, including the Query Loop, Image, and Search blocks, have already adopted the Interactivity API. The Image block, in particular, is a great way to show off the Interactivity API in action. 

At its core, the Image blocks allow you to add an image to a post or page. When a user clicks on an image in a post or page, the Interactivity API launches a lightbox showing a high-resolution version of the image.

The rendering of the Image block is handled server-side. The client-side interactivity, handling resizing and opening the lightbox, is now done with the new API that comes bundled with WordPress. You can bind the client-side interactivity simply by adding the wp-on--click directive to the image element, referencing the showLightbox action in view.js.

You might say, “But I could easily do this with some JavaScript!” With the Interactivity API, the code is compact and declarative, and you get the context (local state) to handle the lightbox, resizing, side effects, and all of the other needed work here in the store object.

actions: {
			showLightbox() {
				const ctx = getContext();

				// Bails out if the image has not loaded yet.
				if ( ! ctx.imageRef?.complete ) {
					return;
				}

				// Stores the positons of the scroll to fix it until the overlay is
				// closed.
				state.scrollTopReset = document.documentElement.scrollTop;
				state.scrollLeftReset = document.documentElement.scrollLeft;

				// Moves the information of the expaned image to the state.
				ctx.currentSrc = ctx.imageRef.currentSrc;
				imageRef = ctx.imageRef;
				buttonRef = ctx.buttonRef;
				state.currentImage = ctx;
				state.overlayEnabled = true;

				// Computes the styles of the overlay for the animation.
				callbacks.setOverlayStyles();
			},
...

The lower-level implementation details, like keeping the server and client side in sync, just work; developers no longer need to account for them.

This functionality is possible using vanilla JavaScript, by selecting the element via a query selector, reading data attributes, and manipulating the DOM. But it’s far less elegant, and up until now, there hasn’t been a standardized way in WordPress of handling interactive events like these.

With the Interactivity API, developers have a predictable way to provide interactivity to users on the front-end. You don’t have to worry about lower-level code for adding interactivity; it’s there in WordPress for you to start using today. Batteries are included.

How is the Interactivity API different from Alpine, React, or Vue?

Prior to merging the Interactivity API into WordPress core, developers would typically reach for a JavaScript framework to add dynamic features to the user-facing parts of their websites. This approach worked just fine, so why was there a need to standardize it?

At its core, the Interactivity API is a lightweight JavaScript library that standardizes the way developers can build interactive HTML elements on WordPress sites.

Mario Santos, a developer on the WordPress core team, wrote in the Interactivity API proposal that, “With a standard, WordPress can absorb the maximum amount of complexity from the developer because it will handle most of what’s needed to create an interactive block.”

The team saw that the gap between what’s possible and what’s practical grew as sites became more complex. The more complex a user experience developers wanted to build, the more blocks needed to interact with each other, and the more difficult it became to build and maintain sites. Developers would spend a lot of time making sure that the client-side and server-side code played nicely together.

For a large open-source project with several contributors, having an agreed-upon standard and native way of providing client-side interactivity speeds up development and greatly improves the developer experience.

Five goals shaped the core development team’s decisions as they built the API: 

  1. Block-first and PHP-first: Prioritizing blocks for building sites and server side rendering for better SEO and performance. Combining the best for user and developer experience.
  2. Backward-compatible: Ensuring compatibility with both classic and block themes and optionally with other JavaScript frameworks, though it’s advised to use the API as the primary method. It also works with hooks and internationalization.
  3. Declarative and reactive: Using declarative code to define interactions, listening for changes in data, and updating only relevant parts of the DOM accordingly.
  4. Performant: Optimizing runtime performance to deliver a fast and lightweight user experience.
  5. Send less JavaScript: Reduce the overall amount of JavaScript being sent on the page by providing a common framework that blocks can reuse.  So the more that blocks leverage the Interactivity API, the less JavaScript will be sent overall.

Other goals are on the horizon, including improvements to client-side navigation, as you can see in this PR.

Interactivity API vs. Alpine

The Interactivity API shares a few similarities to Alpine—a lightweight JavaScript library that allows developers to build interactions into their web projects, often used in WordPress and Laravel projects.

Similar to Alpine, the Interactivity API uses directives directly in HTML and both play nicely with PHP. Unlike Alpine, the Interactivity API is designed to seamlessly integrate with WordPress and support server-side rendering of its directives.

With the interactivity API, you can easily generate the view from the server in PHP, and then add client-side interactivity. This results in less duplication, and its support in WordPress core will lead to less architectural decisions currently required by developers. 

So while Alpine and the Interactivity API share a broadly similar goal—making it easy for web developers to add interactive elements to a webpage—the Interactivity API is even more plug-and-play for WordPress developers.

Interactivity API vs. React and Vue

Many developers have opted for React when adding interactivity to WordPress sites because, in the modern web development stack, React is the go-to solution for declaratively handling DOM interactivity. This is familiar territory, and we’re used to using React and JSX when adding custom blocks for Gutenberg.

Loading React on the client side can be done, but it leaves you with many decisions: “How should I handle routing? How do I work with the context between PHP and React? What about server-side rendering?”

Part of the goal in developing the Interactivity API was the need to write as little as little JavaScript as possible, leaving the heavy lifting to PHP, and only shipping JavaScript when necessary.

The core team also saw issues with how these frameworks worked in conjunction with WordPress. Developers can use JavaScript frameworks like React and Vue to render a block on the front-end that they server-rendered in PHP, for example, but this requires logic duplication and risks exposure to issues with WordPress hooks.

For these reasons, among others, the core team preferred Preact—a smaller UI framework that requires less JavaScript to download and execute without sacrificing performance. Think of it like React with fewer calories.

Luis Herranz, a WordPress Core contributor from Automattic, outlines more details on Alpine vs the Interactivity API’s usage of Preact with a thin layer of directives on top of it in this comment on the original proposal.

Preact only loads if the page source contains an interactive block, meaning it is not loaded until it’s needed, aligning with the idea of shipping as little JavaScript as possible (and shipping no JavaScript as a default).

In the original Interactivity API proposal, you can see the run-down and comparison of several frameworks and why Preact was chosen over the others.

What does the new Interactivity API provide to WordPress developers?

In addition to providing a standardized way to render interactive elements client-side, the Interactivity API also provides developers with directives and a more straightforward way of creating a store object to handle state, side effects, and actions.

Graphic from Proposal: The Interactivity API – A better developer experience in building interactive blocks on WordPress.org

Directives

Directives, a special set of data attributes, allow you to extend HTML markup. You can share data between the server-side-rendered blocks and the client-side, bind values, add click events, and much more. The Interactivity API reference lists all the available directives.

These directives are typically added in the block’s render.php file, and they support all of the WordPress APIs, including actions, filters, and core translation APIs. 

Here’s the render file of a sample block. Notice the click event (data-wp-on--click="actions.toggle"), and how we bind the value of the aria-expanded attributes via directives.

data-wp-interactive="create-block" false ) ); ?> data-wp-watch="callbacks.logIsOpen" >

Do you need to dynamically update an element’s inner text? The Interactivity API allows you to use data-wp-text on an element, just like you can use v-text in Vue.

You can bind a value to a boolean or string using wp-bind– or hook up a click event by using data-wp-on–click on the element. This means you can write PHP and HTML and sprinkle in directives to add interactivity in a declarative way.

Handling state, side effects, and actions

The second stage of adding interactivity is to create a store, which is usually done in your view.js file. In the store, you’ll have access to the same context as in your render.php file.

In the store object, you define actions responding to user interactions. These actions can update the local context or global state, which then re-renders and updates the connected HTML element. You can also define side effects/callbacks, which are similar to actions, but they respond to state changes instead of direct user actions.

import { store, getContext } from '@wordpress/interactivity';

store( 'create-block', {
	actions: {
		toggle: () => {
			const context = getContext();
			context.isOpen = ! context.isOpen;
		},
	},
	callbacks: {
		logIsOpen: () => {
			const { isOpen } = getContext();
			// Log the value of `isOpen` each time it changes.
			console.log( `Is open: ${ isOpen }` );
		},
	},
} );

Try it out for yourself

The Interactivity API is production-ready and already running on WordPress.com! With any WordPress.com plan, you’ll have access to the core blocks built on top of the Interactivity API. 

If you want to build your own interactive blocks, you can scaffold an interactive block by running the below code in your terminal:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template 

This will give you an example interactive block, with directives and state handling set up. 

You can then play around with this locally, using wp-env, using a staging site, or by uploading the plugin directly to your site running a plugin-eligible WordPress.com plan

If you want a seamless experience between your local dev setup and your WordPress.com site, try using it with our new GitHub Deployments feature! Developing custom blocks is the perfect use case for this new tool.

The best way to learn something new is to start building. To kick things off, you may find the following resources a good starting point:

WordPress Website Speed Build: The Masters Golf Tournament

Congratulations are in order for Scottie Scheffler, the winner of the 2024 Masters Tournament in Augusta, Georgia! In today’s Build and Beyond video, Jamie Marsland takes on the slightly less intimidating task of re-creating the Masters website as quickly as he can. Can he possibly do it in just 30 minutes?

Along the way, you’ll learn about sticky navigation menus, image overflows and breakouts, card layouts, and more.

Interested in a free trial that allows you to test our all that WordPress.com has to offer? Click below:

Registering Custom Post Types in the WordPress Admin: Our CloudFest Hackathon Report

With WordPress today you need to use custom code or a plugin to create a custom post type like “Book” or “Member.” This is a popular need, and there are a variety of approaches; however, one challenge is that the end-user experience can be confusing and non-standardized.

A few weeks ago, some Automatticians and I went to the 7th CloudFest Hackathon in Rust, Germany to explore a solution for this. We started hacking on a deeply nerdy project, JSON Schema forms and fields, and ended up with a fascinating approach to an age-old question: What if you could register custom post types and custom fields directly in the WordPress admin?

Forty-eight hours turns an idea into reality

The CloudFest Hackathon is an event that allows developers from around the globe to take ideas and turn them into realities.

During the Hackathon, teams of developers from various content management systems and hosting companies come together to contribute to projects that align with the core principles of the event: the projects must be not-for-profit, interoperable, and open source.

Last year, we worked on a project that allowed us to embed WordPress directly in VS Code. We built the WordPress Playground VS Code extension on top of WordPress Playground. It uses WebAssembly to run WordPress entirely within the browser, and it turned out pretty darn slick

This year, we focused on a JSON Schema Field/Form Renderer. While most of us explored using JSON Schema to dynamically register admin forms and fields, Dennis Snell and Adam Zieliński decided to take the project one step further! They hacked together a plugin that introduced the ability to register custom post types and custom fields directly from the WordPress admin. More notably, everything happens within the block editor—you have to see it to believe it:

This work poses some interesting possibilities for custom post type and custom field implementation because it could fundamentally change the way low- to no-code WordPress users modify their sites.

Naturally, I took the idea to Twitter/X:

Should WordPress let you register custom post types and custom fields from the admin? #CFHack2024

— daniel (@dbchhbr) March 17, 2024

I got quite a range of responses, ranging from “Heck Yes! It should have already been a core feature now. Such an integral part of every other site” to “Admin should only be for content and user management. Everything else should be configured in code and version controllable.”

So why the range in responses? Let’s discuss.

It turned out to be pretty simple

Dennis and Adam built our prototype using the following conventions:

  • A custom post type wp_data_type holds templates for user-defined data types.
  • The title of a post in the wp_data_type defines the name of the new data type. The post itself is the rendering template and comprises any set of normal blocks. Names are given to select block attributes within the post, and these names are mapped into the data type.
  • When creating new posts for the given data type, the locked template is copied from the wp_data_type template, and the block attribute annotations are preserved.
  • Finally, when rendering the wp_data_type template, the attributes are pulled from the individual post of the given data type and spliced into the template.

The fascinating idea is that we don’t have to think about form fields; blocks already provide a rendering view and a modal editing experience. We can rely on the fundamental way blocks work and use the very same user experience to create custom data types in a way that users are already familiar with when editing a post or a site.

JSON-LD properties you could define using custom fields are:

  • description
  • copyrightYear
  • author
  • bookEdition
  • bookFormat
  • isbn
  • numberOfPages

We also chose to store a copy of each block attribute in the JSON attributes for that block. Since WordPress can now provide a post-to-JSON function, which merges the extracted attributes with the names assigned in the custom post type template, that template may have changed since the custom post was created. This means that no database migrations are necessary to render an updated version of a post.

The best part? The WordPress infrastructure that already exists (aka Gutenberg!) defines the data type. Because these custom posts are normal posts, and because they adopt the locked template for the data type definition, they are, in fact, renderable on their own! Even if the template has been updated and only the post itself is rendered, it will still display a meaningful representation of the data type as it was when it was created.

While our original Hackathon project was tailored towards developers and UX designers who would love to see a forms and fields API in WordPress, this prototype puts more power in the hands of low- to no-code WordPress users.

It also opens up a world of possibilities for providing a rendering view for any structured data. Imagine uploading a CSV and mapping the column names to block attributes, or connecting to a database or JSON API to map the records in the same way. 

For example, if you had a CSV with business names, addresses, a rating, and a description, we could take that template post and insert a map block, a heading block, a star rating block, and a paragraph block and set the attributes to map to the CSV columns. It’s essentially an instant structured data renderer!

But even if we can define custom post types and fields in the editor, should we, as a WordPress community, consider adding it to core?

The existential question: Should it exist?

Adding this kind of functionality into WordPress core could open up a ton of opportunities for the average WordPress user. Instead of needing to get a developer involved to add a custom post type to their site, a user could simply do it themselves and define the necessary fields and structured data attributes. 

On the other hand, allowing everyday users, who may not have a full grasp of how custom post types and structured data should work, free reign to create these data types themselves could have detrimental effects on the user experience of their websites. Clunky or incorrect implementation of structured data markup could also cause issues with how search engines crawl these sites, causing unintended negative impacts to search traffic.

Not only that, but as of right now, if a custom post type is accidentally deleted, all of the content posted to that custom post type will no longer be accessible through the admin (even though it will still be stored in the database). The user could think they “lost” their data.

Let’s talk about it

What do you think? Are you in favor of giving website owners the ability to change and customize their custom post types and attributes? Or are there some website features that should always require a more technical hand and implementer? 

We’d love to chat with you about your thoughts in the comments below.

For another interesting exploration on a related idea, check out this discussion on GitHub with the core team.


Thanks to Lars Gersmann for leading the JSON Schema project with me and to everyone on the Syntax Errors team: Adam Zieliński, Dennis Snell, Julian Haupt, Michael Schmitz, Anja Lang, Thomas Rose, Marko Feldmann, Fabian Genes, Michael Schmitz, Jan Vogt, Lucisu, Maximilian Andre, Marcel Schmitz, and Milana Cap.

Presentamos la biblioteca pública de patrones

A la hora de crear una web, los temas de WordPress garantizan el éxito de tu sitio con un montón de opciones de tipografías, colores y diseños. Pero aunque los temas se encargan de proporcionar la estética general de tu web, todavía tienes que crear todas las páginas, entradas y plantillas. ¡Y aquí es donde los patrones de bloques te pueden ayudar!

La biblioteca de patrones de WordPress.com es un nuevo recurso pensado para buscar cualquier tipo de patrón que encaje con tu web de WordPress. Hay centenares de patrones preconstruidos en más de diez categorías, para que des con el patrón que realmente necesitas.

¿Qué son los patrones?

Los patrones de bloques son conjuntos de bloques diseñados para funcionar a la perfección con los temas más modernos. ¿Necesitas una página «Acerca de»? La tienes. ¿Una galería? También. ¿Y una newsletter? Sin problemas. Tenemos prácticamente todo lo que puedas imaginar.

Y lo mejor de todo: en cada patrón, las tipografías, los colores y el espaciado se adaptarán a tu tema, de forma que todo quede perfectamente cohesionado. Sin embargo, los patrones no son estáticos ni están bloqueados: puedes modificarlos siempre y como quieras.

Un paseo por la biblioteca de patrones

En la nueva biblioteca pública de patrones podrás explorar, previsualizar y compartir o implementar fácilmente el diseño que más te guste. Vamos a echar un vistazo.

Navega por todas las categorías

Si quieres explorar la biblioteca de patrones pero no estás buscando nada en especial, visita cada categoría en busca de inspiración.

Encuentra lo que necesitas

En la parte superior encontrarás un buscador rápido y fácil de utilizar para que puedas encontrar exactamente lo que quieres. Es una buena opción si no te apetece ver todas las categorías y prefieres encontrar rápidamente el patrón ideal para tus necesidades.

Explora los diseños de páginas 

Hay veces que solo necesitas un par de elementos para una página, entrada o plantilla: una cabecera, un botón para suscribirse, un módulo de tienda, etc. Otras veces prefieres copiar y pegar una página completa. Desplázate hacia abajo, y, después de la categorías, encontrarás patrones para páginas completas: Acerca de, Blog, Contacto y Tienda, entre otros.

Prueba cómo se adapta cada patrón a los dispositivos móviles

Si ves la biblioteca en un ordenador, notarás que hay una barra vertical gris junto a cada patrón. Es un práctico control deslizante que hemos introducido para que puedas ver cómo queda cada patrón en diferentes tamaños de pantalla. Utiliza el cursor para mover la barra hacia la izquierda para ver cómo queda el diseño en una pantalla de móvil; en la zona central es como se verá en una tablet; y volviendo a mover el cursor hacia la derecha tienes la versión de ordenador.

Copia y pega en tu web

¿Algún patrón te hace tilín? Solo tienes que hacer clic en el botón azul «Copiar patrón», abrir la página, entrada o plantilla que quieras en el editor de WordPress.com y pegar el diseño. Así de fácil. Una vez que lo hayas insertado, puedes personalizar cada bloque como más te guste en la barra lateral derecha.

Tu nueva herramienta favorita para crear páginas

La biblioteca de patrones es especialmente útil si te dedicas a crear webs para clientes. Cada patrón está diseñado para funcionar en cualquier tema que siga nuestros estándares técnicos, de forma de crear una web es mucho más rápido no solo para ti, sino también para tus clientes. Y sin perder la estética general del tema.

Nuestros patrones adoptan las tipografías, colores y espaciado del tema en vez de utilizar los ajustes predefinidos. Gracias a esto, es más difícil que la web se rompa (o que quede rara) cuando tú o algún cliente hacéis algún experimento.

Nuestro objetivo siempre es hacer tu vida más fácil. Y este nuevo recurso es perfecto para eso. ¡Échale un vistazo a la biblioteca de patrones de WordPress.com y mejora tu experiencia de creación web! 

Site-Building Made Simple: Introducing the Public Pattern Library 

When it comes to website-building, WordPress themes set your site up for success by providing stylish, preselected options for fonts, colors, and layouts. Even though themes provide the overall aesthetic, you still need to build out the posts, pages, and templates on your site. That’s where block patterns come in!

The WordPress.com Pattern Library is your new go-to resource for finding any kind of pattern for your beautiful WordPress website. With hundreds of pre-built patterns to choose from across over a dozen categories, you’ll be covered no matter your website’s specific needs. 

What are patterns?

Block patterns are collections of blocks made to work seamlessly with our modern themes. Need an “About” page? Check. A gallery? Check. A testimonial? Check. How about a newsletter? Check. We have just about anything you’ll need. 

Best of all: for each pattern, the fonts, colors, and spacing will adapt to your theme’s settings, making for a cohesive look. Still, patterns aren’t locked or static either—after you’ve added the pattern to your post, page, or template, you can tweak it however you like. 

A tour of the Pattern Library 

This new public Pattern Library allows you to browse, preview, and easily share or implement whichever design speaks your tastes. Let’s take a look around. 

Browse all categories 

If you want to explore the Pattern Library and don’t have anything in particular that you’re looking for, click through each category to spark some ideas. 

Search for what you need 

At the top, you’ll find a fast and easy-to-use search box, allowing you to find exactly what you need. This is a great option if you don’t feel like browsing and want to jump right into a solution for your specific needs. 

Explore page layouts 

Sometimes you just need the components of a post, page, or template: a header, a “Subscribe” box, a store module, etc. Other times, you want to be able to copy and paste an entire page into existence. Scroll down past the categories and you’ll find our full-page patterns for whole pages: About, Blog, Contact, Store, and more. 

Test the mobile responsiveness for each pattern

When looking through the library on a desktop or laptop device, you’ll see a gray vertical bar next to each pattern. That’s a nifty little slider that we’ve built into the library which allows you to see how each pattern responds to different screen sizes. Using your cursor to move the bar to the left, you’ll see what that design looks like on a mobile device; in the middle is where most tablets fall; and scroll back all the way to the right for the desktop/laptop version. 

Copy and paste to your website 

Like what you see? Simply click the blue “Copy pattern” button, open the WordPress.com editor to the post, page, or template you’re working on, and paste the design. It’s that easy. Once inserted, you can customize each block as needed using the right sidebar. 

Your new favorite page-building tool

The Pattern Library is especially useful if you build websites for clients. Each pattern is built to work with any theme that follows our technical standards, speeding up page-building not just for you but also for your clients—all while maintaining the overall style of your theme. 

In concrete terms, this means that our patterns take font, color, and spacing settings from the theme itself rather than using standard presets. This makes it far less likely for a site to break (or just look off) when you—or a client—experiment and make updates. 

Our goal is always to make your life both easier and more beautiful. This new resource does just that. Check out the WordPress.com Pattern Library today to enhance your website-building experience! 

10 WordPress Influencers to Follow in 2024  

In this “Build and Beyond” video, Jamie Marsland highlights 10 WordPressers to keep an eye on in 2024. 

A couple of weeks ago, we shared a list of 15 WordPress developers you should follow to stay on top of WordPress development news and tips. This video broadens the scope and features folks worth following, regardless of your role or experience with WordPress. If you’re at all interested in or curious about WordPress, these are folks to pay attention to.

Interested in a free trial that allows you to test our all that WordPress.com has to offer? Click below:

Remkus de Vries

Remkus is a well-known figure in the WordPress community, recognized for his contributions to WordPress development and his overall expertise in web technology.

Website | YouTube

Kevin Geary

Kevin helps digital agency owners, freelancers, and web designers to learn best practices for UX/UI design, development, and CSS.

Website | YouTube

Tyler Moore

Tyler has free video lessons on YouTube that teach people how to create their own professional website without any coding experience.

Website | YouTube

Sabrina Zeidan

Sabrina is a WordPress performance engineer, who’s daily work is to speed up WordPress websites, plugins, and themes.

YouTube

Mike McAlister

Mike is a designer and principal software engineer from the USA. He builds killer products and brands that people love, including the fantastic Ollie WordPress theme.

Website | X (Twitter)

Jonathan Jernigan

Jonathan runs a small web development agency, creates courses, and makes YouTube videos. He started is WordPress-focused YouTube channel in late 2018.

Website | YouTube

Birgit Pauli-Haack

Birgit works as developer advocate for WordPress, curates community voices on Gutenberg Times, and co-hosts the Gutenberg Changelog podcast.

Website | X (Twitter)

David McCan

For the past 20 years David has worked professionally developing websites and in IT management.

Website | Facebook

Paul Charlton

Paul has over 15 years of commercial web design and development experience working on a large range of diverse projects, with clients ranging from start-ups to blue-chip companies.

Website | YouTube

Matt Medeiros

The WP Minute, founded by Matt, is a website dedicated to delivering the most important news and topics from the WordPress ecosystem, keeping WordPress professionals informed, educated, and entertained.

Website | Podcast

Imran Sadiq

Imran has 17+ years of web design and marketing experience. His YouTube channel has over 55k YouTube subscribers.

Website | YouTube

Rich Tabor

Rich describes himself as a multidisciplinary maker specializing in the intersection of product, design, and engineering.

Website | X (Twitter)

Jamie Marsland

Jamie has trained over 5,000 people on WordPress in the past 10 years, and he also makes WordPress plugins. His YouTube channel is dedicated to helping people with WordPress Blocks.

Website | YouTube