Make WordPress Core

Opened 2 years ago

Closed 18 months ago

Last modified 18 months ago

#33300 closed task (blessed) (fixed)

More text patterns

Reported by: iseulde Owned by: iseulde
Milestone: 4.5 Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords: needs-patch dev-feedback
Focuses: javascript Cc:


I'd like to add a pattern for a horizontal rule (probably ^-{3,}$), and add support for inline patterns. Any other patterns that should be in core?

This will require some rethinking of the current code.
It'd be great if a WordPress plugin could add and remove patterns.

Attachments (8)

33300.patch (6.8 KB) - added by iseulde 19 months ago.
33300.2.patch (6.8 KB) - added by iseulde 19 months ago.
33300.3.patch (3.1 KB) - added by iseulde 19 months ago.
33300.4.patch (622 bytes) - added by azaozz 19 months ago.
editor-pattern-help.png (99.8 KB) - added by ryan 19 months ago.
Help dialog showing new patterns, Macnchrome
editor patterns iphone 6 plus.PNG (134.2 KB) - added by ryan 19 months ago.
Editor patterns on an iPhone 6+
33300.5.patch (4.4 KB) - added by iseulde 19 months ago.
33300.6.patch (5.5 KB) - added by azaozz 18 months ago.

Download all attachments as: .zip

Change History (45)

#1 @johnbillion
2 years ago

  • Keywords needs-patch dev-feedback added

Backticks ` for <code> blocks please!

#2 @jeremyclarke
21 months ago

+1 for a horizontal rule text pattern, though I guess now it's semantically called a "thematic break":

In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

Also definitely +1 for a PHP API to add new patterns if possible. I'm still looking to see if there is one but this ticket implies it doesn't exist yet.

I was hoping for something like add_text_pattern() and remove_text_pattern(), but even a guide similar to this one (about filtering tiny_mce_before_init to insert custom formats) would be super useful.


Personally I want to add shortcuts for code and for our custom blockquote.translation blocks.

Related: http://wordpress.stackexchange.com/questions/213330/how-can-i-register-a-custom-text-pattern-wp-4-3-for-tinymce

#3 @mikeschroder
20 months ago

  • Milestone changed from Future Release to 4.5
  • Owner set to iseulde
  • Status changed from new to assigned

#4 @iseulde
19 months ago

  • Status changed from assigned to accepted

Aiming to put this in by the end of the weekend. This will include conversions on paste.

19 months ago

#5 @iseulde
19 months ago

Need an alternative for the bookmark as it does not remove itself. Also tests are timing out in PhantomJS, not sure why yet.

19 months ago

#6 @iseulde
19 months ago

In 36627:

TinyMCE: inline text patterns

First run.

See #33300.

#7 @iseulde
19 months ago

Please test. Next meeting we should confirm if this is good behaviour, as well as decide whether or not to add some shortcuts on paste. @mikeschroder

Last edited 19 months ago by iseulde (previous) (diff)

This ticket was mentioned in Slack in #core by jorbin. View the logs.

19 months ago

#9 @jorbin
19 months ago

  • Type changed from enhancement to task (blessed)

#10 @ramiy
19 months ago

Few more possible patterns:

  • -..- for striked through text <del></del>.
  • --..-- for underlined text <span style="text-decoration: underline;"></span>.

Single patterns:

  • ---- for <hr>.

And single patterns for "WordPress tags":

  • ++++ for <!--more-->
  • &&&& for <!--nextpage-->

19 months ago

#11 @iseulde
19 months ago

In 36719:

TinyMCE: textpattern: clean up

  • Use editor.once instead of storing into variables.
  • Add pattern for hr.

See #33300.

#12 follow-up: @ramiy
19 months ago

@iseulde, the > pattern for blockquotes is good for LRT view. We should add < blockquote pattern for RTL view.

#13 @azaozz
19 months ago

In 36720:

TinyMCE textpattern: fix error when inserting <hr> if the new paragraph is not direct child of the body.

See #33300.

#14 in reply to: ↑ 12 @azaozz
19 months ago

Replying to ramiy:

the > pattern for blockquotes is good for LRT view. We should add < blockquote pattern for RTL view.

That's pretty easy to do however in RTL Chrome inserts < when I type >, so changing it will not work. Or we can add both < and > in RTL?

Last edited 19 months ago by azaozz (previous) (diff)

19 months ago

#15 @azaozz
19 months ago

33300.4.patch for testing in RTL.

Last edited 19 months ago by azaozz (previous) (diff)

#16 follow-up: @iseulde
19 months ago

@ramiy: Thanks for the feedback. Underlining is a bad practice for web documents if the underlined text is not a link. So that's a no. <del> has no common pattern or markdown pattern, so we can't do that either, and I don't think it's a good idea to start adding custom WordPress shortcuts for more and next page...

#17 @iseulde
19 months ago

Maybe, at some point, it could be cool to have inline UI to switch between HR, more and nextpage.

#18 @aduth
19 months ago

<del> has no common pattern or markdown pattern

Apologies if I lack the background, but while it's true that <del> is not part of the Markdown or CommonMark specs, it is a feature of GitHub Flavored Markdown:



This is a ~~mistake~~ success.

Slack offers a similar single-tilde format:



This is a ~mistake~ success.

Last edited 19 months ago by aduth (previous) (diff)

#19 in reply to: ↑ 16 @ramiy
19 months ago

@iseulde, My way of thinking is a bit different. I was looking at the current TinyMCE buttons and I think we should create text patters for all those buttons, or at least for the basic buttons. To make it easy to write content without the mouse, only the keyboard.

The basic buttons are:

  • Bold <strong> - introduced in wp4.3
  • Italic <em> - introduced in wp4.3
  • Strikethrough <del>
  • Unordered List <ul> - introduced in wp4.3
  • Ordered List <ol> - introduced in wp4.3
  • Blockquote <blockquote> - introduced in wp4.3
  • Horizontal Rule <hr> - will be introduced in wp4.5

For now, only the strikethrough <del> has no text pattern.

Also, you said that underlining is a bad practice, but we have an underline button in the editor. In my opinion we should probably add an underline pattern, but we don't have to do it in 4.5.

#20 @azaozz
19 months ago

In 36761:

TinyMCE textpattern:

  • Add description of the new patterns to the Shortcuts help modal.
  • Fix the layout a bit and make the patterns in two columns.
  • Disable the textpatterns plugin in IE < 9.

See #33300.

#21 @azaozz
19 months ago

In 36762:

TinyMCE textpattern: Horizontal line is translated, Horizontal rule is not.

See #33300.

#22 @swissspidy
19 months ago

@iseulde Shortcuts on paste would be a nice improvement.

I just tried inserting a backtick, pasting a word and adding another backtick.

Expected: The pasted word between <code></code>
Actual: The pasted word between backticks.

This ticket was mentioned in Slack in #core-flow by boren. View the logs.

19 months ago

#24 @ryan
19 months ago

I ran through the new patterns on Macnchrome and an iPhone 6+. I noticed the lack of shortcut on paste as well, particularly with code. Otherwise, behaving well.

19 months ago

Help dialog showing new patterns, Macnchrome

19 months ago

Editor patterns on an iPhone 6+

19 months ago

This ticket was mentioned in Slack in #core by chriscct7. View the logs.

19 months ago

#26 @mikeschroder
19 months ago

@iseulde: What's left here? Is it being considered to treat <code> differently from the other text patterns (for paste reasons), or are we deciding that it is intended behavior?

#27 @helen
19 months ago

I've been using this for a bit and have the following thoughts. I would note that I am neither a fan nor a frequent user of Markdown and don't think that it should serve as a canonical source of patterns.

  • `code` is awesome for the fairly small subset of people who need it, and is a perfectly good place to include a little bonus for these users. :)
  • It does seem like it should convert text that's been pasted between open/close patterns. Not sure if this is what was meant by converting on paste; I had interpreted that feature as converting patterns contained within the paste, which I don't think should be done.
  • The open/close patterns seem a little too liberal with converting. I think there should be a space/newline before the start indicator and after the end indicator, with no space on the other side. Right now wp_function_name ends up as wpfunctionname and blah * blah * blah ends up as blah blah blah, which seems a bit strange and very unlikely to actually be what most people want.
  • If there's only a single space between the open/close indicators, doesn't seem like it should convert. Right now it just ends up with your text disappearing, which is alarming.
  • Generally I dislike that there are multiple patterns for the same thing. We should pick one and stick with it, preferably one that is memorable but not something that would commonly be used for other reasons/habits.
  • Per above, for <hr> I would suggest just --- and not ***. Having it be of any length of 3 or more seems okay, though. I don't know if it's meant to work with spaces between the characters, but it doesn't make any sense to do so since they'll convert to an unordered list most of the time (exception is when you've backspaced to undo that conversion).
  • I am not very convinced of the utility of bold/italic. Asterisks/underscores are annoying to type on most of the touch screen keyboards I've used (where selecting text to format after the fact is burdensome), and the usual keyboard shortcuts when you can press multiple keys seem intuitive/generally learned enough. I can certainly be convinced that they are useful; would like to hear opinions on this.
  • If we keep bold/italic, I would again go with just one pattern for each, and would suggest **bold** and __italic__. I recognize that this is a pretty significant deviation from Markdown, but I think that the differentiation as well as the double characters make it more intentional. I am likely biased because I use *thing* frequently and hate when it converts. If you ever see something from me in Slack that is bold and struck out, it's because I was trying to be *~flippant~* :) And speaking of Slack, they have a great line on why they use *bold* and _italic_: "Our message formatting is similar to other popular services like Skype and Google Talk, and is intended for a majority of our users who are unfamiliar with Markdown."

This ticket was mentioned in Slack in #core-editor by helen. View the logs.

18 months ago

This ticket was mentioned in Slack in #core by chriscct7. View the logs.

18 months ago

This ticket was mentioned in Slack in #core by helen. View the logs.

18 months ago

#31 @azaozz
18 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 37023:

TinyMCE: after discussion in Slack https://wordpress.slack.com/archives/core/p1458164584000700

  • Remove *** and ___ text pattern and support for spaces in ---. The only <hr> text pattern is 3 or more dashes, no spaces.
  • Remove the *, **, _, and __ text patterns for bold and italic.

Fixes #33300;

#32 @SergeyBiryukov
18 months ago

In 37024:

TinyMCE: Adjust textpattern tests for the changes in [37023].

See #33300.

#33 follow-up: @ramiy
18 months ago

Another thought: we can also use ~~~ for horizontal lines <hr>.

#34 @ramiy
18 months ago

The current patterns are confusing, I think we should reserve different chars to different actions:

  • # for headings. #, ##, ###, ####, #####, ######
  • * for bold text. *, **
  • _ for italic text. _, __
  • ~ for strikethrough. ~, ~~
  • ` for code.
  • - for horizontal lines. ---

#35 in reply to: ↑ 33 @DrewAPicture
18 months ago

Replying to ramiy:

Another thought: we can also use ~~~ for horizontal lines <hr>.

--- (hyphens) already works for horizontal rules <hr />

18 months ago

#36 @azaozz
18 months ago

In 33300.6.patch: add editor settings to add or override the default text patterns.

add_filter( 'tiny_mce_before_init', 'textpatterns_test' );
function textpatterns_test( $init ) {
	$init['wptextpattern_inline_patterns'] = '{
		strong: { start: "*", end: "*", format: "bold" },
		strong2: { start: "**", end: "**", format: "bold" },
		em: { start: "_", end: "_", format: "italic" }

	return $init;

#37 @iseulde
18 months ago

In 37080:

Editor: wptextpattern: add back inline tests

See [37024].
See #33300.

Note: See TracTickets for help on using tickets.