Format API #10209

ellatrix · 2018-09-27T11:21:56Z

Description

Fixes: #10068, #4658.

This PR does a couple of things:

It introduces a way to register formats through the rich-text package, which will also be used by Gutenberg itself for the "core" formats in the format-library package.
It will include the link format, so it can include all its components (no need to see it as an exception any more).
It will include the image format, so there's no longer a need for the token API. The format API will absorb the token API. We can deprecate the token API and keep it around for a while longer.
It will be possible to register shortcuts, so we can remove the separate registration of shortcuts (which is currently done through TinyMCE).
Adjusts the internal value to use the format name and attributes instead of the element name and attributes.

For more information, see #10068.

How has this been tested?

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

ellatrix · 2018-10-02T00:36:31Z

Rebased after #7890 merge.

ellatrix · 2018-10-15T07:48:33Z

packages/rich-text/src/register-format-type.js

+ * @return {boolean} True if the parameter is a valid icon and false otherwise.
+ */
+
+export function isValidIcon( icon ) {


Ideally this needs to be shared with the blocks package,

Can we use the one from blocks both isValidIcon and normalizeIconObject? Inline block is one of the special formatter options, so this would make sense. Any blockers?

I'm not sure I'm understanding this. Should I import them from the blocks package?

I assume, yes we can. Is there any reason to not do it? The inline image is very similar to a block, so they should share the same logic.

packages/format-library/src/style.scss

gziolo · 2018-10-15T11:23:35Z

I'm moving it to 4.2 as we decided that 4.1 should be UI freeze focused. 4.2 is planned to be focused on API freeze and this PR fits perfectly to that description :)

gziolo

I did my first pass of review. This PR is very big. I will play with it in the browser later today.

gziolo · 2018-10-15T12:39:39Z

packages/components/src/toolbar/index.js

@@ -71,28 +70,11 @@ function Toolbar( { controls = [], children, className, isCollapsed, icon, label
 		<ToolbarContainer className={ classnames( 'components-toolbar', className ) }>
 			{ flatMap( controlSets, ( controlSet, indexOfSet ) => (
 				controlSet.map( ( control, indexOfControl ) => (
-					<ToolbarButtonContainer
+					<ToolbarButton
 						key={ [ indexOfSet, indexOfControl ].join() }
 						className={ indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null }


It looks like this should be renamed to containerClassName.

I'm not following :)

With the refactoring applied className will be passed to IconButton button instead of ToolbarButtonContainer:

gziolo · 2018-10-15T12:41:06Z

packages/edit-post/src/index.js

@@ -59,6 +60,7 @@ export function initializeEditor( id, postType, postId, settings, overridePost )
 	const reboot = reinitializeEditor.bind( null, postType, postId, target, settings, overridePost );

 	registerCoreBlocks();
+	registerCoreFormats();


I'm wondering if we should register core formats right away instead. In effect, don't offer this method at all.

I'm wondering if we should register core formats right away instead. In effect, don't offer this method at all.

💯 registerCoreBlock is a necessary hack, and certainly shouldn't serve as an ideal precedent.

gziolo · 2018-10-15T12:47:56Z

packages/editor/src/components/block-switcher/index.js

@@ -123,7 +123,7 @@ export class BlockSwitcher extends Component {
 								title={ __( 'Transform To:' ) }
 								initialOpen
 							>
-								<BlockTypesList
+								<InserterList


I'm not convinced this name change is expected. This is list of all possible transforms, not necessarily a list of blocks to insert.

I also feel like it would be better to keep this change out of the scope of this PR to make it smaller. It isn't part of the public API.

packages/format-library/src/image/index.js

packages/editor/src/components/inserter-list/index.js

gziolo · 2018-10-15T13:23:43Z

packages/rich-text/src/register-format-type.js

+ * @return {boolean} True if the parameter is a valid icon and false otherwise.
+ */
+
+export function isValidIcon( icon ) {


Can we use the one from blocks both isValidIcon and normalizeIconObject? Inline block is one of the special formatter options, so this would make sense. Any blockers?

gziolo · 2018-10-15T13:26:15Z

packages/rich-text/src/store/index.js

+import * as selectors from './selectors';
+import * as actions from './actions';
+
+registerStore( 'core/formats', { reducer, selectors, actions } );


It should be core/rich-text namespace.

gziolo · 2018-10-15T13:29:21Z

packages/rich-text/src/store/test/reducer.js

+		expect( formatTypes( undefined, {} ) ).toEqual( {} );
+	} );
+
+	it( 'should add add a new block type', () => {


Copy and paste -> block

gziolo · 2018-10-15T13:29:36Z

packages/rich-text/src/store/test/reducer.js

+		} );
+	} );
+
+	it( 'should remove block types', () => {


Copy and paste -> block

gziolo · 2018-10-15T13:30:33Z

packages/rich-text/src/toggle-format.js

+import { applyFormat } from './apply-format';
+
+/**
+ * Toggle a format object to a Rich Text value at the current selection.


Nit: it should start with Toggles

gziolo · 2018-10-15T15:52:24Z

I see the following error when hovering over the list of block transforms:

It looks like onHover isn't passed down properly to InserterList.

gziolo · 2018-10-16T08:15:05Z

Added buggy support for keyboard shortcuts with 5c052ce. For some reasons, you have to use keys combination twice to ensure it takes effect ...

ellatrix · 2018-10-18T21:25:16Z

Removing from the milestone as the parent issue is already listed.

atimmer

This is really cool. The fact that one can write a format which is then usable across all blocks that use RichText is amazing.

The annotations API will work great on top of this. The only thing that's missing here is a way to have a format apply only to the editor, but not the serialization. But that could be added in the annotations PR.

ellatrix · 2018-10-22T16:15:10Z

Added buggy support for keyboard shortcuts with 5c052ce. For some reasons, you have to use keys combination twice to ensure it takes effect ...

Now fixed in 6d7e50a.

aduth

Can we not have registerCoreFormats ?

https://github.com/WordPress/gutenberg/pull/10209/files#r225149941

ellatrix · 2018-10-26T08:59:42Z

Let's merge and iterate!

…rnmobile/merge-blocks-on-backspace * 'master' of https://github.com/WordPress/gutenberg: Do not add isDirty prop to DOM (#11093) Format API (#10209) Remove 4.2 deprecated features (#10952) Update `@wordpress/hooks` README to include namespace mention (#11061) Feature: save lock control via actions (#10649) Fix usage of `preg_quote()` (#10998) Update plugin version to 4.1.1 (#11078) Improve preloading request code (#11007) Fix dynamic blocks not rendering in the frontend (#11050) Media & Text: Fixing vertical alignment of the image (#11025) Date: Mark getSettings as experimental (#10636) Improve handling of centered 1-col galleries with small images (#11040) Use better help text for ALT text input; fixes #8391. (#11052) # Conflicts: # packages/editor/src/components/rich-text/index.native.js

ellatrix force-pushed the try/formatting-api-2 branch from 602ea12 to e121387 Compare September 27, 2018 11:36

ellatrix self-assigned this Sep 27, 2018

ellatrix added the [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable label Sep 27, 2018

ellatrix force-pushed the try/formatting-api-2 branch from e121387 to b8ad7bd Compare October 2, 2018 00:35

gziolo added this to the 4.1 milestone Oct 10, 2018

gziolo mentioned this pull request Oct 10, 2018

Annotation API #7718

Merged

4 tasks

gziolo added [Feature] Extensibility The ability to extend blocks or the editing experience [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible labels Oct 10, 2018

ellatrix force-pushed the try/formatting-api-2 branch 3 times, most recently from fa41550 to 7e0c850 Compare October 13, 2018 15:40

ellatrix changed the title ~~WIP: Formatting API~~ Format API Oct 13, 2018

ellatrix commented Oct 15, 2018

View reviewed changes

packages/format-library/src/style.scss Show resolved Hide resolved

gziolo modified the milestones: 4.1, 4.2 Oct 15, 2018

gziolo self-requested a review October 15, 2018 12:35

gziolo reviewed Oct 15, 2018

View reviewed changes

ellatrix requested a review from atimmer October 15, 2018 14:00

ellatrix removed this from the 4.2 - API freeze milestone Oct 18, 2018

ellatrix mentioned this pull request Oct 18, 2018

Format API #10068

Closed

atimmer approved these changes Oct 22, 2018

View reviewed changes

ellatrix force-pushed the try/formatting-api-2 branch from 5c052ce to a688ac8 Compare October 22, 2018 15:53

aduth previously requested changes Oct 22, 2018

View reviewed changes

ellatrix and others added 11 commits October 26, 2018 10:44

Remove Token API

acb1ac1

Remove obsolete RichText.Siblings slot

6587b97

Remove all style imports

56ed177

Fix after rebase

a5f2f9a

Fix dependency issue

63e96ff

Use stable key for list of blocks in the inserter

c2c9889

Fix Eslint issue for unsuded lodash method

b6dde3e

Move Inline Elements to its own component

f2b1fc9

Import rich-text store only in the entry point (follow other modules)

6ac8887

Rich Text: Expose unregister format type method

35d017d

Don't use index for React element keys

7fd020f

ellatrix force-pushed the try/formatting-api-2 branch from 24ef98a to 7fd020f Compare October 26, 2018 08:44

ellatrix merged commit d95c7d6 into master Oct 26, 2018

ellatrix deleted the try/formatting-api-2 branch October 26, 2018 08:59

This was referenced Oct 26, 2018

RichText: fix format placeholder #11102

Merged

Restore displaying formatting shortcuts in toolbar #11104

Merged

This was referenced Oct 26, 2018

Documentation: Format API #11105

Closed

RichText: Update registration method signature #11109

Merged

Tests: Add missing tests for Format API code #11110

Closed

afercia mentioned this pull request Oct 29, 2018

Uncaught TypeError: Cannot read property 'normalizeIconObject' of undefined Yoast/wordpress-seo#11460

Closed

talldan mentioned this pull request Oct 31, 2018

Add validation to link format in RichText component #11286

Merged

4 tasks

ellatrix mentioned this pull request Oct 31, 2018

Rich text toolbar bold/italic behaves differently to keyboard shortcut #11065

Closed

gziolo mentioned this pull request Nov 8, 2018

Format library: Allow explicit registration when using npm packages #11611

Closed

omarreiss added the [Feature] Annotations Adding annotation functionality label Mar 26, 2019

Misiu mentioned this pull request Aug 22, 2019

Missing inline formatting is a Gutenberg killer! #10728

Closed

alexandrebuffet mentioned this pull request Nov 27, 2023

Rich Text: allow underscores in Format Type class name format #56571

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Format API #10209

Format API #10209

ellatrix commented Sep 27, 2018 •

edited

Loading

ellatrix commented Oct 2, 2018

ellatrix Oct 15, 2018

gziolo Oct 15, 2018

ellatrix Oct 15, 2018

gziolo Oct 15, 2018

gziolo commented Oct 15, 2018

gziolo left a comment

gziolo Oct 15, 2018

ellatrix Oct 15, 2018

gziolo Oct 15, 2018

gziolo Oct 15, 2018

aduth Oct 16, 2018

gziolo Oct 15, 2018

gziolo Oct 15, 2018

gziolo Oct 15, 2018

gziolo Oct 15, 2018

ellatrix Oct 15, 2018

gziolo Oct 15, 2018

gziolo Oct 15, 2018

gziolo Oct 15, 2018

gziolo commented Oct 15, 2018

gziolo commented Oct 16, 2018

ellatrix commented Oct 18, 2018

atimmer left a comment

ellatrix commented Oct 22, 2018

aduth left a comment

ellatrix commented Oct 26, 2018

Format API #10209

Format API #10209

Conversation

ellatrix commented Sep 27, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ellatrix commented Oct 2, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Oct 15, 2018

gziolo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Oct 15, 2018

gziolo commented Oct 16, 2018

ellatrix commented Oct 18, 2018

atimmer left a comment

Choose a reason for hiding this comment

ellatrix commented Oct 22, 2018

aduth left a comment

Choose a reason for hiding this comment

ellatrix commented Oct 26, 2018

ellatrix commented Sep 27, 2018 •

edited

Loading