Editor chat summary: Wednesday, 2 September 2020

This post summarizes the weekly editor chat meeting on Wednesday, 2 September 2020, 14:00 UTC held in Slack.

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/ 8.9

@jorgefilipecosta announced Gutenberb 8.9 was going to be released in some hours.

The big highlight of the release is that Widgets moved out of experiments. On the FSE front, multiple FSE blocks were implemented and are now available for testing in the FSE experience (“Site Editor”). With regards to the widgets screen, more details are shared below.

Aside from these two focuses, Gutenberg 8.9 contains some small new features, multiple bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes, and some performance improvements.

Monthly plan updates

Global Styles

The PR that implements the Global styles sidebar on the edit site is now out of the draft state. https://github.com/WordPress/gutenberg/pull/24250. The PR allows us to have something more concrete to test the global styles mechanism and should probably be merged soon.

Besides the main global styles PR, @jorgefilipecosta said that we have proposals for font family and font-weight picking in https://github.com/WordPress/gutenberg/pull/24868 and https://github.com/WordPress/gutenberg/pull/24978.

Navigation screen and Navigation 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.

Regarding the navigation block task @andraganescu said:

They’re both being worked on. For the Navigation editor (screen) the goal currently is to bring it into a sort of MVP state (outlined in https://github.com/WordPress/gutenberg/issues/24875 and then take the same steps that we took for the Widgets editor.
Recently the editor got drag and drop into its version of the ListView.
The Navigation block is getting updates via the work on the editor.
One thing that is a bit of a blockerblocker A bug which is so severe that it blocks a release. now is the uncertainty around the “edit in toolbar” feature suggested for the LinkControl, feature which is also present in some of the editor’s interactions.

Widgets screen

Besides the big update that widgets are going to move out of the experimental state on WordPress 8.9, @andraganescu added that call for testing post in progress, and it should soon make it on the make coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blogblog (versus network, site).

Full Site Editing

Regarding full site editing @ntsekouras, is experimenting with the query block. Namely, adding tags, order, and some orderby support and transform multiple heading blocks to list or paragraphs.

Monthly plan preview

@annezazu shared a small preview of the monthly plan for September:

  • Global Styles & Editor focused APIs: hope is that work on editor focused APIs can be wrapped up in the month ahead.
  • 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. Screen: launched out of experimental, hoping for lots of feedback, working on an updated design, and have a nice set of a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues to work through.
  • Navigation Screen: discussing blockers to this being moved out of experimental & working on various items including nestinga fresh designenabling edit links in toolbar etc.
  • Full Site Editing: focused on milestone #2.

Task coordination

@jorgefilipecosta

Shared the following update:

Last week I was involved in helping the editor side tasks of WordPress 5.5.1. I reviewed multiple global styles related PR’s and shared some insights in the discussions that were happening. And I proposed the font family and weight picking mechanism.

Next week I will continue the reviews on global styles related PR’s. I will try to take the open PR’s I have to the finish line, and I will try to have a prototype of how to use and load third-party fonts.

@youknowriad

  • Working on theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. APIs to control the editor.
  • Adding spacing controls to the group block
  • Custom CSSCSS Cascading Style Sheets. for the group block (depending on the available time)

@mapk

  • Finalized Widget Screen design iterations.
  • Digging into Query block.
  • Reviewed and helped iterate on text-only topbar.

@itsjonq

@itsjonq shared the following update:

I’m continuing to work on the G2 Components project. Currently focusing on creating (also supporting the creation) of larger pieces.
One of the ways this is manifesting is through prototyping more complete UIs/experience (e.g. Navigation, and soon FSE/Global styles).
Also exploring how G2 components could be used in WP-Adminadmin (and super admin). Another focus to evaluate potential integration into Gutenberg (via `@wordpress/components`).
One of the results from this is splitting parts from the core system so that smaller chunks can be migrated (e.g. Style system)I’ve continued to host Zoom session calls + blog G2 components updates on the blog:
https://g2components.wordpress.com/Also updating the documentation as I go:
https://g2-components.com/As always, open to feedback + suggestions! From UIUI User interface designs to workflows, to documentation, etc…
I’ve received a few already, which have been lovely.

@michaelarestad

@nosolosw

Shared the following update on the agenda:

  • This week: I’ve made progress on adding an initial prototype for the global styles sidebar in the Site Editor. Just today the PR moved from draft state to open for reviews. It still needs some tweaks, but, fundamentally, it’s a candidate for merging. I’ve also been helping here and there with feedback and reviews.
  • Next week: keep pushing this work forward.

Open floor

Justify use of “Needs… Feedback”

@isabel_brison wrote on the agenda post:

I’m wondering if we should try/encourage adding comments to justify use of “Needs… Feedback” labels in Gutenberg, as it’s not always obvious which aspect of the issue/PR needs feedback. It would help if the person adding the label elaborated a little on where feedback would be useful.

@jorgefilipecosta said it makes sense that when someone uses a feedback label to also include a comment saying exactly what feedback is needed. As sometimes, the discussions get big passed by many topics, and it is not easy to know what actionable feedback is needed.

@youknowriad said that adding process over process is just raising the bar for contribution. And added that it’s also fine to ask “Why did you add the Needs thing feedback”?

@mapk referred he noticed that many designers do list out the feedback they’re looking for when a design is proposed. @jorgefilipecosta said that we should probably expand that practice to non-design PR’s.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg, #meeting-notes

Block API Updates in 5.5

Coauthored by @aduth and @gziolo.

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

The block categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. is no longer mandatory or doesn’t have to match an existing category slug during blocks’ registration. When that happens, a block is rendered in the inserter under the Uncategorized section.

The default set of block categories was updated.

The new set of block categories is:

  • Text
  • Media
  • Design
  • Widgets
  • Embeds
  • Reusable

Of the above, a few have remained unchanged: Widgets, Embeds, Reusable.

Mappings have been added to ensure that existing blocks will be assigned to as close as possible to an equivalent category in the new set:

  • Common → Text
  • Formatting → Text
  • Layout → Design

Note that if you update your blocks to one of the new block categories, your block may no longer register correctly in older versions of WordPress. If your 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 supports older versions, you should consider to check if a category is registered before using it:

In PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20:

global $post;
$has_formatting_category = in_array( 'formatting', wp_list_pluck( get_block_categories( $post ), 'slug' ) );

register_block_type( 'my-plugin/my-block', array(
   'category' => $has_formatting_category ? 'formatting' : 'media',
   
   // ...
) );

In JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.:

var hasFormattingCategory = wp.blocks.getCategories().some( function( category ) {
   return category.slug === 'formatting';
} );

wp.blocks.registerBlockType( 'my-plugin/my-block', {
   category: hasFormattingCategory ? 'formatting' : 'media',

   // ...
} );

Block Type Metadata

To register a new block type using metadata that can be shared between JavaScript and PHP code, start by creating a block.json file. This file:

  • Gives a name to the block type.
  • Defines some important metadata about the registered block type (title, category, icon, description, keywords).
  • Defines the attributes of the block type.
  • Registers all the scripts and styles for your block type.

Example:

{
	"name": "my-plugin/notice",
	"title": "Notice",
	"category": "text",
	"parent": [ "core/group" ],
	"icon": "star",
	"description": "Shows warning, error or success notices…",
	"keywords": [ "alert", "message" ],
	"textdomain": "my-plugin",
	"attributes": {
		"message": {
			"type": "string",
			"source": "html",
			"selector": ".message"
		}
	},
	"providesContext": {
		"my-plugin/message": "message"
	},
	"usesContext": [ "groupId" ],
	"supports": {
		"align": true,
		"lightBlockWrapper": true
	},
	"styles": [
		{ "name": "default", "label": "Default", "isDefault": true },
		{ "name": "other", "label": "Other" }
	],
	"example": {
		"attributes": {
			"message": "This is a notice!"
		}
	},
	"editorScript": "file:./build/index.js",
	"script": "file:./build/script.js",
	"editorStyle": "file:./build/index.css",
	"style": "file:./build/style.css"
}

For more information on the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., see the documentation.

Block Context

Block context is a feature which enables ancestor blocks to provide values which can be consumed by descendant blocks within its own hierarchy. Those descendant blocks can inherit these values without resorting to hard-coded values and without an explicit awareness of the block which provides those values.

This is especially useful in full-site editing where, for example, the contents of a block may depend on the context of the post in which it is displayed. A blogroll template may show excerpts of many different posts. Using block context, there can still be one single “Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.” block which displays the contents of the post based on an inherited post ID.

If you are familiar with React Context, block context adopts many of the same ideas. In fact, the client-side block editor implementation of block context is a very simple application of ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Context. Block context is also supported in server-side render_callback implementations, demonstrated in the examples below.

Defining Block Context

Block context is defined in the registered settings of a block. A block can provide a context value, or consume a value it seeks to inherit.

Providing Block Context

A block can provide a context value by assigning a providesContext property in its registered settings. This is an object which maps a context name to one of the block’s own attributes. The value corresponding to that attribute value is made available to descendant blocks and can be referenced by the same context name. Currently, block context only supports values derived from the block’s own attributes. This could be enhanced in the future to support additional sources of context values.

record/block.json

{
	"name": "my-plugin/record",
	"attributes": {
		"recordId": {
			"type": "number"
		}
	},
	"providesContext": {
		"my-plugin/recordId": "recordId"
	}
}

As seen in the above example, it is recommended that you include a namespace as part of the name of the context key so as to avoid potential conflicts with other plugins or default context values provided by WordPress. The context namespace should be specific to your plugin, and in most cases can be the same as used in the name of the block itself.

Consuming Block Context

A block can inherit a context value from an ancestor provider by assigning a usesContext property in its registered settings. This should be assigned as an array of the context names the block seeks to inherit.

record-title/block.json

{
	"name": "my-plugin/record-title",
	"usesContext": [ "my-plugin/recordId" ]
}

Using Block Context

Once a block has defined the context it seeks to inherit, this can be accessed in the implementation of edit (JavaScript) and render_callback (PHP). It is provided as an object (JavaScript) or associative array (PHP) of the context values which have been defined for the block. Note that a context value will only be made available if the block explicitly defines a desire to inherit that value.

JavaScript

record-title/index.js

registerBlockType( 'my-plugin/record-title', {
	edit( { context } ) {
		return 'The current record ID is: ' + context[ 'my-plugin/recordId' ];
	},
} );

PHP

A block’s context values are available from the context property of the $block argument passed as the third argument to the render_callback function.

record-title/index.php

register_block_type( 'my-plugin/record-title', array(
	'render_callback' => function( $attributes, $content, $block ) {
		return 'The current record ID is: ' . $block->context['my-plugin/recordId'];
	},
) );

#5-5, #block-editor, #dev-notes

Various changes to WordPress React Components in WordPress 5.5

BlockPreview component

In previous versions, when using the BlockPreview component, setting a height for the container was necessary in order to show 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. preview properly. This was not working properly in situations where the height of the content was dynamic and changing from preview to another.

In WordPress 5.5, the BlockPreview component automatically scales the content to the available width and adapts its height to its content height.

In most situations, this will improve the rendering of BlockPreview components but if you used to rely on the fixed heights, you should consider checking whether the new behavior is working properly.

Popover component

On WordPress 5.5, the Popover component has different default values for the noArrow and position props. If you relied on the previous default behavior, you must explicitly assign these props.

<Popover noArrow={ false } position="top center" /> 

#5-5, #block-editor, #dev-notes

New Block Tools on WordPress 5.5

In WordPress 5.5, the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks continue to evolve with the addition of new 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. tools.

Custom Line Heights

Users can define custom line heights for headings and paragraphs. Themes can opt-in into this feature by defining the custom-line-height theme support flag.

add_theme_support( 'custom-line-height' );

Custom Units

In addition to pixels, users can now use other units to define the height of Cover blocks. The available units are: px, em, rem, vh, vw. Themes can opt-in into this feature by defining the custom-units theme support flag.

add_theme_support( 'custom-units' );

Themes can also filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. the available custom units.

add_theme_support( 'custom-units', 'rem', 'em' );

#5-5, #block-editor, #dev-notes

Block Patterns in WordPress 5.5

In WordPress 5.5, 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. editor introduces a new concept called block patterns. The goal is to allow users to build and share predefined block layouts, ready to insert and tweak more easily.

You can find the registered block patterns on the block inserter and add them to your post/page like any other block.

Block Patterns Registration

WordPress 5.5 comes with a number of built-in block patterns but it’s also possible for third-party plugins and themes to register additional block patterns or remove existing ones.

To register a custom block pattern, you can call the register_block_pattern function receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument. The properties of the block pattern include a title, a description, a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., potentially some additional keywords, and the content of the pattern.

function my_plugin_register_block_patterns() {
	register_block_pattern(
		'my-plugin/my-awesome-pattern',
		array(
			'title'       => __( 'Two buttons', 'my-plugin' ),
			'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'my-plugin' ),
			'categories'  => array( 'buttons' ),
			'content'     => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'my-plugin' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
		)
	);
}

add_action( 'init', 'my_plugin_register_block_patterns' );


It is also possible to register custom categories for your own block patterns.

Refer to the block patterns documentation for more details about these APIs.

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

While WordPress comes with a number of block patterns built-in, theme authors might want to opt-out of the bundled patterns and provide their own set.

You can do so by removing the core-block-patterns theme support flag.

remove_theme_support( 'core-block-patterns' );

#5-5, #block-editor, #dev-notes

Editor chat summary: Wednesday, 29 April 2020

This post summarizes the weekly editor chat meeting on Wednesday, 29 April 2020, 14:00 UTC held in Slack.

WordPress 5.4.1

@jorgefilipecosta said WordPress 5.4.1 was released on the last Friday and that the RC includes all the editor fixes expected on the final release. Concluding that unless we discover something critical until the release in some hours, he does not expect any additional task on the editor side. The editor fixes included in WordPress 5.4.1 can be checked at https://github.com/WordPress/gutenberg/pulls?q=is%3Apr+sort%3Aupdated-desc+label%3A%22Backport+to+WP+Core%22+is%3Aclosed.

@jorgefilipecosta gave public kudos to @whyisjake or handling the tasks needed for the release!

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/ 8.0.0

@aduth shared the following update regarding Gutenberg 8.0.0:

The release candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). was released on Monday. There were a couple of bugs that were discovered between then and today and will be included as part of today’s release. Everything is looking okay on my end as far as releasing Gutenberg 8.0 today.

@youknowriad shared that the highlights of the release are:

  • Patterns moved to the inserter and the inserter as a panel
  • Add subscript and superscript formatting options

@jorgefilipecosta said that the last coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. releases included ten Gutenberg releases. Gutenberg 8.0.0 is the fifth Gutenberg release since WordPress 5.4 so more or less half of the things WordPress 5.5 editor is going to include are already out.

Monthly Plan & Weekly Priorities

Soon we are going to have the monthly plan for may. Regarding the April plan available at https://make.wordpress.org/core/2020/04/01/whats-next-in-gutenberg-april/, @mapk said he thinks everyone did really well and @youknowriad agreed and said we’re on a good pace these days and we’ll need to start thinking about the High-level priorities for May.

Task Coordination

@youknowriad

Has been working on some follow-ups to the Patterns and Inserter work:

  • Support search
  • Rename APIs
  • Make the core patterns translatable

He said there are still a lot more follow-ups there. H will continue there and will also keep an eye on the FSE work in general.

@aduth

Has been focused on:

  • 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. context: The first iteration landed last week. It still needs follow-up work to flesh out the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 APIs.
  • 8.0 release: Wrangling, also made changes to and helped land a new changelog generator tool which will be helpful to expedite the process for future releases.

@mcsf

Has been involved in PR reviews and issue discussions in

  • Pasting, transforms
  • Block content, versions
  • Full-site editing and block-based themes

@nosolosw

In the past week, his main focuses were:

Next, he is going to resume work on the block style system, global styles, etc.

@q

Has been focused on:

  • Cover Block: Continuing work on padding controls and alignment tools

@sageshilling

Working on the gallery, looking at keeping the current gallery block, while building out a pattern(s) for the gallery, as a container with block images. Working on the data flow, design flow, and then build out from there. 5.5 will have both the current gallery block, and the pattern gallery(ies).

@andraganescu

Has been AFK for a week. Attended some of his open work about the new navigation menus screen, refactored the author block, and re-added setting post author from it.

@nrqsnchz

Is working on Iterations on the welcome guide and will soon start helping with FSE work, mainly Inserting existing saved template parts and Edit Site: Creating a new template from scratch.

@michaelarestad

Is focusing on:

@mapk

Is following up on a few PRs:

  • Clearing the publish date with @earnjam
  • Labels on buttons with @nicolad
  • Looking at drag n drop and mover interactions a bit more.

@jorgefilipecosta

During the last week, helped/reviewed the tasks needed for 5.4.1. I submitted many bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes and also some enhancements to the 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. screen. For the next week, he wants to continue some enhancements to the widget screen and to work on undo-redo and make sure it works as expected on the three screens: edit-post, edit-site, edit-widgets (it seems we have some issues on the last two). Lastly, he plans to continue interactions on some PR’s he has, namely CSSCSS Cascading Style Sheets. vars for predefined colors, as that PR is impactful for global styles.

@gziolo

Plans to continued on block editor features and last week did the following tasks:

  • worked on CSS support for build and start commands from wordpress/scripts
  • landed a few smaller bug fixes
  • helped @ajlende to land debugging support for unit and e2e tests

@karmatosed

Her main focuses are navigation and design triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.. Said that we are getting in a good place with nav-menus.php thanks to so much amazing dev work. Shared that the navigation project board is a great place for dropping in for feedback there and testing as the release surfaces.

Open Floor

Code debugging

@john said:

I’m confused about how to debug custom gutenberg blocks when you need to see and play with the gutenberg source code. If the docs are unclear, and I need to poke around in the source code, I can’t because all the packages are run via build files. So if I was to run a “console.log” to see what happens in the getSaveElement filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.… nothing happens.

Is there a proper way to access the entire codebase so I can see what’s happening inside functions that gutenberg provides 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 developers? I’m not skilled enough to just READ the code. I need to actually be able to run console.logs inside the Gutenberg core while developing a plugin. But I can’t find a way to do that.

@youknowriad referred that maybe nothing happens because it’s not executed at all. And made some questions to better understand the problem.

@aduth said:

@john Instead of using the plugin from the plugin repository, you can clone the source code from 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/ to your wp-content/plugins. From there, you can treat it like you would when developing in Gutenberg itself, starting the build process with npm run dev or npm run build from within Gutenberg. You should see any changes to the source reflected in the plugin running on your site.

https://github.com/WordPress/gutenberg/blob/master/docs/contributors/getting-started.md

Asset Licences

In the agenda of the meeting @poena said:

If there has not been one, there needs to be a license review of all third party assets.

I was not able to find any information for the included images (for example, block patterns and FSE demo content) and icons (social media).

Licence must be considered when any such element is included in the plugin.

I am not familiar with how you review licensing for third party scripts, but I am not able to find a list of licenses and copyright anywhere.

@aduth said that there is a license check tool used for all third-party dependencies installed through NPM. And @youknoriad said he knows that all images used in patterns and block examples are public domain images and that each time we want to use a new one we create a 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. tracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. for it and check the license there.

@poena asked if it is correct to not even credit the public domain images?

@aduth and @youknowriad both said that although they are not lawyers they believe public domain does not require any attribution.

@poena followed up the question and asked about the icons.

@youknowriad said wordpress/icons are a mix of Dashicons and custom-built icons so he believes all of them are WP made. I know some might have been inspired by Material ones.

@poena said that when people take something from core/GB and place it elsewhere, We can’t just say that the images have the same license as core/plugin because core/plugin is GPLGPL GNU General Public License. Also see copyright license. and some images may be public domain for example.

@nrqsnchz said that this was why we decided to go with text-only patterns for now. We couldn’t find a good library of images that was also compatible with WP’s license.

@aduth said It would be good if it could be communicated something consistent like “all images and content distributed through patterns are [a: public domain][b: distributed as GPL]”.

@youknowriad said if a plugin/theme is GPL, it can just reuse anything WP provides if not, you need to check per case. @poena followed up saying It’s not that simple and that we know that from twenty nineteen.

@poena concluded the topic by saying that she just wanted people to be mindful when they make their pull requests.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg, #meeting, #meeting-notes

Dev Chat summary – February 12, 2020 (5.4 week 9)

@davidbaumwald facilitated the chat on this agenda.

Full meeting transcript on Slack

This devchat marked week 9 of the 5.4 release cycle.

Announcements

WordPress 5.4 Release Candidate 2 was released on Tuesday March 11th as expected 🎉

Feedback from hosts is needed on Make/Hosting regarding SimpleXML PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 extension usage.

@joemcgill shared that XML Sitemaps Feature Plugin version 0.2.0 was released this week and could continue to use feedback from folks testing.

@audrasjb shared that Plugins & Themes Auto-updates Feature Plugin version 0.2.1 was released this week. This feature now have a dedicated 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, created right after the last devchat: #core-auto-updates. There will be weekly meetings on Tuesdays at 18:00 UTC. The kick-off meeting recap is available on Make/CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

@chanthaboune shared the roadmap to get an All-women Release Squad by the end of 2020.

Upcoming releases

WordPress 5.4 Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 3 is scheduled for Tuesday March 18th, 2020.

trunk is open for 5.5, but the priority is on 5.4 Release Candidate cycle. Polyglots TeamPolyglots Team Polyglots Team is a group of multilingual translators who work on translating plugins, themes, documentation, and front-facing marketing copy. https://make.wordpress.org/polyglots/teams/. already started to work on translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. packages.

Components Check-In

@imath worked on Ticketticket Created for both bug reports and feature development on the bug tracker. #49236 and needs some feedback. @jeffpaul advised him to slate it to 5.5 with early keyword so it could be handled at the early stage of the development cycle.

@garrett-eclipse found a list of the components and sub-components without maintainers:

There’s the potential to merge some of the less active sub-components like Charset and Emoji into it’s parent Formatting component. But that would needs further discussion.

Open floor

The main discussion of the open-floor was 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. Editor’s Full Screen Mode enabled by default since WP 5.4 Release Candidate 1.

Here is a quick transcript of the discussion. Please note that no decision has been taken during this chat.

@peterwilsoncc wanted to know when was this committed to the WordPress repository. @jorgefilipecosta answered it was introduced during 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. 3, before WP 5.4 RC 1 was released.

@peterwilsoncc: “same for the release in which it was moved from experimental to stable (for want of a better word) 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/?”. @jorgefilipecosta answered that Full screen mode was not experimental, it was stabilized and working for a long time, it was just not enabled by default (although some hosts were doing it), and the Gutenberg team just had a small PR that enabled the mode by default.

@peterwilsoncc noted that in the discussion on the Make/Core blogblog (versus network, site), @matt mentions some user testing. @peterwilsoncc asked how much was done.

@joostdevalk proposed to revert and take another look for 5.5, given the negative feedback about this change.

@clorith pointed out that it is still being worked on, and even had a design change between RC1 and RC2. It feels like it’s not ready, and needs more UXUX User experience work before it goes in.

@chanthaboune asked how the feedback has been in support forums. @ipstenu answered that it’s hard to get feedback in support forums at this stage, since only people beta testing would see it and they tend to be a little more technical savvy than mainstream users.

@youknowriad wanted to clarify some of these questions:
– “I believe we should just the merits of the full screen on its own not whether it can be disabled or not. For instance 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. is in full screen and it can’t be disabled.
– The UX work after RC1 was a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fix for RTL languages.
– The feedback is balanced. There were good comments about it. Most negative feedback is about the fact that it becomes default.
– This feature has been 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 for more than a year now, It’s in before 5.0.”

@pbiron asked if it was enabled by default in the plugin before being merged into core.

@youknowriad answered that was a request from @matt as release leadRelease Lead The community member ultimately responsible for the Release. prior to the RC.

@joostdevalk added that it’s sounds good to say that @matt has every right to make that call. But he disagrees that this is a good idea in its current form, and he think it will be necessary to guide changes like this more. The Block Editor is changing its default behavior without explaining that in the interface.

For @peterwilsoncc, at this point the question is whether it should be enabled by default rather than whether the feature should exist.

@joemcgill’s main concern is that the reaction to this change will be for people to install code that permanently overrides the feature preference, which makes it harder to move to a fullscreen mode default in the future.

@nilovelez noted that it may seem daunting for existing users, as some part of the UIUI User interface will apparently be gone, but existing users are the ones that won’t even notice the change. Some attendees disagreed on that as the current behavior for existing users is saved with LocalStorage so it won’t stay for users that use different devices to connect to WordPress Adminadmin (and super admin).

@clorith also mentioned that Apple clears LocalStorage at set intervals, so users would lose their “don’t use fullscreen” option.

@johnbillion feels concerned that how to switch back to non full screen mode is not obvious.

@youknowriad answered the argument can be turned to the opposite direction for people preferring the full screen mode if it’s disabled. That’s why he think the core team should discuss whether it’s good not whether it can be disabled. For @clorith, given that it’s been off by default, then this is an unexpected change, and thus should not be used as the basis.

@joostdevalk proposed to show how to get out of full screen mode and how to set personal preference in the interface, and save preferences as a user 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. and not on the user’s browser.

@jorgefilipecosta pointed out that a new welcome modal is shown to new users. He asked if it would make sense to introduce full screen mode there. @joyously stated that most of the users wouldn’t see it. @jorgefilipecosta, answered that users that won’t see the new modal won’t switch to default FullScreen mode, their preferences will be kept unchanged.

@audrasjb added that users don’t necessarily come to the editor from the posts list. With fullscreen mode and the WP logo button, they can only go back to the Posts list instead of having the full Admin menu. This is the only Admin action/link directly available after editing/publishing a post.

@jorgefilipecosta raised that the development of database persisting mechanism is in progress and that should happen soon. @ipstenu added it really should be a requirement for this feature to land in WordPress Core. @jorgefilipecosta mentioned database persisting for user’s preferences is expected to land in WP 5.5.

In terms of actions, @peterwilsoncc suggested:

  • Setting full screen to off by default
  • Adding some onboarding for when the switch is made
  • Enable once the user’s preference is saved in the database
  • Clarifying exiting full-screen mode (currently active, stated for completeness)

@johnbillion pointed out Matt mentioned that some hosts enabled full screen mode. He asked what is the feedback been regarding not getting lost, switching modes, etc.

@chanthaboune tried to summarize the concerns raised by the attendees:

  • Consistency/persistency of the visual experience
  • More thoughtful user flows
  • Clearer introduction to the full screen functionality

#5-4, #block-editor, #feature-plugins

Editor chat summary: Wednesday, 4 March 2020

This post summarizes the weekly editor chat meeting on Wednesday, 4 March 2020, 14:00 UTC held in Slack.

WordPress 5.4 Upcoming Release

WordPress 5.4 RC 1 is out, more details can be checked on the release page.

The list of editor PR’s cherry picked can be checked on #20593 and #20613.

The team published all 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. editor dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.. In total, the team ended up publishing a total of 10 posts with block editor dev notes https://make.wordpress.org/core/2020/03/03/wordpress-5-4-field-guide/ covering 32 PR’s that needed a dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase..

@jorgefilipecosta gave a big thank you to everyone that helped the big effort on writting the editor dev notes.

@jorgefilipecosta ended the topic by sharing the following information:

For the next RC currently, we have three issues that should be fixed. Two of the issues have a PR that needs review. Another one does not have a PR yet. The status of these tasks can be checked on https://github.com/WordPress/gutenberg/projects/39

Weekly Priorities

The Post with the priorities for March is published.

@gziolo shared the following summary of the priorities:

  • Block Content Areas
  • Global Styles
  • Block Patterns
  • Tightening up

Task Coordination

@karmatosed

@karmatosed referred that for Feedback from design just note in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-editor channel or in 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/.

@joen

Is experimenting with new iconography to explore the G2 iterations: https://github.com/WordPress/gutenberg/pull/20464.

@nosolosw

  • Have put up for review https://github.com/WordPress/gutenberg/pull/20530 that includes a global style 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 edit-site, using preferences from user, theme, and core.
  • Prepared a raw demo theme for testing purposes at https://github.com/WordPress/theme-experiments/pull/22.
  • Next up is expanding the system to other areas (scoped styles, custom fonts & colors, style variations, etc).

@mapk

  • Reorganized the project board for FSE to prioritize “Needs Design” issues.
  • Knock out a 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. PR for this real quick: https://github.com/WordPress/gutenberg/issues/11079

@gziolo

  • Started development for the new block editor features APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways..
  • Code reviews, testing, etc.

@brentswisher

Is continuing to work through the components and adding storybook stories to any that are missing: https://github.com/WordPress/gutenberg/issues/17973#issuecomment-591093951

Referred that if anyone has experience with the story shot integration, he has some questions in the Disabled PR: https://github.com/WordPress/gutenberg/pull/20514.

@andraganescu

@ajlende

Is experimenting with WebGL blocks right now and working around the constraints. Is trying to get people’s thoughts/opinions on a Gutenberg feature requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged. he has related to rendering in the background and providing a single requestAnimationFrame render loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. for multiple blocks https://github.com/WordPress/gutenberg/issues/20483.

Open floor

Custom text color format

@paaljoachim brought to the discussion the fact that the text color may or may not be a main format.

@jorgefilipecosta clarified that the fact that the text color appears on the main formats when a color is selected and disappears from the main formats if no color is selected is not a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.. It was an implemented behavior to avoid too many main formats but at the same time give relevance to the format if color is chosen. We may discuss this behavior in an issue and it may make sense to change.

Fullscreen mode enabled by default

@paaljoachim raised the fact that now fullscreen mode is enabled by default, and referred he is very skeptical about this change as it can bring much confusion to users.

@gziolo referred that:

  • Fullscreen mode is a feature that already existed.
  • 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. also uses fullscreen.
  • The feature will only affect new users as the current setting the users had is persisted in the local storage.
  • The feature is still being discussed and it may end up being reverted during the RC phase.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg, #meeting, #meeting-notes

Fullscreen mode enabled by default in the editor

Starting with WordPress 5.4, the editor behaves differently the first time you open the editor in a new installation or on a new device—or any other time WordPress resets the user preferences.

Now the editor opens in fullscreen mode by default. Note that for now, that’s a local setting, which is why it’s going to reset when your preferences do, including incognito mode. Future releases will store the setting in the WordPress database.

Want to turn it off? It’s simple—just use the pulldown in the editor’s menu.

You can also control the editor’s mode programmatically with the data module. A quick reminder: the code below is JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/., not PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20.

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
    wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

#5-4, #block-editor, #dev-notes

New gradient theme APIs

WordPress 5.4 lets your theme use gradients as backgrounds in Cover and Buttons blocks, courtesy of some new theme APIs. You’ll notice they parallel the approaches of the colors and fonts APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways..

Configure the predefined set of gradients

Start by configuring a predefined set of gradients. Do that with the theme-support option editor-gradient-presets, then pass an array that represents the gradient set:

add_theme_support(
    'editor-gradient-presets',
    array(
        array(
            'name'     => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
            'slug'     => 'vivid-cyan-blue-to-vivid-purple'
        ),
        array(
            'name'     => __( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
            'slug'     =>  'vivid-green-cyan-to-vivid-cyan-blue',
        ),
        array(
            'name'     => __( 'Light green cyan to vivid green cyan', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
            'slug'     => 'light-green-cyan-to-vivid-green-cyan',
        ),
        array(
            'name'     => __( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
            'slug'     => 'luminous-vivid-amber-to-luminous-vivid-orange',
        ),
        array(
            'name'     => __( 'Luminous vivid orange to vivid red', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
            'slug'     => 'luminous-vivid-orange-to-vivid-red',
        ),
    )
);

For more, see https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets.

Disable custom gradients

You can also disable custom gradients:

add_theme_support( 'disable-custom-gradients' );

This call limits your users to the default gradients you defined in 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. editor or that you added to the editor-gradient-presets theme support setting.

For more, see https://developer.wordpress.org/block-editor/developers/themes/theme-support/#disabling-custom-gradients.

Disable gradient functionality

You can also use these APIs to shut down gradient functionality altogether. Just combine these two calls:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

#5-4, #block-editor, #dev-notes