Getting started with block themes, playground, create-block tool and Block Data API—Weekend Edition #252

Glen Scarborough - A rainy night in Munich

Howdy, howdy!

Next week, we will head back to to Munich to take over our new apartment and start to explore the new neighborhood on foot. While getting situated, still provisionally, we will patiently wait until our furniture to arrive from Miami. The weather is starting to get warmer, too. Everything is new. Good times.

I also will start migrating the Gutenberg Times website to a block theme, and hopefully can take you along with my lessons learned and some tips to avoid the pitfalls. Maybe. If you already made the switch with one of your sites, email me to pauli@gutenbergtimes.com. I really would like to learn more.

Before, I can start this next project, I will work on the next Gutenberg plugin release. Stay tuned.

Yours, 💕
Birgit

Table of Contents

Developing Gutenberg and WordPress

The Gutenberg plugin 15.7 release candidate (RC1) is now available for testing.

Among other things, you could try out the following new features.

Make sure to file a bug report if you find something quirky.

WordPress Playground

During this month’s Developer Hours, Adam Zieliński will introduce the new WordPress Playground tool.

It runs WordPress in the browser without the need for PHP, Apache, or MySQL.

In this presentation, Zieliński, a member of the development team that created WordPress Playground, will introduce this exciting new implementation and demonstrate it. He will also explain the technologies that make the magic happen, and run through a variety of scenarios and use cases. There will be ample time for Q & A. You can register via Meetup.

You can check out a live demo of WordPress Playground on the WordPress Developer site.

Earlier this month, Zieliński posted a few In-Browser WordPress Tech Demos: WordPress Development with WordPress Playground, with a call for contributors. If you are interested, join the WP Slack channel #meta-playground

Joen Asmussen highlighted in his Design Share: Mar 27-Apr 21 the work of the WordPress Design team on

  • Safe content-browsing workflow for Openverse
  • General polish for modals
  • New take on the top toolbar options
  • the WordPress Sitemap
  • Inspector Alignment Tools
  • a condensed revision of the padding control
  • List View scrolling
  • Inspector Site Logo Management
  • Fresh mockup for Font Management tools
  • WP.org Two-factor authentication & WordPress.org login
  • Focus style in search
  • Command K Search (experimental)
  • Template vs. content editing

It’s a long list of some outstanding work! Check it out. All items are accompanied by a screenshot, a brief description and the link to the GitHub issue, to learn more and chime in.

Tammy Lister, early design lead of Gutenberg, and published the 10 steps on how to embrace Gutenberg as a product. Step One she writes: “One of the biggest questions would be ‘What is Gutenberg’. I tend to push back around that and say it’s WordPress. The system, the mindset, and the approach have been around for so long now and have been a part of the core development – after all, we are through phase two and starting phase three, Collaboration. So, this is step one to embracing Gutenberg as a product; see it as nothing different from WordPress.” Curious? There are nine more to go!

🎙️ Latest episode: Gutenberg Changelog #93 – Gutenberg 17.1, Command Palette, Data Views and Grid Layout – a chat with Isabel Brison

Plugins, Themes, and Tools for #nocode site builders and owners

Jamie Marsland has a great video posted on WordPress TV called: Rapid Website Recreation. Within this 15-minute demo, he shows you how he rebuilt a photographer’s website using the Site editor in WordPress.

Mike McAlister has announced the release of his new block theme Ollie and shared details and motivation in Introducing the Ollie WordPress block theme. McAlister wrote: “One of the most powerful features of the Ollie block theme is that it brings together all the new WordPress site building features in a cohesive experience. Site editor, global styles, patterns, templates, template parts — Ollie supports all of these features, and they’re all beautifully designed and super easy to edit and customize.”

Sarah Gooding gave it a spin and reviewed for the WPTavern: Ollie Block Theme Now in Public Beta. “It is a beautiful, multipurpose theme of the high caliber one might expect from McAlister, a veteran developer whose past products were well known for their minimalist and clean design.” she wrote.

Theme Development for Full Site Editing and Blocks

Earlier this week, I was asked: “For new block theme enthusiast, how can they get started?” I collected a list of starting points:

There are three Learn WordPress courses:

If you would rather not start from scratch but learn how to change your site with the site editor:

On the Developer blog, Daisy Olsen published a Block theme resources roundup. Since then, additional posts became available:

The WordPress Themes team is working on an overhaul of the Theme Handbook. You can follow along on the Make Theme blog and the theme team meetings.

 “Keeping up with Gutenberg – Index 2022” 
A chronological list of the WordPress Make Blog posts from various teams involved in Gutenberg development: Design, Theme Review Team, Core Editor, Core JS, Core CSS, Test and Meta team from Jan. 2021 on. Updated by yours truly. The index 2020 is here

Building Blocks and Tools for the Block editor.

Jacob Smith, WordPress VIP team, announced the beta of the Block Data API, “For many use cases, it’s helpful to access blocks in WordPress as pure JSON data instead of HTML.  Doing so eliminates the need to write parsing layers to transform markup into JSON, and to keep those translation layers up to date with every version of Gutenberg.  All of this saves developers time and effort.”, he wrote.

Well, this section almost became the exclusive Ryan Welcher’s Corner for this edition. 🙌

In his latest post on the WordPress Developer Blog, Ryan Welcher outlined How webpack and WordPress packages interact. You learn more about the connection between @wordpress/scripts and the build process, and why it streamlines that build process for WordPress blocks.

Nathan Wrigley had Ryan Welcher on his WPTavern Jukebox podcast: Ryan Welcher on Using the create-block Tool to Quickly Scaffold a New Block Plugin . They discussed what you can expect from the create-block tool, and the prior knowledge that you’ll need to have once the tool has you up and running.

I have been using the create block command line tool to spin up a new block projects. It also helps you package your new block into a plugin and test it for the single block plugin repository. You can also have multiple blocks in one block. You just want to study about the commands, and how they can make your life easier. The documentation pages are available in the block editor handbook: @wordpress/create-block. Once yours start using it, you probably would also be interested in creating a custom templates to add to the scaffolding tool. Follow along with the @wordpress/create-block-tutorial-template

Thursdays, you can catch Ryan Welcher on Twitch live coding. This week’s show is still available on Twitch: Reviewing Gutenberg 15.6 features | Bring me your issues! For persistency, all streamed videos will also be uploaded to YouTube in due time.

Need a plugin .zip from Gutenberg’s master branch?
Gutenberg Times provides daily build for testing and review.
Have you been using it? Hit reply and let me know.

GitHub all releases

Questions? Suggestions? Ideas? Don’t hesitate to send them via email or send me a message on WordPress Slack or Twitter @bph.

For questions to be answered on the Gutenberg Changelog, send them to changelog@gutenbergtimes.com

Featured Image: Glen Scarborough – A rainy night in Munich

Don’t want to miss the next Weekend Edition?

We hate spam, too and won’t give your email address to anyone except Mailchimp to send out our Weekend Edition

Thanks for subscribing.

Related Posts