Add Inline Images and Inline Blocks API #6959

ellatrix · 2018-05-25T16:24:43Z

Description

This PR builds on #5794. Fixes #2043.

Summary, comparison to previous PR:

Rebased with new inserter design.
Moves inline token API under the RichText component.
Move image specific logic to token registration.
Uses a portal to add items in the inserter.
Removes storing anything in the global application state. Everything goes through the portal.
Insertion point is visible on hover. This is because the inserter has items with different insertion points. Also uses admin theme colour now.
Inline items are visible together with block items when a RichText field has focus.
Updates the e2e test. Deletes the image after the test is done.

How has this been tested?

Place the caret in a RichText area. Open the inserter. "Inline image" should appear under "Inline blocks". On click the media modal opens. Select an image, and it should be inserted in the input field.

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-05-25T16:27:13Z

edit-post/index.js

@@ -67,6 +68,7 @@ export function initializeEditor( id, post, settings ) {
 	const reboot = reinitializeEditor.bind( null, target, settings );

 	registerCoreBlocks();
+	registerCoreInlineBlocks();


I think we should just move these blocks in the core-block folder, even though the API would be slightly different.

What about grouping with RichText?

Actually I was thinking of removing this separate folder and putting it in core-blocks, so it would all be registered together. These would have inline as the category. How does that sound?

Mmm, not sure we should group these with blocks as they are different entities. To me, they are more like utilities for RichText, which is in turn a component.

I moved some stuff around. Still polishing.

jayshenk · 2018-05-30T01:54:31Z

core-inline-blocks/inline-image/index.js

+
+	category: 'inline',
+
+	edit( { onSave } ) {


I like how you added edit and save functions to provide an interface similar to regular blocks. I wonder if it will be possible to have the edit toolbar in #5794 (comment) be part of this edit function as well? Not sure if this is possible though, since I think the React element returned from the save function will be rendered to string before using the edit toolbar.

Probably will have to be some different method. We can name these differently based on what it's for. Maybe insert, edit/select, and save or similar.

jayshenk · 2018-05-30T01:58:32Z

editor/components/rich-text/inline-blocks.js

+					/>
+				}
+				{ type &&
+					<type.edit onSave={ this.onSave( type ) } />


Nice how you moved the Media Library logic out of this component by defining an edit function for inline blocks and moving the MediaUpload component to the edit function of the inline image.

jayshenk · 2018-05-30T03:33:18Z

Cool how you have inline blocks working with the new Inserter design! Just noting there was previous discussion in #5794 (comment) about how at this point we may want to also show regular blocks in the menu at the same time, and there is a new mockup that is being discussed in #6998 (comment) for this. CC @jasmussen

ellatrix · 2018-05-31T14:10:51Z

@jasmussen Question: if we show both inline and block items in the inserter at the same time, how doe we show insertion points?

ellatrix · 2018-05-31T14:11:46Z

Should we do it again on hover as it used to be?

ellatrix · 2018-06-01T10:05:09Z

components/slot-fill/slot.js

@@ -54,13 +54,9 @@ class Slot extends Component {

 		const fills = map( getFills( name ), ( fill ) => {
 			const fillKey = fill.occurrence;
+			const fillChildren = isFunction( fill.props.children ) ? fill.props.children( fillProps ) : fill.props.children;


I made this change to allow null values.

We're changing existing functionality, though, right? We're no longer injecting fillKey in "regular" cases (function-as-child).

I don't think I follow the purpose of this change.

How so? There's still a key added. This change is needed because you can't return null when using the function. See https://github.com/WordPress/gutenberg/pull/6959/files#diff-8c9cd11f122f43914bc769f4ad5c36d9R21.

ellatrix · 2018-06-27T15:06:01Z

@mcsf did you supply username, password, and/or base URL if it's different?

ellatrix · 2018-06-27T18:43:58Z

So the problem seems to appear at await page.waitForSelector( '.media-modal li.attachment' );...

mcsf · 2018-06-28T11:09:57Z

did you supply username, password, and/or base URL if it's different?

No, as my local test site is the one set up by default by our scripts.

ellatrix · 2018-06-28T11:31:47Z

So my tests pass locally headless and with-head. Travis only has this error with the media modal, unsure what's causing it. The first time selecting in the media modal works, the second time it does not.

youknowriad

Let's get this in 👍

ellatrix · 2018-06-28T15:33:20Z

Yay

jasmussen · 2018-06-28T15:38:17Z

H O L Y G U A C A M O L E

🎉

mtias · 2018-07-05T11:35:25Z

@iseulde thanks! :)

aduth · 2018-07-10T19:19:57Z

test/e2e/specs/adding-inline-tokens.test.js

+		await page.click( '.media-modal button.media-button-select' );
+
+		// Check the content.
+		const regex = new RegExp( '<!-- wp:paragraph -->\\s*<p>a\\u00A0<img class="wp-image-\\d+" style="width:10px" src="[^"]+\\/' + filename + '\\.png" alt="" \\/><\\/p>\\s*<!-- \\/wp:paragraph -->' );


Do we really expect the \u00A0 character here? Why not just a plain space?

hegerpkd · 2018-07-27T10:56:23Z

Is there a way I can de-register inline blocks? It is not apparent from the code to me. I would like to have the ability to switch off the inline images block.

I can use unregisterBlockType for blocks, but not for components and inline image.

aduth · 2018-07-31T15:47:47Z

Where is the developer documentation reference for inline blocks?

ellatrix · 2018-08-20T16:36:15Z

@hegerpkd @aduth After #7890, I'd like to merge some of the current RichText extension points into one API. I'd prefer to leave current documentation as is until Gutenberg itself uses it fully for it's own RichText extension such as mentions.

tomislavp83 · 2018-09-12T12:15:24Z

@hegerpkd any updates on documentation ? I would really like to know how to register my custom inline block (token). I had some luck with registerToken function but without documentation it's useless.

designsimply · 2018-11-02T23:39:22Z

@tomislavp83 comments on closed pull requests sometimes won't get seen easily. Would you mind opening a new issue for that?

ellatrix added the [Status] In Progress Tracking issues with work in progress label May 25, 2018

ellatrix self-assigned this May 25, 2018

ellatrix commented May 25, 2018

View reviewed changes

ellatrix force-pushed the jayshenk-add/inline-images branch from 12b8c87 to 3897c89 Compare May 25, 2018 18:07

jayshenk reviewed May 30, 2018

View reviewed changes

jayshenk mentioned this pull request May 30, 2018

Add Inline Images and Inline Blocks API #5794

Closed

4 tasks

ellatrix force-pushed the jayshenk-add/inline-images branch 2 times, most recently from 073a661 to 795f82b Compare May 31, 2018 13:26

ellatrix closed this May 31, 2018

ellatrix force-pushed the jayshenk-add/inline-images branch from 795f82b to c93b778 Compare May 31, 2018 13:43

ellatrix reopened this May 31, 2018

ellatrix force-pushed the jayshenk-add/inline-images branch from 4bb9ee5 to 8c1b8ec Compare May 31, 2018 13:54

ZebulanStanphill mentioned this pull request May 31, 2018

Allow ordered lists to be given a start value #7057

Closed

ellatrix added this to the 3.0 milestone May 31, 2018

ellatrix force-pushed the jayshenk-add/inline-images branch from 8c1b8ec to 6fdfc20 Compare May 31, 2018 17:46

aduth removed this from the 3.0 milestone May 31, 2018

ellatrix force-pushed the jayshenk-add/inline-images branch 5 times, most recently from 7527cb2 to 316104a Compare June 1, 2018 09:52

ellatrix removed the [Status] In Progress Tracking issues with work in progress label Jun 1, 2018

ellatrix commented Jun 1, 2018

View reviewed changes

ellatrix force-pushed the jayshenk-add/inline-images branch from 316104a to ea92dea Compare June 1, 2018 10:12

ellatrix requested a review from a team June 1, 2018 10:23

ellatrix added the [Feature] Block API API that allows to express the block paradigm. label Jun 1, 2018

ellatrix added 2 commits June 27, 2018 16:34

Try with data layer

043260c

Move registering tokens to store init

0054f04

ellatrix force-pushed the jayshenk-add/inline-images branch from 0fabb77 to 0054f04 Compare June 27, 2018 14:34

Rebase and test adjustments

ebc5d75

ellatrix force-pushed the jayshenk-add/inline-images branch from 102e17f to ebc5d75 Compare June 27, 2018 15:03

ellatrix force-pushed the jayshenk-add/inline-images branch 3 times, most recently from 12cf0ed to ebc5d75 Compare June 28, 2018 13:17

ellatrix and others added 3 commits June 28, 2018 16:15

Run tests in band

689d79d

Generate a unique name for the upload image on each test run

6fa4fcb

Remove the deletion of previous images

5eae85f

youknowriad approved these changes Jun 28, 2018

View reviewed changes

ellatrix merged commit 3fd1328 into master Jun 28, 2018

ellatrix deleted the jayshenk-add/inline-images branch June 28, 2018 15:33

aduth mentioned this pull request Jun 28, 2018

Intermittent e2e test failures #6956

Closed

ZebulanStanphill mentioned this pull request Jun 28, 2018

Convert to blocks makes inline images block level #4859

Closed

aduth reviewed Jul 10, 2018

View reviewed changes

sbuckpesch mentioned this pull request Sep 16, 2018

[Badge] Add as inline Block leofy-de/gutenberg-bootstrap#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Inline Images and Inline Blocks API #6959

Add Inline Images and Inline Blocks API #6959

ellatrix commented May 25, 2018 •

edited

Loading

ellatrix May 25, 2018

mtias May 28, 2018

ellatrix May 28, 2018

mtias May 29, 2018

ellatrix May 31, 2018

jayshenk May 30, 2018

ellatrix May 31, 2018

jayshenk May 30, 2018

jayshenk commented May 30, 2018

ellatrix commented May 31, 2018

ellatrix commented May 31, 2018

ellatrix Jun 1, 2018

mcsf Jun 1, 2018

mcsf Jun 1, 2018

ellatrix Jun 1, 2018

ellatrix commented Jun 27, 2018

ellatrix commented Jun 27, 2018

mcsf commented Jun 28, 2018

ellatrix commented Jun 28, 2018

youknowriad left a comment

ellatrix commented Jun 28, 2018

jasmussen commented Jun 28, 2018

mtias commented Jul 5, 2018

aduth Jul 10, 2018

hegerpkd commented Jul 27, 2018

aduth commented Jul 31, 2018

ellatrix commented Aug 20, 2018

tomislavp83 commented Sep 12, 2018 •

edited

Loading

designsimply commented Nov 2, 2018

Add Inline Images and Inline Blocks API #6959

Add Inline Images and Inline Blocks API #6959

Conversation

ellatrix commented May 25, 2018 • edited Loading

Description

How has this been tested?

Checklist:

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

jayshenk commented May 30, 2018

ellatrix commented May 31, 2018

ellatrix commented May 31, 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

ellatrix commented Jun 27, 2018

ellatrix commented Jun 27, 2018

mcsf commented Jun 28, 2018

ellatrix commented Jun 28, 2018

youknowriad left a comment

Choose a reason for hiding this comment

ellatrix commented Jun 28, 2018

jasmussen commented Jun 28, 2018

mtias commented Jul 5, 2018

Choose a reason for hiding this comment

hegerpkd commented Jul 27, 2018

aduth commented Jul 31, 2018

ellatrix commented Aug 20, 2018

tomislavp83 commented Sep 12, 2018 • edited Loading

designsimply commented Nov 2, 2018

ellatrix commented May 25, 2018 •

edited

Loading

tomislavp83 commented Sep 12, 2018 •

edited

Loading