Gutenberg Phase 2 Friday Design Update #52

Happy Friday, everyone! I’ve got some interesting design updates today regarding full-site editing with 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/.

Page & Template Navigation

Initially, I had assumed the two dropdowns in the middle of the top toolbar were primarily for navigating between pages or templates. Turns out we are going to try another direction. Matias expressed an interest to utilize these two dropdowns as a way to modify the page or template – not necessarily for navigation. So something more like this:

So where does navigation live? I hear you asking. This can happen in two different places. First, the new “W” option that slides open the wp-admin which @shaunandrews has been exploring.

The second works similarly to the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. Users would be able to use a modifier key + click on a navigation item in the page to jump to that page. Or there may be a way to click the menu item and click the link appended to it like in Google docs.

The Navigator

The Navigator is getting some revisions lately. We are adding movers to the blocks and will add the ability for dragging and dropping. There’s even some talk about adding an ellipses menu for more options. With these additions, the Navigator is becoming a significant way to work with your content. @michael-arestad explored the Navigator as a persistent slideout panel similarly to the outline panel in Google docs.

Template parts & Patterns

The relationship between template parts and patterns does leave one feeling a bit confused because they are so similar. One defining difference is that template parts are global and patterns are local, but what happens when we start talking about HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and Footer patterns? Yesterday, @michael-arestad brought up that template parts are really just containers that hold patterns. This means we don’t need another tab in the Inserter for template parts! Basically, when editing a Header template part, the user will see Header patterns appear first in the Inserter.

This means that categories for Patterns will definitely include Headers, and Footers among other things.

Building templates

The last thing today was about building templates. Figuring out this UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. flow is important. Right now we are leaning toward a flow that includes some sort of step process that provides a skeleton for users to click and manipulate. Imagine creating a new template and seeing a screen that already lays out a Header, Content area, and Footer. Clicking on the Content area provides an option of a SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. or not. This is still just being thought through… nothing solid yet.


Get involved

Now is a great time to get involved. While the work on this project is intense, it is 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, contribute, and leave feedback.

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

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #51

Happy Friday! 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/ 8.0 just dropped this last Wednesday. This release included the new Inserter which now contains Patterns.

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

Probably one of the most significant updates to Gutenberg’s 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. in relation to the G2 changes is how the Inserter works now. Not only does it slide out from the left side instead of as a popover, but it also includes Patterns!

Navigation block

Looking at redesigning the Navigation block placeholder screen to allow for existing menus to be selected.

There’s also lots of exploration around the subnav.

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!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #50

Welcome to the 50th 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/ design update y’all!

With that, here’s a video of the full site editing experience from @matveb during the WPBlock Talk online event.

Seeing this come together is amazing! Watch Matias navigate through the experience and easily build a site and edit crucial content within the same interface.

It’s blocks all the way down.

Work in progress

Dashicons

Gutenberg now has its own icons package. This allows Gutenberg to use SVG icons when needed without requiring an entire sprite of icons to load as Dashicons does.

This being said, there’s an interesting post from Joen about the future of Dashicons. Spoiler, they are not going away and will remain a vital part of WordPress. They’re just getting another 30-something icons and then moving to a maintenance mode wherein they will no longer accept further requests.


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!

#design, #gutenberg-weekly, #phase-2

Design meeting notes April 22, 2020

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the 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 by following the instructions in our handbook.

We’re still looking for notetakers! Leave a comment if you’re interested.

@mapk updates us on 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/ developments. New interest is gathering around the drag and drop experience, that’s great. And work is being done to tighten up other areas too while full site editing progresses, that’s good to hear.

@timothybjacobs put in a request for design for a new Site Health feature, the recovery mode link. It should be a straightfoward addition to the login screen to mock up for them. Any designers up for that, jump into the linked issue and help out!

Next, we discussed WCEU 2020 contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.. To make everything run smoothly in a remote setting, we need a few things:

  • Info in the handbook for new contributors. There is some info there, but mostly for organizers, not new contributors. Something like this. This could be looked at during the handbook restructuring proposed last week.
  • Office hours between 25 May and 3 June. People can come to the #design channel on Slack and get onboarded before contributor day starts. @ibdz and @estelaris offered to help out there.
  • Ideas for tasks. One suggestions was to simulate a triage and walk through open issues. A call for that will go out soon.

We should also add an archive for the previous Show and Tell zoom meetings to our Handbook.

Next week is another Show and Tell zoom meeting instead of our regular meeting, let us know in the comments if you have something to show off that you’re working on!

#meeting-notes

Gutenberg Phase 2 Friday Design Update #49

In an effort to share the most recent design work for 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/, I’m pinging designers to get their latest explorations and visuals to share them with anyone who reads these updates. I am hoping this provides more insight into the work as it is happening. If you have got something to add, please share it below!

The W

With the introduction of the fullscreen default mode in 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, @shaunandrews has been exploring interactions to help surface the admin menu.

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

The Block Inserter

The Block Inserter has also undergone some redesigns. Rather than a popover as you’re familiar with, it’s now a slideout from the left side. It also now includes the Block Patterns which used to be on the other side of the interface. It’s looking amazing!

Issue: https://github.com/WordPress/gutenberg/issues/21080
PR: https://github.com/WordPress/gutenberg/pull/20951

Full site editing

The above is a lot already, but I wanted to remind everyone about the issues getting the most attention right now from designers.

Site navigation when full site editing
https://github.com/WordPress/gutenberg/issues/19204

Site Editing: home page indicator
https://github.com/WordPress/gutenberg/issues/20788

The “Update” flow for entities and templates should allow creating variations
https://github.com/WordPress/gutenberg/issues/20474

Incorporate “Add new page” flow into “Add template” flow
https://github.com/WordPress/gutenberg/issues/20473

Menu screen

One recent addition to the Gutenberg 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 is the introduction of the Navigation block in the Menu screen. This is a response to the outlined focus of Phase 2.


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!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #48

Howdy! If you’ve been following along, 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 release is pushed back a week and will be coming out next Wednesday, April 15th. In the interim, the design updates are as follows.

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. Library/Inserter

Next steps on the Inserter: https://github.com/WordPress/gutenberg/issues/21080

Recent designs for the Inserter are focused on figuring out how to add Block Patterns, and eventually Template-parts. Basically, if everything is a block, then having one unified way to add these blocks feels right.

Inserter animation

Full site editing

Take a look at what’s coming!

Multi-entity saving
This gif below gives some insight into the saving process of multiple elements: templates, template-parts, content – all from one view.

https://github.com/WordPress/gutenberg/issues/20421#issuecomment-611102784

Creating a template-part
A look at how creating a template-part might work in the context of full site editing.

https://github.com/WordPress/gutenberg/issues/21526#issue-597583360

Adding a template-part
Imagine opening the Inserter and adding a HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. to your page, or swapping out your current Header with another one.

https://github.com/WordPress/gutenberg/issues/21218#issuecomment-611752344

Follow along!

In an effort to surface what the team is working on week by week, we’re labeling issues on the project boards with [Priority] High 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/ and moving them to an “in progress” column for easy identification.

In Progress for Patterns

In Progress for FSE


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!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #47

Howdy and happy Friday, everyone! How is 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/ coming along you ask? Version 7.8 was just released on Wednesday and focused mostly on the new 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. refinements. This release included:

  • Adds a current menu class to the Navigation 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..
  • Adds a block outline when interacting with the block toolbar.
  • Polish around some icons.
  • Polish around the Date Picker.
  • and more…

Full site editing

Full site editing has seen some more design work recently. The extra effort reexamining the UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. and having multiple people review design work is paying off! I’m super impressed with the recent work being done in light of other site building software I’ve been testing.

Placeholder blocks
Currently, templates need some way to show where certain blocks would exist, without necessarily showing actual content in them. Thus, we’ve been exploring placeholder blocks for many of the Post blocks like: Post Title, Post Author, Post Date, Post Comments, etc. These are being refined in this PR. https://github.com/WordPress/gutenberg/issues/19256#issuecomment-604765696

A few UX flows are ready for development. How exciting!

Block Patterns

Patterns took a bit of a pivot recently. Figuring out imagery to include in the software is difficult. Do we want pictures of mountains? Or maybe natural patterns? Cars? We’re not settled on this. So rather than holding up our patterns, we’re working to build a few really nicely designed text-based patterns for now. These patterns should be customizable by themes, and not include custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. that makes for a difficult integration into websites.

New icons

There was a recent PR submitted that include several new icons that conform to the new G2 UI and the new icons being implemented throughout the interface. https://github.com/WordPress/gutenberg/pull/21209


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!

#design, #gutenberg-weekly, #phase-2

Show and tell meeting for Wednesday, March 25th

This week something different is going to happen and instead of the weekly meeting, there is going to be a social zoom show and tell at 20:00 UTC. The format of this is as follows:

  • Greetings and welcome: a chance for us all to say hi.
  • Sharing time
    • @joen will share what is happening with the new iterations on 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/ interface.

You’ll noticed there is only one thing lined up to share, that’s where you come in! Do you have something you are working on to share, it can be Gutenberg, coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., 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. or even a demo of something cool.

Maybe it’s something you want feedback on that you are contributing, or perhaps it’s something you are working on and would love to bring into the project. Now is your time to share! To share something, just add a comment here and you’re on the agenda!

I am really looking forward to this new format and I hope everyone else is. The video link will be shared in #design on 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/. just before. Make sure you download zoom before. There will also be a recording, posted so you can watch async if unable to make the time.

#agenda #show-and-tell

Gutenberg Phase 2 Friday Design Update #46

I hope you all are staying safe out there in the world today! This week in 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/ Design has several things going on. Let’s address them below.

Full site editing

Overview link: https://github.com/WordPress/gutenberg/issues/20791

Multi-entity saving has an interesting prototype uploaded just yesterday.

Multi-entity saving in sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.

Or another take on it in a dialog modal.

Multi-entity saving in modal

I ran a short Twitter poll that asked how people would like to be informed about saving certain parts of their site. Based on those that answered the poll, the preference for a multi-editing save at the end of all their edits. We don’t use Twitter polls to direct our design decisions, but they can help inform them.

Lots of discussion and explorations are continuing to go into the Toolbar in the Editor. This particular mockup helps convey where the designs are leading currently.

Global styles

Overview link: https://github.com/WordPress/gutenberg/issues/20331

The global styles minimum viable productMinimum 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 (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) includes some basic elements that will help anyone edit their styles across all pages/posts. These elements include: font-family, font-scale, line-height, and link colors. This issue defines how this may look: https://github.com/WordPress/gutenberg/issues/20367

Global styles in sidebar

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

The block pattern work is already included in the current 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 right now as an MVP. We’re working to add more patterns that are great for common layouts that many can take advantage of. Once more patterns are added, work will continue on the Block Library to include them there as well.

Testimonials pattern

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!

#design, #gutenberg-weekly, #phase-2

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