[ad_1] The Gutenberg plugin continues to march forward. Yesterday’s release, coming merely a day after the launch of WordPress 5.8, brings several new features and nearly three dozen bug fixes. The big-ticket items are drag-and-drop blocks in the list view and a much-needed upgrade for border support. Theme authors should enjoy the ability to control the Columns block’s stacking on mobile and some updated design controls for nav menus. While labeled an “enhancement,” themers should also check their designs against a breaking change to the RSS block’s updated styles. Drag and Drop Blocks in List View Dragging a block around in list view. Drumroll, please. The moment we — or at least many of us — have been waiting for has finally arrived. The editor’s list view has become a powerhouse for managing long documents with many blocks. Over the past dozen or so releases, the development team has continued to tack on necessary feature after necessary feature. In version 11.1, users can drag and drop blocks from within the list view to order and organize content. However, users are not merely limited to moving things around within the list view itself. They can drag blocks from the list over into the content canvas and vice versa. I do not often use emoji, but sometimes I like to dole out a slow clap for a job well done. 👏 👏 Border Support Adding a dashed border to a Group block. I have already been having a bit of fun with the new border options. Lately, I have been in the holiday spirit because I was getting ahead and buying my Christmas tree in July (when you find the good deals). This inspired me to create a coupon code block pattern, and the Group block’s border support was perfect for this. Gutenberg 11.1 refines the user experience for border options. The development team tightened the UI and placed the settings into logical groupings. Only the following core blocks have partial or complete border support: Button Group Image Search Table Users can also define individual corners with the border-radius option in this update. I would love to see the same treatment for the top, right, bottom, and left borders in the future. I also would not mind seeing a double-border style. Columns Block: Stack on Mobile Adding post metadata to an unstacked set of columns. By default, individual Column blocks will stack on top of each other in mobile views. However, users can now disable this via the parent Columns block on a case-by-case basis. This has also been one of the missing pieces for more layout control in block themes. One of the primary use cases for a Columns block that does not break on mobile devices is post metadata sections that should be inline. For example, theme authors often want to align the post author, date, and comments link in a single row below the post title. This toggle switch sort of moves us in that direction. However, it is a stopgap solution that does not afford theme designers the flexibility they are accustomed to with CSS (this is not generally a complicated affair). Before block themes and the site editor are rolled into core WordPress, theme developers will need fine-tuned responsive control over the Columns block and, perhaps, some type of row/inline/flex block to go along with it. Theme authors who need to target the Columns block based on whether mobile stacking is disabled can use the .is-not-stacked-on-mobile class. Post Terms and Tag Clouds Controlling the number of tags output. The development team has crossed one of my months-long pet peeves off the list. In past releases of the plugin, the Post Terms block (variations of Post Tags and Post Categories) has displayed a pipe (|) separator between individual items by default. It now shows a comma, followed by a space. Theme authors can change this in their block templates, and users can customize it from the editor. The setting is located under the “Advanced” tab in the block options sidebar. The Tag Cloud block got a small but much-needed upgrade. Users can now set a limit on the number of tags to display. By default, it is set to show 45 tags. Navigation Submenu Colors The Gutenberg development team added two new color options for the Navigation block. Aside from its existing text and background colors, users can now change the text and background colors for submenu items. The Navigation block, while improved, still seems to be one of the trickiest pieces of the site-editing puzzle. It is trying to be the Jack of all trades, mastering few — if any — solutions. And, there is already a ticket gaining traction that would allow users to stuff a wider range of inner blocks into it. But, we have submenu text and background colors, which is a win. Only, they are named “Overlay Text” and “Overlay Background.” I am unsure whether it works as part of the mobile responsive menu. Gutenberg seems to have once again failed to bundle its front-end navigation JavaScript. Like this: Like Loading… [ad_2] Source link
Continue readingTag Archives: View
Gutenberg 10.9 Renames the Query Block, Adds Collapsible List View Items, and Rolls Out Rich URL Previews – WP Tavern
[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 reading