Skip to content

Instantly share code, notes, and snippets.

View Mamaduka's full-sized avatar

George Mamadashvili Mamaduka

View GitHub Profile
/**
* Not a final name, could be `registerDocumentSettingPanel` or `registerDocumentSettingsControl`.
*
* Internally this method would be similar to `registerBlockType`:
* 1. Handles validations.
* 2. Dispatches and action to the store to register the document settings. Probably the `core/editor` store.
*/
function registerDocumentSetting( name, args ) {}
function unregisterDocumentSetting( name ) {}

Disclaimer: The document is based on the proposed API by @ellatrix and @gziolo. See #48809.

Summary

Introduce a new API, registerBlockSupport, for describing the behavior and rendering of block features that utilize support properties.

Problem

As the block editor started absorbing the complexities of block features like color, fonts, and dimension controls, it became apparent that the current method of integrating UI controls is not very sustainable and may sometimes hinder performance.

registerBlockSupport( 'core/align', {
isSupported( blockType ) {
return hasBlockSupport( blockType, 'align' );
},
blockSettings( settings ) {
// Allow blocks to specify their own attribute definition with default values if needed.
if ( 'type' in ( settings.attributes?.align ?? {} ) ) {
return settings;
}
<?php
// See: https://developer.wordpress.org/reference/classes/wp_block_editor_context/.
add_filter( 'block_editor_settings_all', function( $settings, $context ) {
// Curated blocks for the Widgets Editor.
if ( isset( $context->name ) && 'core/edit-widgets' === $context->name ) {
$settings['allowedBlockTypes'] = [ 'core/cover', 'core/heading', 'core/image', 'core/paragraph' ];
}
// Disable block locking controls in Site Editor.
/**
* WordPress dependencies
*/
import { createPortal, useEffect, useState } from '@wordpress/element';
import { registerPlugin } from '@wordpress/plugins';
import { Button } from '@wordpress/components';
function MyToolbarButton() {
// Lazy and one time initializations, also gives us a stable reference.
const [ container ] = useState( () => {
/**
* WordPress dependencies
*/
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
function SocialSettings() {
const [ links, setLinks ] = useEntityProp( 'root', 'site', 'social_links' );
const { posts, isLoading } = useSelect( ( select ) => {
const { getEntityRecords, isResolving } = select( 'core' );
return {
posts: getEntityRecords( 'postType', 'post' ),
isLoading: isResolving( 'getEntityRecords', [ 'postType', 'post' ] ),
};
}, [] );
<?php
add_filter( 'block_type_metadata', function( $metadata ) {
if ( in_array( $metadata['name'], [ 'core/paragraph', 'core/heading'], true ) ) {
$metadata['supports']['typography']['__experimentalFontFamily'] = true;
}
return $metadata;
} );

Local dev environment with Valet/DBngin on Apple Silicon

Setup