New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an alternative block appender when the container doesn't support the default block #10136

Merged
merged 7 commits into from Oct 4, 2018

Conversation

Projects
None yet
5 participants
@youknowriad
Contributor

youknowriad commented Sep 24, 2018

closes #8589

This PR adds a new block appender that trigger only when the parent block doesn't support the default block. (paragraph).

To test it, try registering this block (copy/paste to the console)

wp.blocks.registerBlockType('test/container', {
	title: 'container',
	category: 'common',
	description: 'container',
	icon: 'yes',

	edit() {
		return wp.element.createElement(wp.editor.InnerBlocks, {
			allowedBlocks: ['core/image', 'core/gallery']
		});
	},

	save() {
		return wp.element.createElement(wp.editor.InnerBlocks.Content);
	},
})

@youknowriad youknowriad self-assigned this Sep 24, 2018

@youknowriad youknowriad requested review from jasmussen and WordPress/gutenberg-core Sep 24, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 24, 2018

Contributor

I love it.

GIF:

new appender

Can you make it so it has a dashed outline like https://user-images.githubusercontent.com/1204802/44717667-f4f46b80-aabd-11e8-890d-d86f19cf3cea.png? That sort of implies where the boundaries of the inserter block will be.

Also, can you make it so the entire block is clickable? Sort of like how it is in the gallery?

gallery

Nice work! 👍 👍

Contributor

jasmussen commented Sep 24, 2018

I love it.

GIF:

new appender

Can you make it so it has a dashed outline like https://user-images.githubusercontent.com/1204802/44717667-f4f46b80-aabd-11e8-890d-d86f19cf3cea.png? That sort of implies where the boundaries of the inserter block will be.

Also, can you make it so the entire block is clickable? Sort of like how it is in the gallery?

gallery

Nice work! 👍 👍

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Sep 24, 2018

Contributor

I love this!

I'd also kill for filters…

  1. a filter to say "use the alternate block appender all the time" — useful if you're dealing with a post type that is primarily about layout, not textual content (I can think of a few cases where I'd use this)
  2. a filter to replace the appender with something custom. You could use it to build some super cool contextual inserter experiences specific to a particular post type.

Overall, awesome and super excited for this.

Contributor

chrisvanpatten commented Sep 24, 2018

I love this!

I'd also kill for filters…

  1. a filter to say "use the alternate block appender all the time" — useful if you're dealing with a post type that is primarily about layout, not textual content (I can think of a few cases where I'd use this)
  2. a filter to replace the appender with something custom. You could use it to build some super cool contextual inserter experiences specific to a particular post type.

Overall, awesome and super excited for this.

@tofumatt

I noticed that I can still insert the default block even though it's not listed as an allowed type:

2018-09-24 15 27 05

I guess that's true of the existing implementation, right? Do we consider that a bug?

Anyway, code looks mostly good, just some minor tweaks. Tested in IE 11 and seems good there too; I wanted to test there because some flex stuff can be weird there, but it all seemed good.

Might be a good case for an E2E test as this is might not be something routinely tested by us in development.


My only issue is the block appender seems like it should have a larger click target:

2018-09-24 16 03 50

It seems annoying to have to move my mouse to the centre; that's a tiny click target and we could expand it to the whole area.

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 25, 2018

Contributor

@jasmussen I tried tweaking the design as suggested, feel free to polish further.

Contributor

youknowriad commented Sep 25, 2018

@jasmussen I tried tweaking the design as suggested, feel free to polish further.

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 25, 2018

Contributor

I'd also kill for filters…
a filter to say "use the alternate block appender all the time" — useful if you're dealing with a post type that is primarily about layout, not textual content (I can think of a few cases where I'd use this)

We don't like filters a lot here :). Source of buginess :P
But going forward I see at least a prop for InnerBlocks to choose the appender (or provide an alternative component to use)

Contributor

youknowriad commented Sep 25, 2018

I'd also kill for filters…
a filter to say "use the alternate block appender all the time" — useful if you're dealing with a post type that is primarily about layout, not textual content (I can think of a few cases where I'd use this)

We don't like filters a lot here :). Source of buginess :P
But going forward I see at least a prop for InnerBlocks to choose the appender (or provide an alternative component to use)

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Sep 25, 2018

Contributor

@youknowriad I think a post-type level setting would be a nice alternative over a filter too. The main thing is that the default paragraph appender isn't always the best user interface when dealing with certain types of content, even in cases where the paragraph is an allowed block, and it would help to allow developers to be explicit about that rather than depending on Gutenberg to infer it.

Contributor

chrisvanpatten commented Sep 25, 2018

@youknowriad I think a post-type level setting would be a nice alternative over a filter too. The main thing is that the default paragraph appender isn't always the best user interface when dealing with certain types of content, even in cases where the paragraph is an allowed block, and it would help to allow developers to be explicit about that rather than depending on Gutenberg to infer it.

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 26, 2018

Contributor

I noticed that I can still insert the default block even though it's not listed as an allowed type:

This is definitely a bug, good catch, I created a specific issue for it #10186

Contributor

youknowriad commented Sep 26, 2018

I noticed that I can still insert the default block even though it's not listed as an allowed type:

This is definitely a bug, good catch, I created a specific issue for it #10186

@youknowriad youknowriad requested review from tofumatt and jasmussen Oct 4, 2018

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Oct 4, 2018

Contributor

I added an e2e test, not sure what's left to land this in 4.0

Contributor

youknowriad commented Oct 4, 2018

I added an e2e test, not sure what's left to land this in 4.0

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 4, 2018

Contributor

I pushed a small tweak to the visuals:

tweaks

Contributor

jasmussen commented Oct 4, 2018

I pushed a small tweak to the visuals:

tweaks

@tofumatt

Tested locally and the bigger click target is much nicer, thanks!

Looks good to me! 👍

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Oct 4, 2018

Contributor

Thanks for the tweaks :)

Contributor

youknowriad commented Oct 4, 2018

Thanks for the tweaks :)

@youknowriad youknowriad merged commit 590cf72 into master Oct 4, 2018

2 checks passed

codecov/project 49.36% (+0.54%) compared to fd9bfa5
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the add/alternative-appender branch Oct 4, 2018

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Oct 5, 2018

Contributor

@youknowriad @jasmussen Would it make sense for this new appender design to apply to the Gallery image appender as well? I could see it being nice to have the same design since they are similar UIs, same icons, etc. Happy to open a PR if so :)

Contributor

chrisvanpatten commented Oct 5, 2018

@youknowriad @jasmussen Would it make sense for this new appender design to apply to the Gallery image appender as well? I could see it being nice to have the same design since they are similar UIs, same icons, etc. Happy to open a PR if so :)

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Oct 5, 2018

Contributor

@chrisvanpatten Yes, it does. I think the component is different but the design should definitely match. Some explorations are happening here #9682

Contributor

youknowriad commented Oct 5, 2018

@chrisvanpatten Yes, it does. I think the component is different but the design should definitely match. Some explorations are happening here #9682

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Oct 5, 2018

Contributor

@youknowriad Oh cool, I'll let those explorations proceed then! 👍

Contributor

chrisvanpatten commented Oct 5, 2018

@youknowriad Oh cool, I'll let those explorations proceed then! 👍

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 5, 2018

Contributor

@chrisvanpatten Yes, it does. I think the component is different but the design should definitely match. Some explorations are happening here #9682

@youknowriad Oh cool, I'll let those explorations proceed then! 👍

I actually think those explorations, although on a PR, have somewhat stalled. So Chris if you have an ocean of bandwidth and desire to contribute, I can offer you an emoji medal for it, and I would suggest you work off of the mockups present here: #9682 (comment)

An interim step can be as little as the visual styles, and a bigger step could be adding the additional button. But just to be clear, don't let that pull request block you from making one yourself!

Contributor

jasmussen commented Oct 5, 2018

@chrisvanpatten Yes, it does. I think the component is different but the design should definitely match. Some explorations are happening here #9682

@youknowriad Oh cool, I'll let those explorations proceed then! 👍

I actually think those explorations, although on a PR, have somewhat stalled. So Chris if you have an ocean of bandwidth and desire to contribute, I can offer you an emoji medal for it, and I would suggest you work off of the mockups present here: #9682 (comment)

An interim step can be as little as the visual styles, and a bigger step could be adding the additional button. But just to be clear, don't let that pull request block you from making one yourself!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment