[ad_1] Yesterday, Gutenberg 10.9 landed in the WordPress plugin directory. The update overhauls the Query and Query Loop blocks, allows users to expand or collapse items in the editor list view, and introduces rich URL preview cards for links. The new version also packs in an updated template-mode creation modal and moves the blocks manager. This update ships several enhancements, particularly to the user experience. One of my favorite low-key upgrades is a new set of add-card, bug, key, post author, and security icons by Filipe Varela, a product designer at Automattic. Another small-but-packs-a-punch UI change is the inclusion of the post type in the editor breadcrumb trail. The type’s singular name label now replaces the root “Document” item. For the past several cycles, the new template editor slated to launch with WordPress 5.8 has been enabled by default. The goal was always to allow everyone the chance to experience it, regardless of whether they were on a classic or block theme. The development team has now scaled this back to only be auto-enabled for block themes. Classic themes must opt-in to support it. Theme authors should read the recent template editor overview by Riad Benguella for the complete details. Query and Query Loop Blocks Renamed Query Loop block in the editor. Query? Query Loop? What the heck is all this? If you are unfamiliar with those terms, you are not alone. Even on the developer end, the early implementation of the Query and its inner Query Loop block could be a little confusing. For the average user, it probably makes even less sense. Gutenberg 10.9 takes one step toward clearing up this confusion for end-users. The former Query Loop block is now named Post Template. This is a far more accurate description of what it does. It is the “template” that outputs individual posts. It contains all the things you see, such as the post content or excerpt, the featured image, tags, categories, and more. This template is, of course, customizable via the block editor. While this is a step toward a less complex user experience, it is not quite where it needs to be yet. The Query block has been renamed to Query Loop. Therein lies the remaining issue. The terminology might not still be confusing. The goal is to expose a variation of this block named Posts List to users. It already exists, but the query-related terminology still appears when using it. There is an open ticket to address this. The primary win with this update is the overhauled text in the Query Loop block sidebar. “The query block is a powerful and complex block,” said lead Gutenberg developer Matias Ventura in a GitHub ticket. “It can be intimidated to users without proper guidance. We can use this block as an opportunity to explain some of the underlying concepts of the WordPress software in a more didactic manner.” The more advanced options, such as whether to inherit from the URL and which post types to include, now have longer descriptions. Each should guide the user through features that have long existed in the developer world. If you are a theme author and have already been building with these two blocks, do not worry about everything breaking when updating. The Query block has simply been renamed to “Query Loop” in user-facing text. Under the hood, it is still the same. The former Query Loop block has literally been renamed to Post Template (core/post-template block name). It is backward compatible. However, you should update any past calls to the wp:query-loop block to wp:post-template. Expand and Collapse Nested List View Blocks List view with collapsed nested blocks. The development team introduced an expand/collapse feature for the editor’s list view. Once opening the panel, users should now see arrow icons next to each item with nested blocks. Closing one or more of them makes it easier to see all or many top-level blocks at once. The downside is that the open/close state is lost once the list view is closed. If I had one request, it would be to store this data while editing the post. That would improve the user experience with longer documents, particularly when switching between navigating and editing. This update, along with the persistent behavior of the list view in Gutenberg 10.7, has made for a much more well-rounded document navigation experience. Rich URL Previews The editor will now show a website preview in the link editor popup. This feature only works for links in a Rich Text context, such as in the Paragraph, Heading, and List blocks. The preview also only appears after the link has been set and clicked on, not when initially typing it. If available, the popup preview displays the site icon, title, image, and description. “In the near future however, we expect to extend this to provide previews of internal URLs and to roll out support to more areas of the software,” wrote George Mamadashvili in the Gutenberg 10.9 announcement post. Admittedly, I was not keen on the idea of adding this feature. It felt like unnecessary bloat when more pressing issues were lying on the table. However, in the past day, I have enjoyed the quick previews when double-checking links in posts. Like this: Like Loading… [ad_2] Source link
Continue readingTag Archives: Gutenberg
Gutenberg 10.8 Adds New Typography Controls and Block Previews – WordPress Tavern
[ad_1] On Wednesday, Gutenberg 10.8 landed in the WordPress plugin directory. The release includes new typography options for controlling the Heading block’s font-weight and the List block’s font family. The Audio and File blocks now show preview content in the inserter. Gutenberg 10.7 felt like it introduced flashier features than 10.8. But, this was still a solid release. Sometimes the things that you do not see are just as important as those that you do. Full Site Editing (FSE) components continue to move along at a swift pace. Most changes were bug fixes rather than enhancements. One of the primary theme-related FSE upgrades allows developers to set the padding for nav menu links via theme.json. This may be a small win, but it is unlikely to address the numerous issues with styling navigation items and nested lists. The change also does not affect the Page List block links, which can be set as a nav menu item. The Navigation block will be one of the toughest nuts to crack before site editing is a possibility. Enhancements like this help, but it is a long and winding road to a solution that satisfies both theme authors and users. Users should see the post title in template-editing mode. The template details modal also includes more detailed information, such as how to best name custom templates. New Typography Options Gutenberg 10.8 enables the font-weight control for Heading blocks. This allows theme authors to define the default weight via their theme.json files, and users can override this via the sidebar panel in the editor. Testing font weights for the Heading block. The control displays all nine possible weights: Thin Extra Light Light Regular Medium Semi Bold Bold Extra Bold Black While each weight is selectable, it does not mean all fonts support a specific weight. For example, users will see no difference between Extra Bold and Black with the Twenty Twenty-One theme. In the long term, this should be coupled with the font family control. This would allow theme authors to define which weights are supported by a specific family, making those the only options for users. The List block is jumping ahead of others with its support of the font family option. Generally, we would see the Heading or Paragraph blocks gain such features first. Setting a custom font family for a List block. The Site Title, Site Tagline, and Post Title blocks all currently support the font family control. It is a welcome addition to see expanded typography options, but I look forward to the day they are offered across every block. Theme authors can also define custom letter spacing for the Site Title and Site Tagline blocks. However, the feature does not currently appear in the block options sidebar, which would allow users to customize it. There is an open ticket to address this missing piece of the UI. Audio and File Block Previews Audio block preview in the inserter. The development team added new previews for the Audio and File blocks in the inserter. This is a nice-to-have enhancement, adding long-missing previews of some of the remaining core blocks, but it is also a bug fix. In previous versions of the block editor, users who attempted to upload media via the Audio or File blocks would get a duplicate upload. This only happened in situations where their theme or a plugin registered a custom block style. Adding a preview apparently fixed this odd bug. This change also nearly gives us a complete set of previews for the pre-WordPress 5.8 blocks. Classic, Spacer, Shortcode, and Legacy Widget do not have them, but they are unique cases. The upcoming theme-related blocks also lack previews. “Archives” Label Now Shown for Archives Dropdown Duplicate archives heading and label. When using the Archives block as a dropdown, it now outputs a label titled “Archives.” While it is a seemingly trivial change, it could impact how themes typically present this block. This enhancement changes some existing expectations. The primary use case throughout WordPress’s history has been to show the Archives dropdown in a widget. In that case, there is almost always a widget title with the “Archives” text preceding it. I expect most other use cases would follow a similar pattern. This essentially creates duplicate text. Themes Team representative Carolina Nymark had an alternate suggestion: What if the label was visible by default, but there was an option for hiding it? Similar to the search block, except there would be an actual label hidden with a screen reader text CSS class when the option is toggled. That would have been my suggestion too if I had seen the ticket earlier. For now, theme authors who need to hide it should target the .wp-block-archives-dropdown > label class in their CSS. Like this: Like Loading… [ad_2] Source link
Continue readingDoc Style Commenting for Gutenberg
[ad_1] Have you ever had a situation where you want to collaborate and work together on a blog post draft on a WordPress website, but due to technical limitations, you end up copying the entire blog post on Google Docs instead? As a writer, I often face this dilemma, and to your surprise, even I end up copying the blog post on a temporary Google Docs file so everyone can collaborate there easily. While this challenge has been around for years, there wasn’t a solution in the market that can bring in the functionality of Google Docs collaboration into WordPress. But today, we have a reliable plugin that allows admins and editors to easily collaborate without wasting time moving around the content. The plugin I am referring to is Multicollab. In this article, I will do an in-depth review of the Multicollab plugin by Multidots and will take a closer look at its features. Let’s get to it! The Multicollab plugin is designed to bring the Google Docs style editing capability to the native WordPress editor. With the rapid and constant development of the Gutenberg editor, even basic block plugins are having a hard time keeping up. Amidst all of this, the Multidots team has created a free plugin that works with Gutenberg and allows website users to collaborate on a blog post, just like Google Docs. This means now you don’t have to worry about copy-pasting entire blog posts to Google Docs just for collaboration. Although I can simply say, “it does what Google Docs does in terms of collaboration.” but it will not do justice to the plugin so let’s take a closer look at its features. Article Continues Below Features of Multicollab The plugin allows you to add inline comments to any piece of text in your blog post. You can simply select the text and click on the comment option to drop a comment for that part. Replies and Resolve Just like new comments, you can reply to comments inline. Moreover, if you are done, you can simply mark it as resolved. This is very helpful if you want to add or respond to a particular comment without adding a new one. What if you want a particular user to see and handle the comment? You can simply assign it by tagging them using the ‘@’ sign followed by their name. As you type the name, users with the user roles will show up in a list, and you can select the one you want to assign the comment to. Activity Center Multicollab comes with an Activity Center board which lets you keep a tab on the comment activity of users dropping comments in posts/pages. You can visit the activity center and review all the active comments for your posts or pages from a single place. To make things more organized, the active comments are highlighted with a white background while the resolved comments will have a grey colored background. Moreover, if a comment is selected from the activity center, it is highlighted with blue background. Email Notifications Similar to Google Docs, when you are tagged in a comment, you automatically receive an email notification. This is a much-needed feature as it allows you to stay on top of your content review process. Built for Gutenberg The plugin is built specifically for the Gutenberg editor and works only on WordPress 5.3 or newer versions. You won’t be able to use this plugin with the classic editor. User Roles and Accesses The plugin has different access for different user roles. Super Admins, Administrators, and Editors can view, edit, delete, reply and resolve the comments on any posts or page. On the other hand, Authors and Contributors can view, edit, delete, reply and resolve comments only on their posts. (Source: MultiCollab Documentation) Free to Use Yes, that’s right. The plugin is available for free on the WordPress.org repository. You can even install and activate it on your website directly from the WordPress dashboard. There might be a pro version in the future with additional features, but currently, you only get priority support with the paid plan for $99 per year. Well Documented Well-written documentation is a must for WordPress plugins. MultiCollab maintains solid documentation that covers almost all the aspects of the plugin. If you ever need help, you can find an article on that topic in their documentation. Article Continues Below Hands-On with Multicollab In this section, I will install and use Multicollab on a standard local WordPress installation. Installation Installation of the plugin is pretty standard. You can install and activate Multicollab like any other plugin. Once the plugin is activated, you’d be redirected to the Multicollab settings page on the WordPress backend. This page has a plugin video guide and if you want to test a demo before using it on your website, you can click on the live demo button at the bottom of the page. Using Multicollab Since this plugin lets you add comments in the Gutenberg editor, you need to open a post to use it. Open any blog post in the Gutenberg editor, and you will see the MultiCollab icon at the top right corner of the screen. This icon will open the activity center and settings. Commenting and Collaborating To leave a comment, you need to select a part of the text. Then go to the drop-down icon in the block settings and click on the comment option. (Source: Multicollab) Now, you can write the comment just like you’d on Google Docs and save it by clicking on the save button. If you wish to make any changes to the comment, you can do that by clicking on the pencil icon at the top right corner of the comment box. Next to the pencil icon, you’d see a trash can icon. Clicking on it will delete the comment. To resolve a comment, you can click on the checkbox at the top of the comment pop-up box. Article Continues Below
Continue reading