Create 'Blocks' Landing Page

[bengreeley]

Currently, there isn't a page on wordpress.org that explains in a compelling way what 'Blocks' are or markets it very effectively on the website. We have a filter in the plugin directory, which is useful, but that page is lacking the context of what blocks are, what the block editor is, and why it is so exciting. There are other pages, such as the documentation, that explains what the block editor is, but IMO it's a bit wordy and explains how to use the editor, but not necessarily why you should use the editor and why it is unique and exciting.

It would be great to think through a landing page that explains the block editor and links to the various resources, the listing of blocks, etc. I envision something more visual like a marketing page for a product vs being text-heavy, but I'll leave the actual implementation ideas to folks who are more creative than I am. :-)

cc @WordPress/meta-design @thetinyl @StevenDufresne

[jasmussen]

Connecting dots with https://github.com/WordPress/wporg-mu-plugins/issues/360, which discusses whether to rename the "Download & Extend" menu item.

[fcoveram]

My first thought about this content is addressing it across multiple pages. Landing pages tend to live isolated when they are feature-focused and intend to convey a product value. A landing page definitely works for diving into details and making statements more precise. But up to now, I envision block references in the homepage.

I would add this content request to the IA mapping to then drop ideas with comms folks for updates on multiple pages.

[StevenDufresne]

I would consider how this relates to http://wordpress.org/gutenberg. It seems like there would be some overlap and the block aspect of /gutenberg holds that page together since it primary talks about using the block to make pages.

[jasmussen]

That consideration would be good to consider in the design process for a blocks page. The Gutenberg page could potentially be linked from the blocks page mainly (or only), or it could even be partially embedded inside. That said, my instinct at this point is that the current separate destination is valuable to still have.

[thetinyl]

Just some immediate questions that came up for me thinking about a blocks page:

• What value does a separate Blocks landing page have for folks new to WordPress?
• Who would this landing page be for?
• If blocks/block editor is modern WordPress, how does a blocks landing page help knit together the story of the WordPress experience as a whole?

My initial thoughts are pretty similar to @panchovm.

My first thought about this content is addressing it across multiple pages.

There's minimal mention of blocks on the Homepage and none on the Features page (for example [yet]).

[StevenDufresne]

Adding to @thetinyl's and expanding on @bengreeley's idea of "listing the blocks", I think we really want to highlight that "block coverage" so to speak is pretty robust.

"We have a block for that! and if we don't you can build one and add it to the block directory!".

[jasmussen]

What value does a separate Blocks landing page have for folks new to WordPress? Who would this landing page be for? If blocks/block editor is modern WordPress, how does a blocks landing page help knit together the story of the WordPress experience as a whole?

Some of the inspiration from the blocks page come from a conversation with @mtias. Essentially the page is to be a higher level presentation of: "what are blocks?", and appeal in part to folks who might have read about blocks.

For WordPress, blocks are already here, and open source. They use a very powerful semantic language making the content basically interoperable. It's a language and system for both developers, machines, and editors to work with, and as AI can expand into more and more tooling, the fact that all three categories speak the same semantic language: the block language, means that you could potentially see AI tooling generate patterns for you based on prompts, which through the block UI you can then edit after the fact. This would not be possible without the block syntax.

[bengreeley]

What additional information would be helpful to get started so people are positioned to come up with rough ideas for layout and content for this new 'Blocks' page (and associated content updates, such as the homepage)? If it would be helpful, I could help gather a list of resources we could either feature or link to from the Blocks page.

When I first heard about the page, I thought it could be a more fleshed out version of this homepage content, where it talks about blocks to people who know nothing about blocks (or even WordPress), which then links out to other resources such as the block directory, developer documentation, and other relevant information. I think the Block Protocol main page does a good job of creating a simple explanation for people, would a page similar to that make sense?

[jasmussen]

Good note Ben, I think as we start doing design work on revisiting/refreshing the homepage (https://github.com/WordPress/wporg-main-2022/issues/253) that section can definitely use an update to espouse the virtues of the block syntax, perhaps as a first step towards the new blocks section. CC: @panchovm

[annezazu]

To get something in place sooner rather than later that can then be iterated on with feedback, I created a mock up in figma here of a /blocks page before inviting in various designers to take it to the next level. You can see each exploration in there but here are two screenshots of some of what's being explored to build some excitement:

For a i1, due to limited design capacity with the other pages in progress like Showcase, let's move ahead with a more text and illustration driven version before iterating to make it more robust in a i2. @SaxonF and I are working on this, building on some expert input and ideas from @marko-srb and @jasmussen ✨

[jasmussen]

Thanks for sharing that Anne.

In the above, there is stuff to love about both directions, and it seems like there will be a big potential to build this out, refine, and enhance in the future.

However to your own point around limited design capacity — lots going on and many other sections to design — it would be good to take an iterative approach. To that end, the blue-background version relies heavily on typography, chips, paragraphs, and full-wide images. That may be an easier way to start. Though I think it could also work for an even simpler expression with a white or light gray background, the blue can be a bit overwhelming.

Something to follow up on in the future is to rely less on centered text, and to bring in a little jazz energy as exists in the second one.

[annezazu]

Agreed, Joen! With a few versions to work with, we've landed on an in between to get started building it out. After @SaxonF set up the structure and content yesterday, I went in to tweak, add links, etc. Here's a walkthrough -- feedback welcomed:

https://github.com/WordPress/wporg-main-2022/assets/26996883/74c3a5e8-1dce-4c28-85c7-dcc9fa22cb01

Known things to iterate on:

• [ ] Add final "dive deep" section, including links to Developer blog on block development.
• [ ] Replace image for "complete creative control" section.
• [x] Fix spacing of links in "build without limits" section.
• [x] Ensure the list of blocks in a grid properly make a grid (right now there are gaps).

[ndiego]

So far, this is looking great. I agree with the items to iterate on and would like to see the "dive deep" section added. We also have a number of block development articles on the WordPress Developer Blog that might be good to link to in the deep dive section.

The images also need to be updated as the settings sidebar design in the images is not what's in 6.3. Of course, things change, but for the launch of this page, I feel we should be showcasing what currently exists. I also think the main image and the one below should be different from one another. Perhaps we could reuse some graphics from the 6.3 launch?

I would also update the code example to something like this:

registerBlockType( 'your-first-block/hello-world', {
    edit: function () {
        return <p>Hello world (from the editor)</p>;
    },
    save: function () {
        return <p>Hello world (from the frontend)</p>;
    },
} );

The block slug was not very friendly, and there were some extra spaces here and there.

[annezazu]

We also have a number of block development articles on the WordPress Developer Blog that might be good to link to in the deep dive section.

Great thinking. Updated my prior comment to include having a link for that so I don't forget! Agreed on the images. I have a feeling they might just be filler for now and thank you for updating the code snippet!

[SaxonF]

Spent some more time in the editor today working on this page. You can see where I ended up below.

https://github.com/WordPress/wporg-main-2022/assets/1072756/4a1c0695-694c-4761-9c91-e0e2e38ebb56

I made a few changes (consider these suggestions)

• Moved developer section to the bottom
• Updated the copy in the hero to explain what blocks are used for and touch on the developer aspect (open standard)
• Merged the section "WordPress` secret power" with "Build without limits" as it felt redundant. I think this section could still use some copy refinements to more concisely explain what blocks are (beyond the hero section) e.g. "Every element on a WordPress site is a block behind the scenes, from page headings to buttons to a post's table of contents. Blocks can be stuck together, modified, or extended. They give site owners the power to edit every aspect of their site, all without touching code."
• Added a patterns section to explain how you can combine blocks to create and share endless amount of permutations in the form of patterns
• The hero image/video is meant to represent the style book. Consider what's there a placeholder as I think it would be nice to show less typography and more buttons, images etc.

It will probably require a little bit of custom code to get things working right if we did want to go with a layout like this. If I can pair with a developer for a half a day who has deploy permissions I'm sure we could get something out within the day.

[annezazu]

Jumped back in today to keep us going with the following changes:

• Light rearranging of sections to emphasize blocks.
• Removed call to action for the WordPress section to limit the number of links.
• Rephrased and updated the links for the "only the beginning" section.
• Added icons in for each block exported from figma.
• @richptabor helped out with a patterns visual using patterns from the directory.
• Took an early visual from a different design and added it to the same background color of the original header and reverted back to that header to avoid the autoplay video for this page.

@ryelle kindly did an accessibility review and @SaxonF is sweeping through to spiffy up the remaining items (spacing and changing up the layout of the middle sections that currently match). Hopefully, we can ship today/tomorrow:

I'll write a post on Make Meta when we're good to go.

[annezazu]

We can close this issue out with https://wordpress.org/blocks/ now live (I don't have access to do so). Thank you to everyone who helped move this forward. I'm working on a Make Meta post now and will link to this.

[alexstine]

In the future, could we please get checks from the Accessibility Team for new pages or even major updates go live? This page is mostly perfect, nice job @ryelle , but there are a couple improvements we probably could have made before pushing this out the door.

Are these mostly code related or was this page built in Gutenberg? I'll open some follow-up issues soon.

Thanks.

[courtneyr-dev]

I see black buttons with black text on them. I can only see links if I highlight the text. https://wordpress.org/Blocks/

[ndiego]

I see black buttons with black text on them. I can only see links if I highlight the text. https://wordpress.org/Blocks/

I am not sure why https://wordpress.org/Blocks/ leads to a half-broken page, but the correct page is available https://wordpress.org/blocks/. @ryelle any ideas on link with the capital "B".

[ndiego]

Are these mostly code related or was this page built in Gutenberg? I'll open some follow-up issues soon.

@alexstine this page was built in the Editor. Thanks for spotting the issue with the <mark> in the Code block. This will be tackled first thing next week, as I mentioned in #311

[courtneyr-dev]

@ndiego Live chat in #meta Slack reveals that the theme loads in for lowercase vs upper. A contributor with access is exploring if we can force all links to lowercase. The title of the post on Meta being wrapped into the click to tweet button may be at fault. But there are guidelines about capitalization here at play as well. We should title it per the guidelines, but also the click to share is where this went sideways.

[courtneyr-dev]

Issue on the capital B over here https://meta.trac.wordpress.org/ticket/7204

[annezazu]

For anyone following along, this new tracking issue for a first iteration can be found here: https://github.com/WordPress/wporg-main-2022/issues/318