Paal Joachim Romdahl 5:00 pm on March 3, 2021  

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 Github Gutenberg PR you want to test 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.

Add a comment to the PR asking for the special Build Gutenberg Plugin Zip if you have not located it in the Checks tab.

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

If you happen to come across any errors after activating the special Gutenberg plugin. Then there might be errors present. One can turn off these errors by adding the following to the wp-config.php file:
https://wordpress.org/support/article/debugging-in-wordpress/#example-wp-config-php-for-debugging
(It would also be great to report the errors noticed.

// Disable display of errors and warnings
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );


Kjell Reigstad 12:57 pm on July 29, 2021  

Initial Patterns for the Patterns Directory: Launched!

As reported over on the Meta blog, the 85 patterns the community designed for launch with the Pattern Directory are now live! 🎉

A few examples of our new community-designed 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.

Thank you to everyone who submitted, refined, and helped launch this set. I’m thrilled that users have such a broad set of high-quality patterns to choose from at launch, and I look forward to iterating and growing the collection over time. 

Now that we’re post-launch, we’re going to close submission of general patterns to this initial collection. The next phase of development for the directory will allow anyone to submit their own patterns directly, so please hold onto your ideas for then!

In the meantime, the design team may add a few more patterns from time to time (similar to how default patterns were occasionally added to 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/ before). You can keep an eye on the Pattern Directory’s GitHub repository for any activity there. Also, if you notice a bug with one of the existing 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, please file an issue and let folks know! 

Thanks again to the contributors who made these patterns happen: @anariel-design, @beafialho, @bgardner, @cavalierlife, @chrislema, @circlecube, @critterverse, @greenshady, @jameskoster, @jcasabona, @karmatosed, @kellychoffman, @kjellr, @laxmariappan, @mahvash-fatima, @melchoyce, @richtabor, @schutzsmith, @tajim, @webmandesign, @wetah

Estela Rueda 4:48 pm on July 28, 2021  

Monthly design Show and Tell – July 2021

The Weekly Chat for design will take place Today, 28th July 2021, 16: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.

This week’s meeting is a show and tell so come and join us in the zoom, the link will be shared in the design channel. If you’ve got anything you’d like to talk about just comment here or bring along the topic to the meeting.

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

critterverse 3:34 pm on July 27, 2021
Tags: , , ,   

Widgets in WordPress 5.8 and Beyond

WordPress 5.8 (released last week 🎉) brings the power of 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/ blocks to widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas — which means highly customizable layout and styling options, and a more WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editing experience. I made a test site based on oldie-but-goodie Twenty Sixteen theme, which has 3 separate widget areas to work with. In this post, I’ll highlight a few cool things that are now possible to do with your widgets, and a take a look at where things may be heading next.

Zoomed-out view of a single post with one sidebar widget area and two footer widget areas. The site content is about Marine Park Salt Marsh. There are is a “List view” of blocks floating next to each widget area showing how the design is constructed.

Create interesting visual effects with overlapping layouts and Duotone images

Appearance-wise, users have a lot more control over widgets areas than ever before — especially through the use of blocks with tons of customization options like the Cover and Image 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.. Here’s what I’m able to create in the classic widgets editor (above) versus what I’m able to create in the new block-based widget editor (below).

Intersperse widgets and custom code throughout your visual designs

Container blocks like Cover and Columns make it really easy to weave dynamic or interactive elements into your designs. While dynamic/interactive elements are sort of a given for many types of widgets, the block versions of widgets can be easily wrapped and layered within container blocks to more fully integrate them into your layout.

In the example below, I tried placing a Search block in front of a Cover block, which creates a nice layered effect. I also tried inserting Custom HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. blocks within a Columns block to display different messaging depending on the time of day. (jQuery script here)

Use traditional widget layouts (or not) with lots of flexibility over title and structure

Classic widgets have always had a lockup that includes a widget title. One cool thing about having blocks in widget areas is that you have complete flexibility over how titles appear. For example, you might choose to have a title over every widget, you might only want one title at the top of each widget area, or your design might not need titles at all.

Note: Some themes, like Twenty Twenty-One, are designed to flow content horizontally within widget areas. If you’re having trouble with a theme splitting your layout into columns, you could try keeping the lockup together by containing it within a Group block.

Side-by-side comparison of List view of a Sidebar widget area with and without grouped/nested lockups.
Ungrouped layouts (left) versus grouped layouts (right)

Copy & paste existing layouts from the WordPress Pattern Directory

While patterns haven’t been fully integrated into the widget editors yet, one thing you can do is copy and paste patterns from the game-changing new WordPress Pattern Directory into your site’s widget areas. I used this horizontal call to action pattern from the directory almost exactly as is, with minor color and copy adjustments:

Footer widget area with a black box that reads, “Become a monthly Patron” with paragraph text and a “Join now” button in a separate column. A painted image of a waves hitting rocks is directly below with no space between.
FYI: Patterns have not been curated for or integrated into widget areas yet, so you may run into some unexpected behavior!

Inserting widget patterns

There is some early discussions about how patterns can begin to be integrated into the widget editors in GitHub issue #26170. Some of the conversation has been around introducing a Patterns tab into the inserter, which would allow users to browse patterns the same way as in the post editor.

Three side-by-side views of the inserter: in the first, the Search bar is focused and “text” block icons displayed. In the second, the Patterns tab is selected and patterns are shown in a list. In the third, the drop down menu open with the “Sidebar” option hovered/active.

A couple of goals for introducing pattern insertion 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. into the widget editors are:

  • Display patterns that make sense to use in a constrained 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 footer area, depending on the type of widget area being edited.
  • Surface patterns in a extra discoverable way for users (including classic widget users who want to quickly recreate a traditional layout).

Based on this, I’ve been exploring ways that patterns could be surfaced in the quick inserter as a default/resting state as soon as the popover is opened:

Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black “browse all” button that stretches across the bottom of the popover.
Currently, patterns are surfaced below quick inserter options after the user begins typing in the search box. Perhaps a couple of patterns could be visible by default.
Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black “browse all” button that stretches across the bottom of the popover.
The quick insterter could display a list of patterns that show a fly-out preview when hovered. A similar style has previously been explored for the block switcher menu.
Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black “browse all” button that stretches across the bottom of the popover.
The quick inserter could contain a single large preview with carousel navigation to browse through patterns. This mimics the pattern placeholder setup UI.

Thoughts?

How would you like to see patterns incorporated into the new block-based widget editors? Join the discussion by opening a new issue on GitHub or commenting below!

#blocks, #design, #gutenberg, #widgets

Javier Arce 3:25 pm on July 13, 2021
Tags: , , , , site editor   

A Walk Around… The Search Block

Welcome to a new installment of the series where I look at the current state of 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/ blocks and propose improvements.

In my previous post, I talked about the Table 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.. This time I’ll be discussing another important component: the Search block.

Since search is a central activity for blogs and other sites that index content, it’s essential to give users the ability to customize the appearance of their search bars so that they don’t look alien or feel disconnected from the design of their sites.

The Search block options are pretty limited at the moment, and the block can only offer a short range of styles. The good news is that just by adding a small group of settings (many of which already exist for other blocks), users will be able to customize their search boxes in many different ways:

With that in mind, let’s have a look at this block.

Toolbar

The current toolbar has three main buttons that perform the following actions:

  • Showing and hiding the search label.
  • Changing the position of the search button (outside, inside, or no button).
  • Toggling between a search button with text or an icon.

To be more consistent with the way other blocks present the options and also to simplify the toolbar, we could move the second and third buttons (“Change button position” and “Use the button with icon”) from the toolbar to 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.. In the case of “Use button with icon”, I think this is not a primary action, and also the icon itself doesn’t convey the actual operation behind the button.

We could also add a setting to modify the alignment of the text inside the input field and the position of the text button. Controlling the alignment would allow users to create bars like these ones:

For languages that use right to left scripts like Arabic, Hebrew, or Urdu, we automatically switch the alignment of the text and the position of the search button.

To allow having styles that use the writing direction defined by the language, we could offer four alignment options:

  • Default (it uses the direction of the selected language)
  • Left
  • Center
  • Right

The last three options would overwrite the direction defined by the selected language.

Sidebars

Let’s review how the sidebar could look like and the sections that it would include:

Styles

This section would replace the “Change button position” that we removed from the sidebar, and add a new option: Button only. There’s an open issue that discusses this option here.

When users add a new search bar, they’ll get the default setting (Button outside), but will have the other styles visible on their sidebars for a quick switch.

Display settings

This section would allow adjusting the general width of the block (a feature that is currently present) and also toggling the following settings:

  • The icon inside the search input.
  • The icon inside the search button.

Here is a list of variations that those two settings would produce:

Spacing

In this section, users could change the padding of the item and also affect the spacing (the distance between the button and the input field).

There’s an interesting conversation around contextual padding controls in this GitHub issue, which could probably be applied to this block.

Depending on the style (button outside or button inside) the padding could behave differently:

  • If the style button outside is selected, the padding will affect both the input field and the button.
  • If the style button inside is selected, the padding will affect the outermost element.

The spacing setting could also be adjusted using a handle in the block itself. The control between the input field and the button would change the spacing, whereas the control in the button would allow resizing the whole block (which is the current behaviour).

Border

I think we should allow users to modify the border of the input field and the button independently for each of the four sides. That would give them great control to create different styles. For instance, they could create search bars with just a bottom border.

There’s an open PR that deals with border color support and border style here.

Typography

Depending on what element is selected, the typography section would affect the font and style of the input field, the text button, or the label.

Color

Like in the typography section, this one would affect the text and background colors of both the input and the button (again, depending on the selection).

As I mentioned at the beginning of this post, if we implement these changes, users will be able to customize their search bars in many different and exciting ways and have more control over the design of their sites.

You can check all the designs I presented in this post in this Figma file and follow the development status in this GitHub search.

And as always, if you have any thoughts or feedback for this block, please drop a comment below. Thank you!

#blocks, #design, #gutenberg, #search, #site-editor

Tammie Lister 9:35 am on July 9, 2021
Tags:   

Design Team Meeting Notes: July 7, 2021

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel. 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.

The main focus was an open floor but the following is a summary of topics including links shared.

  • About page was asked to have feedback.
  • @richtabor provided a range of 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/ issues we dove into discussing various things around the editor.
  • The first of these was closing block styles proposed by @michael-arestad (who joined in the discussion). This improves the styles panel; discussion led to more thoughts around the side panel updates that are incoming.
  • During this discussion, some great links were shared by @melchoyce, @shaunandrews, @joen and many others. Here are a few of those:
  • Following on from that contextual padding was talked about.
  • For all the issues linked, feedback is very welcome.

#meeting-notes

Tammie Lister 4:15 pm on July 7, 2021  

Design team meeting agenda for July 7th

The Weekly Chat for design will take place Today, 7th July 2021, 19:00 BST 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.

There is one topic so far and that’s the about page, so come bring your ideas and input – let’s have an open floor!

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

Kelly Hoffman 10:05 pm on July 1, 2021  

Monthly Design Show and Tell: June 2021

Attendees: @karmatosed (facilitator), @kellychoffman, @joen, @beafialho, @javiarce, @melchoyce, @fcoveram, @kjellr

Designs shared

  • @beafialho shared progress on the WordPress News redesign.
  • @fcoveram shared progress on Openverse

—

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

Tammie Lister 4:50 pm on June 30, 2021  

Design team meeting agenda for June 30th

The Weekly Chat for design will take place Today, 30th June 2021, 19:00 BST 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.

This week’s meeting is a show and tell so come and join us in the zoom, the link will be shared in the design channel. If you’ve got anything you’d like to talk about just comment here or bring along the topic to the meeting.

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

ashiquzzaman 4:35 am on June 24, 2021
Tags:   

Design Team Meeting Notes June 24, 2021

These are the weekly notes for the design meeting that happens on Wednesdays.

You can read the full transcript on our Slack channel.

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:

Where: #design channel on Slack.

Meeting Facilitator: @estelaris
Note Taker: @ashiquzzaman

Attendees:    @ashiquzzaman,  @kellychoffman, @estelaris, @thisisyeasin, @magdy, @joen, @michael-arestad, @critterverse, @karmatosed,  

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

Blog Announcements:

Side-by-Side Image Challenge – Make WordPress Design

Update: Initial Patterns for the Patterns Directory – Make WordPress Design

A Walk Around… The Table Block – Make WordPress Design

Requesting all to read and leave your valuable feedback on these posts. Your comments will help the design team to improve WordPress.

Open Floor:

@magdy thinks 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/ panels can be improved something similar to Quillforms is doing. @karmatosed advised to open an enhancement issue on https://github.com/WordPress/gutenberg/ and Joen agrees that the tricky part is to find the right balance.

#meeting-notes

Kjell Reigstad 7:00 pm on June 23, 2021  

Update: Initial Patterns for the Patterns Directory

Thank you for the wave of contributions to help kick off the WordPress.org pattern directory. We now have 80+ patterns in the collection! 

Now that you’ve helped us populate the directory with so many patterns, @melchoyce, @beafialho, and I are going to shift focus to further refining and tidying up the collection for launch. Our goal for this pre-release set of patterns is to provide users with a diverse, high-quality set of designs that share a common thread. 

This does not mean that submissions are closed — just that we’re at a point where we can begin viewing submissions through the lens of curating and filling out the collection as a whole. With that in mind, I’ve pulled together a handful of suggestions to help folks who are submitting patterns between now and launch: 

  • Draw inspiration from history, art, and nature. Like the patterns that are currently bundled with Gutenberg, this set is designed to share the common thread of history, specifically through the lens of art and the natural world. Using these reference points allows us to cover a wide range of topics and styles, while still having a throughline that connects them all. When submitting a pattern for this pre-release collection, please consider having your imagery and text be related to those topics. That will help this feel like a cohesive set. 
  • Challenge yourself to create something new. Before you get started, take time to browse through the directory and ensure that your pattern does not duplicate existing work. For example, the directory includes many Media & Text patterns already, so there probably isn’t room for many more Media & Text patterns at this point. 
  • Write text creatively. For this initial collection, we’ve been avoiding “Lorem ipsum” text in order to help make the patterns feel more real. Try using text as a way to hook into that common thread of history, nature, and art mentioned above. If you have links in your text, feel free to link to WP.org or WordPress.org. You can use [email protected] as an email address if you need one. 
  • Be sure to use CC0 or Public Domain images. Keep the common thread in mind when choosing images. If you need inspiration, previous patterns have had great luck pulling from Rawpixel’s curated public domain collection of images. At this time, let’s avoid modern iconography as we wait for a more flexible icon solution 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/. 
  • Aim for accessible color palettes. If your pattern uses colors, be sure that text contrast adheres to WCAG 2.0 guidelines. This will ensure that more people can read your pattern! 
  • Consider a range of screen sizes. Be sure to test your pattern on mobile, tablet, and desktop views. Some patterns using large text tend to break awkwardly on smaller screens. Be sure to test that out, and adjust accordingly. 
  • Ensure your pattern works well in many themes. Be sure to keep your 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. settings as specific as possible: Outside of default colors like black and white, please specify hex values instead of relying on theme presets. Make sure your pattern isn’t using any theme-specific block styles, and be sure to set line-height for text when appropriate.

We’ll continue evolving these suggestions and guidelines over time as the directory continues to grow.

As we move into a more tightly curatorial part of this effort, I’d like to reemphasize that the current process is just for the early, pre-release phase of pattern submission. For example, if you have a pattern that is similar to one that is already in the pre-release collection, the Design team may hold off on including it for now. But you’ll be free to resubmit it directly yourself once the directory is launched.

Again, thank you all for your submissions! It’s exciting to see the directory come to life.