Testing a Gutenberg Pull Request (PR)

There is an easier way to try out a 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/ PR that does not require one to setup a local Development Environment. One can download a special version of a 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 that includes the PR one wants to test.

Here is a video I made showing how it is done. This is a great way to be able to give feedback to features as they are being worked on.

An alternative is to visit gutenberg.run and insert the PR number and sit and wait until the site has loaded up the Pull Request.

Quick start instructions.

Find a PR you want to try out.
Along the tabs just below the PR title. To the right of the active Conversation tab is the Checks tab.
Click the Checks tab.
Along the left side is 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. containing various links. Scroll until you find Build Gutenberg Plugin Zip.
Click the Build Gutenberg Plugin Zip.
Scroll to the bottom and click the gutenberg-plugin link. The Gutenberg plugin is then downloaded.
(On a Mac) Double click to unzip. There is one zip within another zip. Both are uncompressed.
Right click and choose to compress the uncompressed folder back to a zip.
Upload the Gutenberg plugin zip to a test site and test out the PR.

An automated solution is being worked on: https://github.com/WordPress/gutenberg/issues/28881

WordPress.org Patterns Directory, i2

There’s been ongoing work on the 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/ Patterns Directory since I last posted. I’ve continued to iterate on the design for the site and editor and wanted to share some updates. You can find the latest designs in Figma, along with all the past iterations and explorations.

The homepage of WordPress.org/Patterns
Examples of how individual patterns appear within the list.
Navigating multiple pages of patterns.
The pattern detail screen displays a large, interactive preview with a dropdown for adjusting the width.
When visiting the pattern editor for the first time a welcome tour walks you through the various aspects of creating patterns.
In order to avoid licensing issues or obscene/unwanted content, we’ll be restricting uploads and providing media for pattern authors to use.
The pattern editor is reminiscent of the template editor and includes a viewport width menu.
The inspector 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. includes all the various 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. information for patterns including title, description, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., and keywords.

Some notable changes since the last post:

  • The search has been made more prominent.
  • The chaotic masonry-style layout has been replaced with a more rigid grid.
  • Pattern titles are always visible.
  • Author avatars along with view and favorite counts are displayed below the pattern title.
  • The “Load more” button has been replaced with a 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. for navigating between pages.
  • The pattern preview gains a menu to adjust the width of the viewport to see how a pattern reacts at various sizes.
  • The pattern editor gets it’s own welcome tour.
  • Media uploads will be restricted, meaning patterns can only use media provided to them in the library.
  • The background color of the pattern editor now matches that 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. editors “template editing” mode.
  • The pattern editor replaces the “Preview” menu with a “Width” menu, which allows designers to set the viewportWidth property of their pattern.
  • Clicking the “Publish” button in the editor uses a multi-step modal that walks through collecting and confirming the required details (title, description, category) of a pattern.
  • My Patterns has been split into two screens; The first is for patterns you own, and the second is for patterns that you’ve favorited.

Work continues on both Github and in Figma; Please do join in the fun and help us out. If you have any thoughts or feedback feel free to drop a comment below. Thanks!

#meta, #patterns, #patterns-directory, #wordpress-org

Design Team Meeting Notes: May 12, 2021

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.

Housekeeping

  • We have an open call for note takers and triage facilitators. These both are great ways to get involved for new contributors but everyone is welcome to help out. Let us know if you are interested in the comments.
  • Contributions to the Design Team is always welcomed. Please pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @estelaris or @chaion07 and they will guide you through.

Announcements

With 5.8 well underway, we’re ready to schedule the 5.8 bug scrub sessions. These 5.8 specific ticket scrubs will happen each week until the final release. Props to @lukecarbis for publishing the Bug Scrub Schedule for 5.8.

The 5.8 Test Scrub has already taken place on May 7. Read more about that here.

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blog highlights

A Week in Core

With 32 commits the team was able to close 34 tickets, a good week! Thanks for updating us @audrasjb.

What’s next in Gutenberg? (May 2021)

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/ 10.4 introduces cool features like 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. widgets in 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., enhancements to the Site Editor, improvements to rich text placeholders, and, as always, many bug fixes as well.

CSS Custom Properties Project Update

Exciting things on the horizon for handling admin color schemes easily.

Discussion

WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. EU 2021 is fast approaching, and the marketing team asked us if we had ideas for workshops or other design team content. Currently @estelaris is communicating with @abhanonstopnewsuk and @OGlekler in regards to this. @karmatosed also suggested a Figma workshop. @ibdz said he was going to reach out to @joen about collaborating on the workshop.

If you have more ideas or are interested in helping out then please let the team know or message either @estelaris or @chaion07 on Slack.

Further reading

#meeting-notes

Design Team Meeting Agenda for May 12, 2021

The Weekly Chat for Make WordPress Global Design will take place on Wednesday, May 12, 2021, 18:00 UTC in the #design channel of the WordPress Slack. 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.

Here’s the list of Agenda items:

  1. Announcements
  2. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
  3. Updates
  4. Discussion: Workshop and content idea for WCEU 2021
  5. Did you read these?
  6. Open floor

This Meeting is held in the #design channel in the Making WordPress Slack Workspace.Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#agenda, #design-agenda, #meeting-agenda

X-post: CSS Custom Properties Project Update

X-post from +make.wordpress.org/core: CSS Custom Properties Project Update

Summary of Monthly Design Team ‘Show and Tell’: April 2021

This is a summary of the Monthly Show and Tell that happens on the last Wednesdays each month. You can read the details on our Slack channel and for a full discussion watch the video below. 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.

Attendance: @chaion07, @javiarce, @paaljoachim, @critterverse, @karmatosed, @shaunandrews, @ibdz, @jameskoster, @ashiquzzaman are among the ones who attended the Zoom meeting. We’ve also had a productive conversation over Slack on the topics that were discussed during the meeting.

Exploration on the Document Attribute Side Toolbar by @jameskoster

James shared his exploration of the 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. inspector among the many things he is currently working on. Being inspired by this PR he is working on proposing a change for Post/Page Title to the top including other elements of the inspector. He’s tried a couple of times According to him, the benefits include:

  • Quick access to the page title
  • Update templates (adding this to the sidebar is quite challenging)
  • General information architecture on the sidebar is detrimental in its own way
  • We use 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. attributes more than the post attributes so having it moved to the top can be an advantage
  • Gives more real estate for working with the post attributes
  • General portability is more.

Brainstorming with Reusable Blocks by @paaljoachim

Paal shared his brainstorming ideas in relation to Reusable Blocks with features such as:

  • Discard save
  • Convert to regular blocks
  • Click through; and
  • other features & design aspects.

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/ Labs’ idea exploration by @critterverse and @javiarce

In relation to this issue on GitHub, Channing has been collaborating with Javier with the idea of ‘Gutenberg Labs’. This has everything to do with the experiment window on 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. We have been having discussions on the design channel about how this can work out. Channing & Javier have been collecting early ideas on where this can go. They began with the WordPress About page for releases to work with as a reference point. Similar references include:

  • 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/ Feature Preview (Notifications BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.)
  • GMail Labs (Currently Advanced Tab in GMail)
  • Figma Beta
  • Tumblr Labs

They also showed the working file using Figma with some visual references in the form of look and feel inspirations including abstract ui and tools.

Recording: (For best results watch the video on YouTube)

Design Show and Tell April 2021 (on YouTube)

Please go through the recording to learn more on the ideas shared during the Show and Tell meeting. We look forward to having you with the Design Team. The next Show and Tell is set to take place on the Wednesday, May 26, 2021, 18:00 UTC. Thank you!

#meeting-summary, #meetings, #show-and-tell

Design Team Meeting Agenda for May 5, 2021

The Weekly Chat for Make WordPress Global Design will take place on Wednesday, May 05, 2021, 18:00 UTC in the #design channel of the WordPress Slack. 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.

Here’s the list of Agenda items:

  1. Announcements
    • WordPress 5.8 Development Cycle
    • Getting Started with the Figma WordPress Design Library
    • Design Team April 2021 ‘Show and Tell’ Meeting
    • WCEU 2021 dates changed
  2. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
  3. Updates
  4. Discussion
    • Design Lead Role for WordPress Releases
  5. Did you read these?
  6. Open floor

This Meeting is held in the #design channel in the Making WordPress Slack Workspace.Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#design-agenda, #meeting-agenda, #meetings

X-post: Upcoming FSE Outreach Program Schedule

X-comment from +make.wordpress.org/test: Comment on Upcoming FSE Outreach Program Schedule

Design team Show and Tell meeting on 28 April 2021

As is the last Wednesday of the month, we will have a Show & Tell. This is a Zoom meeting where contributors have the opportunity to share their work and ask for feedback from the design team or ask question to the design team.

Zoom link will be posted on 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/. #design channel and meeting will be recorded for those who cannot attend. A summary will also be posted in lieu of meeting notes.

If you would like to share your work, show up to the call and raise your hand or let us know in the comments.

#meeting-agenda

Design Team Meeting Notes: April 21, 2021

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.

Housekeeping

  • We have an open call for note-takers and triage facilitators. These both are great ways to get involved for new contributors but everyone is welcome to help out. Let us know if you are interested in the comments. Props to @ashiquzzaman for documenting the notes for the last meeting.
  • Contributions to the Design Team is always welcomed. Please pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @estelaris or @chaion07 and they will guide you through.
  • WordPress 5.7.1 is available!

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blog highlights

A week in core

With 26 commits the team was able to close 37 tickets, a good week! Thanks for updating us @audrasjb.

What’s new in Gutenberg 10.4

Props to @priethor for letting us know what’s in the latest 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/ release. You can also find information on areas to be aware of and how you can get involved.

Full Site Editing Go/No Go

@chanthaboune updates us on the decision to include FSE in the 5.8 release. @matveb gave a 1.5 hour demo of the current state of FSE, be sure to check that out, and read up on the next steps.

Updates

Google released their much-debated FLoC feature in the Chrome browser recently, and there is a proposal for WordPress to disable it by default. Read up on this hot topic here.

And finally, our monthly Show and Tell meeting is taking place next week. If you are working on something and would like to share with the team then please ping either @estelaris or @chaion07 over Slack.

Open floor

@paaljoachim is focusing on improving the FSE page template. It still needs some work but is getting there. He will bring it to next week’s Show and Tell meeting to review.

@ibdz is working on an update about his work on the Figma design libraries, which he will share more about next week.

@chrisgaitanaris suggested a new community outreach program to let users vote on which Gutenberg features should be worked on next. We pointed him towards the community team and the marketing team.

#meeting-notes

Design Meeting Agenda for April 21, 2021

The Weekly Chat for Make WordPress Global Design will take place on Wednesday, April 21, 2021, 18:00 UTC in the #design channel of the WordPress Slack. 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.

Here’s the list of Agenda items:

  • Housekeeping
  • Announcement
    • WordPress 5.7.1 Security and Maintenance Release
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
    • A Week in Core
    • What’s New 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/ 10.4
    • Full Site Editing Go/No Go | April 14, 2021
    • Full Site Editing Go/No Go: Next steps
  • Update
    • Proposal: Treat FLoC like a security concern
  • Open floor

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#agenda, #meeting-agenda