annezazu 6:23 pm on August 11, 2023

Introducing WordPress.org/blocks

To better tell the story of blocks, both within WordPress and as a broader framework for folks to consider with their next project, a new page has been created on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ that attempts to pull together the ease and power of blocks into a single source:

This work was wrangled in this GitHub issue and this figma file before diving into the editor itself to implement it thanks to help from a wide group of folks with special shout outs to @ryelle @matveb @saxonfletcher @kellychoffman @youknowriad @markoserb @joen @ndiego @provenself. You will soon find this page under the “Extend” menu to better improve discoverability and highlight blocks.

Let’s iterate with feedback

This is intended to be a starting point and not a final destination. Your feedback is welcomed and needed to get to the next iteration. Please leave a comment below and consider the following questions

What would make this page more compelling?
What points of confusion remain?
What visuals would you like to see to better communicate the story of blocks?
What additional resources need to be created to guide folks?
Where else should this page be linked from to improve discoverability?

Going forward, the intention is to update this page semi-regularly as it makes sense, with progressive features in WordPress releases and increasing resources.

Thank you to @ndiego and @cbringmann for reviewing this post.

annezazu 6:27 pm on August 11, 2023
I’ll jump in first to offer items on my mind to iterate on:
- More illustrations, less text.
- Consider evolving https://wordpress.org/gutenberg/ to align better with this page.
- Integrate something like the blockbook project into the experience, perhaps using WP Sandbox.
- Consider how best to use WP Sandbox to have folks try out more of what’s discussed here.
- Add some sort of a visual that better represents the connection between blocks > patterns > themes. Below is an extremely rough idea:
Dion Hulse 7:22 am on August 14, 2023

This page is now available to Rosetta sites (ie. https://de.wordpress.org/blocks/ and https://es.wordpress.org/blocks/ ) – Translations are within this translate project.

For future changes, it would be great if the imagery and visuals were somewhat language neutral.

I also note some links to wordpress.org/patterns and wordpress.org/gutenberg, those being linked to /patterns/ and /gutenberg/ respectively helps keep locale sites linking to their translated variants.
- annezazu 10:19 pm on August 14, 2023
  
  Added to this tracking issue for a first iteration! https://github.com/WordPress/wporg-main-2022/issues/318 Thanks so much.
Ren 6:36 am on August 16, 2023

The hero image looks good, but I think a nice screenshot or gif of the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor with an opened list-view would could work a lot better. The relationship between blocks in the list view and patterns in the editor could be highlighted, and make a better point this way explaining that blocks are basically a more simplified and end-user friendly version of htmlHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.. Basically jsx for designers.
- Ren 7:18 am on August 16, 2023
  
  I’d also mention that accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) is cared for with blocks because it’s one of the biggest pain points building custom sites from scratch.
  
  Devs and designers already use similar solutions elsewhere (Tailwind, Shadcn, Client First, Relume) and mentioning that blocks are similar and tie into a bigger design framework that’s native to WordPress could be a plus.
  
  I’ve tried some non WP all in one marketer focused page/business builders in the past weeks and the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor and blocks despite their flaws and potential complexity are infinetly more pleasant to use if you have any form of design intent.
  
  Maybe try to score some testimonials from marketer/business influencers who prefer blocks. The people behind the commercial block based “Popcorn Theme” (not in the repo) are well known in SEO circles and on Youtube.
- annezazu 7:10 pm on August 18, 2023
  
  Thanks for diving in to share feedback. Let’s go through each part.
  
  The hero image looks good, but I think a nice screenshot or gif of the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor with an opened list-view would could work a lot better.
  
  Agreed. The hero image definitely needs to be iterated upon and I cover better visuals in the iteration issue so know this is noted!
  
  Devs and designers already use similar solutions elsewhere (Tailwind, Shadcn, Client First, Relume) and mentioning that blocks are similar and tie into a bigger design framework that’s native to WordPress could be a plus.
  
  Yes, yes, yes! This framework approach is key to underscore and I think having better visuals will go a long way. I’m tempted in reading this feedback to completely have a separate section driving that home more.
  
  Maybe try to score some testimonials from marketer/business influencers who prefer blocks. The people behind the commercial block based “Popcorn Theme” (not in the repo) are well known in SEO circles and on Youtube.
  
  In reading this, I added an item to connect this page to the Showcase overhaul work! I think rather than trying to seek out and find testimonials, we can point to work being done with blocks from the showcase instead. Getting quotes and figuring out who to feature can be gnarly.
David Innes 4:29 pm on August 16, 2023

Unless you want ordinary users to continue installing the Classic Editor pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, any page claiming to explain blocks needs to be primarily about how blocks benefit day-to-day end users, not programmers.

Programmers, especially ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. professionals, are already going to be 100% on board. All you need is a single row at the bottom of the page pointing to those four links, changing the discouraging-to-ordinary-user title from “Only the beginning” to “For programmers.”

You absolutely should not have a flipping code snippet anywhere on this page, even if it’s “just” for creating a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. that says “hello world.” Yes, everyone who’s studied programming knows what this means, just like they know that “foo” is a throwaway variable name. Unfortunately non-programmers are going to take one look at that snippet and decide, “geez, you have to be able to write your own blocks just to put text on a page?”)

So is this new page exclusively for programmers? Because while it promises “complete control” and that creating sites “has never been easier” there’s a brief description of common blocks, a gallery of pre-baked patterns, and then the rest is all about how “building a block is ‘as simple’ as spinning up a full-stack programming environment.”

Correct me if I’m wrong (the continuing popularity of the Classic Editor plugin says I’m not) but most WordPress users aren’t experienced programmers.

Everything on the page except the last row should be, as annezazu says in another comment, all about what blocks should mean for the authors, shop and business owners, event managers, service professionals, bloggers, etc., who are saddled with a page-builder interface when they’re instead going to spend 90% or more of their time writing or editing articles, posts, product and event descriptions, class descriptions, service tips, testimonials, case studies, etc.

A site with only finished pages is a dead website. Only 10% of the work is done once a site is built and launched. Everything else is day-to-day content creation, and this proposal doesn’t address that at all.

So as annezazu says the page should start with block fundamentals like what is a block, what kinds of blocks are there, how do blocks speed the process for adding and editing post/product/event/etc. content after a site is built, and generally making a case for not installing the Classic Editor.

Seriously!
- annezazu 7:22 pm on August 18, 2023
  
  Thanks so much for taking the time to share feedback, ideas, and wider context.
  
  Unless you want ordinary users to continue installing the Classic Editor pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, any page claiming to explain blocks needs to be primarily about how blocks benefit day-to-day end users, not programmers.
  
  This is the tricky part that we need to balance: it needs to be for both. To do this, I think we need to iterate on the language to show how user friendly blocks are in order to then encourage developers and designers to use the overall framework, whether in WordPress or outside of it. Here’s part of one of the early mockups I had that tried to cover this just with words (and why I want more visuals to show that instead):
  
  Sounds like we need to both incorporate that back into a next iteration and make sure it’s towards the top of the page. Consider that noted in this tracking issue.
Jeff Sandquist 4:22 pm on September 19, 2023
1. Consider using View Documentation vs create your own on the main landing page? It is often the first term a developer / builder looks for on a page. The term is also used later on.
2. What if we use animation via GIF or other acceptable media format in one of the images to show a useful blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. in action? Might help convey possible use cases better.
Pablo Honey 7:48 pm on October 16, 2023
Good to see this out!

In general, great as a first iteration. A few thoughts for bettering:
- There’s something playful and engaging about larger imagery and animations, like https://order.design/project/block-by-block; ours feel a bit too boxy (even if pun is intended).
- Mobile is not great, even less appealing, images are super small, not thought for that environment.
- Headings and paragraphs aren’t well aligned.
Content wise:
- There’s a hint at what you can do with blocks but minimal, needs more focus and amplitude on that.
- Same with blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. types, feels limiting to only surface eight.
- It could have a CTA on top.
- The patterns don’t render high-res on my side.
I hope this is helpful! Left it on the issue as well https://github.com/WordPress/wporg-main-2022/issues/318#issuecomment-1765166603

Welcome to the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Team!

Contact

Introducing WordPress.org/blocks

Welcome to the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Team!

Contact

Share this: