Gutenberg Phase 2 Friday Design Update #45

It’s Friday again! If you’re following along with the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ releases, you’ll notice that Gutenberg 7.7 was released this week and with it came a newly designed interface creatively named “G2.” 😉 This redesign provides higher contrast, less UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. visuals, and new icons including a streamlined and pleasant experience.

I recently shared this interface in a diagram layout identifying the various parts. This file can also be found in Figma.

Figma file: https://www.figma.com/file/WbvD9Z04UZYKwEDlzJtJPg/Gutenberg-Interface?node-id=0%3A1

Figma

Speaking about Figma, let’s dive into this a bit.

If you’re not familiar with Figma, it’s a design tool that allows real-time collaboration. There’s no need to download anything because it lives in the cloud. 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/ has an account where the Design Team keeps all our libraries, and where the designers do most, if not all, of their work. It’s open for anyone to join and use.

Figma

In fact, if you’re looking to help contribute to Gutenberg design work, especially in light of the new G2 UI updates, here’s how you might go about finding things.

If you’ve haven’t been added to the Figma account, you can ask for access in the Making WordPress #design SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel. Once you’re set up, you can browse the various files for each of the projects in the WordPress.org account. Notice there’s one specifically for Gutenberg.

Inside the Gutenberg Project is a file for G2. This file contains a number of the G2 components used in the new redesign of Gutenberg. It’s still very much a work in progress, but can help get you started quickly. Just copy and paste the parts you need into your own file.

G2 Figma file

Full Site Editing

Most, if not all, issues regarding full site editing have design work posted to them. This is great news! It provides everyone some visuals to talk through. If there are iterations needed, they remain in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ with the label “Needs Design.”

The Top Toolbar for full site editing is closing in on a solution. This is going to be the way by which users will navigate through the experience and select individual pages, templates, template parts, etc. for editing.

FSE Top Toolbar

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. Patterns

Block Patterns are also implemented in Gutenberg 7.7. Their current UI is only an MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia, but should help everyone realize the benefit of patterns in the layout of pages and posts. Lots of work is going into providing common patterns and getting this in as early as possible for testing and feedback.

Block patterns

Global Styles

Global Styles are in an MVP stage as well. While not quite yet integrated into the 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, there is a PR that can be tested.

https://github.com/WordPress/gutenberg/pull/20530

Project Boards

Full site editing: https://github.com/WordPress/gutenberg/projects/35
Block patterns: https://github.com/WordPress/gutenberg/projects/41
Global styles: https://github.com/WordPress/gutenberg/projects/40


Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

Thanks for reading, staying informed, and contributing anywhere you can!

#gutenberg-weekly, #phase-2