@lukecarbis See above for conflicts notice.

@lukecarbis Without this option checked, I still get new paragraphs when I create a new line.

I noticed that the Rich Text controls disappear when typing. This felt weird, but then I checked the normal paragraph block and noticed that the behaviour is the same there.
See this vid for what I mean
https://d.pr/v/Ja6liq

Also, is it possible to get the text alignment options?

Hey @lukecarbis
Testing this further this morning and saw this bug.
Basically, I can't seem to go back to an empty state for the rich text field.
https://d.pr/v/0k0AuY

Looks Good
Alignment Buttons

Hi @lukecarbis,
This PR looks good. If it would help, I'm working on a commit that adds alignment buttons:

This is awesome. Looking forward to it being merged.

I would like to see a format menu for headers though and a list option. You can use separate blocks for headings and lists but if your rich text is part of a larger "format" style block (say a 2 column image + text block with a background colour / image) it would be nice to have lists and headers. No more than that though. Keep it simple.

This might be a nightmare to implement, but it would be amazing if there was some way to control the options that are available in the editor. For instance, in some cases it would be useful to limit them to multiple lines of text only (no formatting other than bold and italic, perhaps), other times headings might be useful and in some cases alignment might be good, too.

Perhaps the editor could have three settings (minimal, standard, full) that would enable different levels of control.

Minimal: multiple lines, bold, italic, links
Standard: minimal + headings, lists
Full: everything else

Hey guys, just a quick question:

We need this feature for a project. How is the progress? When can we expect this feature to be distributed in a release?
Thanks!

@AndrewSheetMetal We're hoping to release it in our 1.3 milestone, which we're working on right now. :)

Question About Alignment Controls

Hi @lukecarbis and @RobStino,
Hope you had a great weekend.

Would you like the Rich Text control to have alignment controls?

Below is the current Rich Text control, with the possible location of alignment controls.

I liked the location here better, maybe the API changed in the meantime.

I'm not sure if it's possible to get the RichText to display the alignment selected, though. For example, on clicking "Align text right," it'd be best if the RichText showed everything aligned to the right:

If you'd like alignment controls, I'll look at this more.

Thanks!

This PR already worked pretty well, even before I made some commits above. The .gif above shows the current state.

All of the controls shown above are included in the RichText by default, including Code, Inline Image, and Strikethrough. Except for the alignment controls shown above.

@kienstra I like the earlier version of the alignment controls better too (where they're not hidden behind a dropdown). But if that's no longer easily possible, I don't have that strong feelings about it.

Showing how the alignment effects the text, however, is very important. Without it, I'm sure I would think it was a bug.

Hi @lukecarbis,
Thanks for looking at this.

@kienstra I like the earlier version of the alignment controls better too (where they're not hidden behind a dropdown). But if that's no longer easily possible, I don't have that strong feelings about it.

Yeah, that display was better. I'll look at if it's still possible.

Showing how the alignment effects the text, however, is very important. Without it, I'm sure I would think it was a bug.

Good point. I'll also work on this.

Haven't yet been able to test alignment controls. Is that committed yet?

No, I just have it locally in a messy commit 😄It's not working in the sense of applying the alignment in the editor.

Hey all.
Testing this and it's looking good. Everything so far is behaving as expected.
Re the field setting for having enter start a new paragraph. I think this should be the default and actually be removed as a setting altogether. I can't think of a good use case otherwise. Also, shift + enter creates a break tag anyway so I think we're covered.
Looking forward to testing the alignment controls.

Seeing that the control just doesn't work in the Inspector, I think we don't make it an option for this particular field. For now at least.

Re the field setting for having enter start a new paragraph. I think this should be the default and actually be removed as a setting altogether. I can't think of a good use case otherwise. Also, shift + enter creates a break tag anyway so I think we're covered.

Good point. Unless there are other ideas, I'll remove the 'Use Paragraphs' option for now.

Hi @lukecarbis,
Thanks a lot for reviewing this.

+1 for not selecting the whole line of text to realign it.

Sure, that's applied now.

Buttons looks good to me. They match the paragraph block. Just one very minor glitch:

How does the fix in d3901de look?

I'm seeing some screwy behaviour with new lines after alignment. Are we intending to break aligned text into a div? Should it be a paragraph?

Good point, f7983f6 makes aligned text and new lines <p> tags.

Also, is it possible to style the text in the rich text area to better match a standard textarea? Something as simple as reducing the font size would makes a big difference.

Yeah, 13px would make this look more like the Text Area control.

To me, it looks a little small, though:

@RobStino Can we get a third opinion on the text size? I prefer it smaller (matching a textarea).

Looks great! Some thoughts here: https://www.fromsmash.com/n-8KJbnS-f-c0

Hey friends
Epic work Ryan btw!
Couple of things:

• I agree with 13px. Keeping font size consistent between similar style fields is important I think.
• the grey highlight you get is the same experience you get when formatting text in a regular text Block. I’m guessing this is where this has come from.
• this carry over behaviour is probably what is causing the issue Luke spotted when he added a character to the same line as the centre aligned text.

The commits above partially address the testing comments. There's still more work needed, though.

Finishing the alignment controls (left, center, and right) could take at least a few more days. The behavior for alignment controls is a little different from the other controls, like bold.

For example, as mentioned above, placing a cursor at the end of a centered line and typing line should result in more centered text, not a new line.

But the built-in behavior of the RichText, like for bold or italic, is that it doesn't continue the formatting. It wouldn't be bold on placing a cursor at the end of bold text and typing. So I've been overriding the RichText component to accommodate the alignment controls.

Just had a look through the code. Obviously having to extend the rich text is not ideal, but your implementation is really neat, there's obviously no other way to get alignment working the way we'd like it to.

Nice work!

Obviously having to extend the rich text is not ideal, but your implementation is really neat, there's obviously no other way to get alignment working the way we'd like it to.

Thanks, @lukecarbis! Didn't want it to seem like I was complaining, just explaining it was taking a while 😄

Extending RichText

Extending the RichText component isn't working locally so far.

Extending it looks to be necessary for certain behaviors of the alignment controls to work.

For example, I've been working on a class:

const { RichText } = wp.editor;
const { LEFT, RIGHT } = wp.keycodes;
const { getComputedStyle, isCollapsed } = wp.richText;

/**
 * Browser dependencies
 */
const { getSelection } = window;

class BlockLabRichText extends RichText {


	/**
	 * Constructs the component class.
	 */
	constructor() {
		super( ...arguments );
		this.onSelectionChange = this.onSelectionChange.bind( this );
		this.onKeyDown = this.onKeyDown.bind( this );
		this.handleHorizontalNavigation = this.handleHorizontalNavigation.bind( this );
		this.onPointerDown = this.onPointerDown.bind( this );
	}

	/**
	 * Overrides the parent implementation of the `selectionchange` handler.
	 *
	 * Mainly copies the parent implemetation.
	 * The main difference is that this allows selecting the entire format by clicking on its border.
	 */
	onSelectionChange() {
		...
	}

	/* etc... */
}

But this class isn't using onSelectionChange above or the other extending methods. It's simply using the onSelectionChange() method in the parent RichText class when I debug this.

I'll keep looking at this, but it might not be possible to override these methods in the class to get the expected behavior for the alignment controls.

@kienstra It might be best to pull alignment controls entirely in that case, and put them in a separate issue.

Alignment Controls Removed

Hi @lukecarbis,
Thanks a lot for your ideas for the alignment controls.

I couldn't get them to work, including with the onChangeAlign() method.

This would probably need to extend RichText somehow, but like we talked about, that's not recommended in React.

The behavior of the default formats like bold is different from the alignment formats in a few ways. I don't see a way to accommodate the alignment formats.

For example:

Without alignment controls, this works brilliantly. I can't approve, since I started the request, but this has my green tick.

Just one topic of discussion. What do you think about reducing the gap between paragraphs from 0.1em to something a little lower? 0.67em looks a little nicer, in my opinion, and still provides a clear distinction between paragraph break and line break. Very minor difference:

Hi @lukecarbis,
Good idea. How does a5856e5 look?

It uses you idea of reducing the margins:

Also, it removes the FORMATTING_CONTROLS constant, as it was simply the default value in RichText.

Great work Ryan.

✅ Review passed.

Thanks, Luke! Thanks a lot for your work on this.

Thanks!

Hi @RobStino,
All good, thanks a lot for testing this!

Is this block type only available in early access/pro? I just installed 1.3.4 and don't see this as an option.

Hi @alancwoo, yes, the Rich Text field is only available in the Pro version.