Add "Text & Image" Block #9416

jorgefilipecosta · 2018-08-28T23:58:32Z

Description

Context: #6993

This PR implements a block that contains two areas one for a media element (image/video) and one area for blocks (buttons, paragraphs etc). The elements of both areas are vertically aligned.
This PR contains an alternative to #7414. So we can compare the two approaches side by side.
Here instead of middle blocks, the parent block will self-contain the media area (that allows images or videos), so we have only one simple nested area for the content.

Screenshots

Reviewer notes:

Files under packages/editor/src/utils/media-upload and packages/editor/src/hooks/align.js should not be reviewed in this PR as they are just cherry picks from other PRs: #9707, #9704, and #9634.

Depends on: #9707, #9704, and #9634

ZebulanStanphill · 2018-09-04T19:19:18Z

packages/block-library/src/layout-half-media-text/index.js

+	},
+
+	supports: {
+		align: [ 'center', 'wide', 'full' ],


Why is center alignment supported? What would that even do for this block?

By default, we have a wide alignment for this block the block goes out of the content area if the user does not want that, the center alignment (the default on most other blocks) can be used.

@jorgefilipecosta Center is not the default alignment for most blocks. No alignment is the default alignment for most blocks. There is a difference. The Columns block supports wide and full alignments but not the center alignment because the center alignment does not do anything for it.

The approach I was trying to follow of using center align was a way to unset the alignment is confusing I followed your suggestion and used just wide and full alignments for things to work correctly I needed to apply some engine fixes: #9634

ZebulanStanphill · 2018-09-04T19:20:54Z

packages/block-library/src/layout-half-media-text/edit.js

+const MEDIA_POSITIONS = [ 'left', 'right' ];
+const ALLOWED_BLOCKS = [ 'core/button', 'core/paragraph', 'core/heading', 'core/list' ];
+const TEMPLATE = [
+	[ 'core/paragraph', { fontSize: 'large', placeholder: 'Content...' } ],


This should use an ellipsis (…) rather than 3 periods.

ZebulanStanphill · 2018-09-04T19:24:49Z

packages/block-library/src/layout-half-media-text/edit.js

+				</InspectorControls>
+				<BlockControls>
+					<BlockAlignmentToolbar
+						controls={ MEDIA_POSITIONS }


Is there a way to give the media position options different labels from the standard block alignment toolbar? They should probably say "Show media on left" and "Show media on right".

jasmussen · 2018-09-05T07:13:38Z

Love the most recent changes. This is going to be a great block. Love:

That the block is simple — child blocks that aren't manipulable aren't surfaced.
Easy to add images, easy to resize, easy to add text, easy to configure the block

It's delicious!

The drag handle to resize needs a little love. Can we make sure the drag handle is only visible when the block is selected first?

In addition to this, can we change it to use the same resizing handle that images do? I.e. instead of this:

We do this:

And instead of this:

We do this:

I'd also personally be okay if the placeholder spot wasn't resizable, and it wasn't until a media item was added that the resize handle appeared. But it's fine either way.

jorgefilipecosta · 2018-09-05T19:18:19Z

Thank you for your reviews @ZebulanStanphill and @jasmussen all the concerns were addressed :)

jasmussen · 2018-09-06T08:54:35Z

This is really nice, I'm digging this block a lot:

However, possibly a rebase issue, but I'm seeing the title spot way smaller font size than in master:

Actually that's also in master.. I will investigate that separately. But 👍 👍 on the design! All this needs is a code review update and good to go I'd say.

youknowriad

Some small remarks, but overall, looking good to me.

I'd suggest doing a quick test in IE11 and ship.

paaljoachim · 2018-10-22T15:58:47Z

I am trying to recreate these sections using the block: http://edwien.no/publikasjoner/

Result in the backend:

Image has space above and below. Heading aligns somewhat to the top of the image. Text links aligns somewhat to the bottom of the image.

In the frontend it looks like this (clicking the preview button):

The frontend will show the image nudged up top, left and it is going below the edge of the box.
Heading and text shows up in the center of the image.

Another:
Backend:

Frontend:

Here it might be good to be able to set the height of the block through the block setting.

lkraav · 2018-10-22T17:40:27Z

Testing it today, I wasn't sure why I wasn't able to add a Quote block in the Text container.

…0913) ## Description Fixes: #10895 On unified toolbar mode, it was not possible to resize the media on Media & Text block. During the elaboration of #9416 this bug was addressed but I think during subsequent rebases and changes more concretely the usage of our abstracted Resizable box we had a regression. This PR applies exactly the same fix that was applied in spacer block to the Media & Text block. ## How has this been tested? I checked it is possible to resize the media in Media & Text block in all modes including the unified toolbar.

webmandesign · 2018-10-25T10:13:31Z

Hi guys,

I certainly don't want to sound disrespectful, that's not my intention here. I just have feeling this block might be kind of redundant.

You see, if Columns block allowed setting up a all/each column background and text color, and vertical alignment (which is definitely possible as columns are using styled using flexbox) I thing we could replicate Media & Text block's functionality that way and yet allow more flexibility still (as from what I know I can use any block inside column).

However, I understand having a dedicated Media & Text block simplifies the setup of such layout section, as my approach would require some much needed improvements to Columns block setup.

That's just my thoughts…

Additional suggestion: If Media & Text block is here to stay, I suggest adding an option to set up also a text color, not just background color. Thanks!

paaljoachim · 2018-10-25T12:24:59Z

The Media & Text block seems like a precursor to the section/container block:
#4900

This commit implements a block that contains two areas one for a media element (image/video) and one area for blocks (buttons, paragraphs etc). The elements of both areas are vertically aligned. Here instead of middle blocks, the parent block will self-contain the media area (that allows images or videos), so we have only one simple nested area for the content.

…rdPress#10913) ## Description Fixes: WordPress#10895 On unified toolbar mode, it was not possible to resize the media on Media & Text block. During the elaboration of WordPress#9416 this bug was addressed but I think during subsequent rebases and changes more concretely the usage of our abstracted Resizable box we had a regression. This PR applies exactly the same fix that was applied in spacer block to the Media & Text block. ## How has this been tested? I checked it is possible to resize the media in Media & Text block in all modes including the unified toolbar.

@afercia

…s. (#10696) Currently, if a block contains a template when we insert that block the block that gets focused is one of the child blocks specified in the template. We don't offer a way to disable this behavior. This current behavior makes sense in most cases (e.g: columns) but for some cases, we may want to keep the focus on the parent. E.g. In PR #9416 @afercia pointed some a11y concerns in automatically selecting the child block on the InnerBlocks area. Blocks may have their own edition area and an InnerBlocks are at the end. Automatically selecting a block in the InnerBlocks area, has some accessible concerns has the parent block edition area may be unnoticeable for screen reader users. This PR adds a flag to the InnerBlocks component that allows blocks to disable the behavior of automatically selecting the children. In order for this flag to be possible another flag was added in insertBlock(s) action that allows for blocks to be inserted without a selection update happening.

Currently, we have a bug even if a block has a paragraph as the last block of the template if no locking exists another paragraph is inserted. This happens because, before the template is processed the parent block is empty and DefaultBlockApppender is rendered right away. DefaultBlockApppender inserts blocks when it gets focused. The parent block has a mechanism to focus the first table and if InnerBlocks were not yet processed and the parent block does not contain inputs the DefaultBlockApppender is going to get the focus. Before the template is processed we don't know what blocks will exist so during this phase DefaultBlockApppender should not be rendered. This PR makes sure that we don't render DefaultBlockApppender right after the block is inserted before the template is processed. This behavior was noticed in #9416. ## How has this been tested? I added the test block available in https://gist.github.com/jorgefilipecosta/edafb2422ef41020d75619adf31d725e. I checked that after inserting the first paragraph specified in the template gets focused and no other paragraph is created. I checked the blocks depending on the behavior of DefaultBlockApppender inserting a block (columns) continue to work as before. ## Screenshots  test block: https://gist.github.com/jorgefilipecosta/edafb2422ef41020d75619adf31d725e ``` var TEMPLATE = [ [ 'core/paragraph', { placeholder: 'Paragraph 1', customFontSize: 35 } ], ]; ``` After: <img width="568" alt="screen shot 2018-10-18 at 13 07 03" src="https://user-images.githubusercontent.com/11271197/47153548-e36a5b80-d2d7-11e8-83a6-33a9b39d97ce.png"> <img width="700" alt="screen shot 2018-10-18 at 13 06 54" src="https://user-images.githubusercontent.com/11271197/47153560-e9f8d300-d2d7-11e8-8086-cfa2e2252432.png"> Before: <img width="675" alt="screen shot 2018-10-18 at 13 17 27" src="https://user-images.githubusercontent.com/11271197/47153679-30e6c880-d2d8-11e8-82b4-d4e7c19fa0b9.png"> <img width="656" alt="screen shot 2018-10-18 at 13 17 21" src="https://user-images.githubusercontent.com/11271197/47153683-33e1b900-d2d8-11e8-80da-7afc0294d311.png">

aduth · 2019-05-02T18:59:14Z

packages/block-library/src/media-text/media-container.js

+			}
+			return (
+				<ResizableBox
+					className="editor-media-container__resizer"


This doesn't adhere to class naming conventions.

https://github.com/WordPress/gutenberg/blob/master/docs/contributors/coding-guidelines.md#naming

jorgefilipecosta added the [Status] In Progress Tracking issues with work in progress label Aug 28, 2018

jorgefilipecosta self-assigned this Aug 28, 2018

jorgefilipecosta force-pushed the add/layout-half-image-containing-centered-contente-media-part-of-parent branch 6 times, most recently from 8e556ed to 83f545d Compare August 31, 2018 19:09

jorgefilipecosta changed the title ~~[Try] [WIP] Half image Layout - Media Area part of the parent no middle blocks~~ [Try] Half image Layout - Media Area part of the parent no middle blocks Aug 31, 2018

jorgefilipecosta removed the [Status] In Progress Tracking issues with work in progress label Aug 31, 2018

jorgefilipecosta force-pushed the add/layout-half-image-containing-centered-contente-media-part-of-parent branch from 83f545d to 5b0e620 Compare September 4, 2018 17:53

jorgefilipecosta requested review from mtias and jasmussen September 4, 2018 17:53

ZebulanStanphill reviewed Sep 4, 2018

View reviewed changes

ianbelanger79 added [Type] Enhancement A suggestion for improvement. New Block Suggestion for a new block [Feature] Media Anything that impacts the experience of managing media labels Sep 4, 2018

jorgefilipecosta force-pushed the add/layout-half-image-containing-centered-contente-media-part-of-parent branch 3 times, most recently from 8b273d2 to b6e8d13 Compare September 5, 2018 19:16

jorgefilipecosta force-pushed the add/layout-half-image-containing-centered-contente-media-part-of-parent branch from b6e8d13 to 80070df Compare September 7, 2018 20:10

jorgefilipecosta mentioned this pull request Sep 7, 2018

utils: mediaUpload: Pass all available properties in the media object #9704

Merged

jorgefilipecosta force-pushed the add/layout-half-image-containing-centered-contente-media-part-of-parent branch from 80070df to be42a10 Compare September 10, 2018 10:32

jorgefilipecosta requested a review from a team September 10, 2018 10:36

jorgefilipecosta force-pushed the add/layout-half-image-containing-centered-contente-media-part-of-parent branch from 0aa257b to 4a26026 Compare September 10, 2018 14:15

youknowriad approved these changes Oct 19, 2018

View reviewed changes

jorgefilipecosta force-pushed the add/layout-half-image-containing-centered-contente-media-part-of-parent branch from d71e64b to 33db45f Compare October 19, 2018 11:48

jorgefilipecosta added 2 commits October 19, 2018 13:09

Implement Media & Text Block

194e40c

Revisions

e58c3c8

jorgefilipecosta force-pushed the add/layout-half-image-containing-centered-contente-media-part-of-parent branch from 33db45f to e58c3c8 Compare October 19, 2018 12:09

jorgefilipecosta merged commit e50efbf into master Oct 19, 2018

jorgefilipecosta deleted the add/layout-half-image-containing-centered-contente-media-part-of-parent branch October 19, 2018 12:26

jorgefilipecosta mentioned this pull request Oct 19, 2018

Media & Text Block: Allow Stacking on Mobile #10798

Closed

kjellr mentioned this pull request Oct 19, 2018

Add styles for the "Media & Text" Gutenberg Block WordPress/twentynineteen#189

Closed

swissspidy mentioned this pull request Oct 21, 2018

Add context to Media & Text block keyword 'half' #10856

Closed

jorgefilipecosta mentioned this pull request Oct 22, 2018

Fix: Show resizer on "Media & Text" block on unified toolbar mode #10913

Merged

Soean mentioned this pull request Oct 22, 2018

Refinement and consistency for block descriptions #10919

Closed

justintadlock mentioned this pull request Oct 28, 2018

Add support for media-text Gutenberg block themehybrid/mythic#62

Closed

SchneiderSam mentioned this pull request Feb 15, 2019

Add nested blocks inside cover block #13822

Merged

aduth reviewed May 2, 2019

View reviewed changes

jasmussen mentioned this pull request Feb 11, 2021

Try: Media & Text max-width rule. #28922

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add "Text & Image" Block #9416

Add "Text & Image" Block #9416

jorgefilipecosta commented Aug 28, 2018 •

edited by mcsf

Loading

ZebulanStanphill Sep 4, 2018

jorgefilipecosta Sep 4, 2018

ZebulanStanphill Sep 4, 2018 •

edited

Loading

jorgefilipecosta Sep 5, 2018

ZebulanStanphill Sep 4, 2018

ZebulanStanphill Sep 4, 2018

jasmussen commented Sep 5, 2018

jorgefilipecosta commented Sep 5, 2018

jasmussen commented Sep 6, 2018

youknowriad left a comment

paaljoachim commented Oct 22, 2018 •

edited

Loading

lkraav commented Oct 22, 2018

webmandesign commented Oct 25, 2018 •

edited

Loading

paaljoachim commented Oct 25, 2018

aduth May 2, 2019

Add "Text & Image" Block #9416

Add "Text & Image" Block #9416

Conversation

jorgefilipecosta commented Aug 28, 2018 • edited by mcsf Loading

Description

Screenshots

Reviewer notes:

ZebulanStanphill Sep 4, 2018

Choose a reason for hiding this comment

jorgefilipecosta Sep 4, 2018

Choose a reason for hiding this comment

ZebulanStanphill Sep 4, 2018 • edited Loading

Choose a reason for hiding this comment

jorgefilipecosta Sep 5, 2018

Choose a reason for hiding this comment

ZebulanStanphill Sep 4, 2018

Choose a reason for hiding this comment

ZebulanStanphill Sep 4, 2018

Choose a reason for hiding this comment

jasmussen commented Sep 5, 2018

jorgefilipecosta commented Sep 5, 2018

jasmussen commented Sep 6, 2018

youknowriad left a comment

Choose a reason for hiding this comment

paaljoachim commented Oct 22, 2018 • edited Loading

lkraav commented Oct 22, 2018

webmandesign commented Oct 25, 2018 • edited Loading

paaljoachim commented Oct 25, 2018

aduth May 2, 2019

Choose a reason for hiding this comment

jorgefilipecosta commented Aug 28, 2018 •

edited by mcsf

Loading

ZebulanStanphill Sep 4, 2018 •

edited

Loading

paaljoachim commented Oct 22, 2018 •

edited

Loading

webmandesign commented Oct 25, 2018 •

edited

Loading