Bringing the power of blocks to Widgets

With many existing WordPress sites and themes not yet able to take advantage of Full Site Editing, work is underway to bring the power of blocks when adding, editing, and managing widgets on your site. This is being done to help both bring benefits sooner rather than later to more parts of the site building process for users and to pave the path towards a future full site editing first experience. You can think of these changes as an upgrade of what’s currently possible. For example:

• With blocks, 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 will now allow users to create layouts in sidebars, headers and footers, in a way that hasn’t been possible before with columns, separators, spacers, etc.
• By supporting blocks, widget areas will also support visual rich text editing by default, without the need to edit HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. textareas or embed HTML editors.
• 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. based widget areas allow users to edit their theme’s template content in an inline and unified experience, removing the need to keep an abstract mental model of mapping boxes to front end results.
• Many complex widgets which were based on shortcodes are available as blocks (for instance form widgets), and visually editing them is a lot more fluid and intuitive than the esoteric value hunting of shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. editing.
• The new block based widget editing experience will have a smooth transition process that will allow developers to replace their widgets with blocks that have similar functionality.
• Last, but not least, as part of WordPress’ efforts to maintain compatibility with existing themes, content, and workflows, blocks within widget areas will be fully editable from 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. as traditional widgets currently are.

To get more visual, here are two ideas for block powered Widgets sections to bring the above to life:

While this is a stepping stone, it’s one that will ultimately offer an improved experience overall with more modern and expanded functionality thanks to the years of work put into creating the block editor. 

To make sure that users can experience the full power of blocks in Widgets, we need to build more blocks for our Widgets! Building a post using blocks is inherently different than setting up your Widgets screen using blocks, and this is a great chance for our community of developers to to test out working in this area. To give feedback, check out this call for testing and share your feedback directly in GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ here. To help with the development process or to follow the project more closely, you’re welcome to participate in #feature-widgets-block-editor in 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/.. Finally, join the fun and check out the many resources below for building blocks:

• Block Creation tutorial that teaches you how to write a block 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.
• Block Submission tutorial that gives some tips and suggestions for ensuring your block is ready for the Block Directory.
• Learn WordPress workshop on Intro 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/ Block Development
• Block Checker tool which will help you discover any issues that might prevent your plugin from working.

#core-editor, #feature-widgets-block-editor, #full-site-editing