Support » Plugin: TinyMCE Advanced » Great now for Gutenberg too! But …

  • … there are some missing formatting elements in regular blocks. Some mentioned by others, but here is my personal hitlist:
    1.) “Non breaking space” … I use it a lot in lists with special expressions!
    2.) align – justify … much needed!
    3.) Font Family … great to emphasize some special content
    4.) Font size … like pt 3 above
    5.) Insert special Character

    To be clear: TinyMCE Advanced is the one and only plugin, which makes Gutenberg and WordPress really usable!
    But adding some – or all – of the above listed features would be great too!

    πŸ™‚

Viewing 10 replies - 1 through 10 (of 10 total)
  • 6.) Search & Replace on whole page
    … discovered today, that this feature works in Gutenberg only in active block!

    I Know that there are Database related plugins to replace something, but I think that is an overkill – and without visual feedback (that’s dangerous too) – for simple text replace operations on a single page.
    I remember well when I migrated an old HTML website to WordPress not so long ago and the TinyMCE Advanced’s Search & Replace feature saved me countless hours of work on large scale changes!

    Don’t know if it’s possible in Gutenberg, but it would be really great if we can get this very valuable feature back for whole page editing!

    Testing update on “Justify”:
    In WP 5.0.3 with and without Gutenberg 5.0.0 “Justify” works on classic block / classic paragraph BUT if converted to blocks, it is removed.
    Regular paragraph block refuses also adding “Justify” code in HTML.

    πŸ™

    Plugin Author Andrew Ozz

    (@azaozz)

    Yep, great list πŸ™‚

    1.) β€œNon breaking space” … I use it a lot in lists with special expressions!

    This should be possible but wasn’t working well when I tried it. Will definitely add it once it works well.

    2.) align – justify … much needed!

    This is still “questionable”, there was a decision to not support it/remove it in Gutenberg. It works on the block level. Currently there is no easy way (API) to add this but should be possible in the future.

    Of course “Justify” will always work in Classic blocks (TinyMCE).

    3.) Font Family … great to emphasize some special content

    This can be added as additional formatting, i.e. wrapped in a span, but may be better as a block level attribute. Looking at it for the next version.

    4.) Font size … like pt 3 above

    This is available only for Paragraphs blocks. Again, it can be either as a span with inline style or block level (preferred). Looking at adding in the next version.

    5.) Insert special Character

    This can be done as a “pure” Gutenberg plugin not connected to TinyMCE, should be in the next version.

    6.) Search & Replace on whole page

    Yeah, this would be “nice to have” for the full page not only in active blocks. Was looking to activate the block following the selection but may be possible to replace without activating too. Looking at it. This actually works the same as spellchecking, if I get it to work well may look at adding custom/external spellchecking as well.

    Thank You for continuing effort to make it better and better πŸ™‚

    I did some testing with non breaking space today:
    1.) It works in classic / classic paragraph
    2.) It works in paragraph when classic / classic paragraph converted to blocks
    3.) It works when inserted as HTML in regular paragraph
    4.) It works when reconverted to classic paragraph

    The only issue I discovered is that it is not every time shown in HTML code after opening/updating a post/page. But after some clicking around (triggering some display update mechanism?), the HTML view seems to be updated and shows the   again. (Don’t know why.) But it works with and without the correct display of   in HTML.
    So I think non breaking space can be added to regular block toolbar anytime without any problem.

    Tested also Font Family and Font Size:
    Manually wrapping in <span> – like in Classic Block / Classic Paragraph – works in regular paragraph without any problem.

    Plugin Author Andrew Ozz

    (@azaozz)

    Yep, the problem with nbsp is mostly with keeping the actual HTML entity instead of the UTF-8 character U+00A0 (which is “invisible” in HTML view). There was recently a fix for this in Gutenberg so it should be possible now.

    Right, it is (should be) possible to add inline HTML elements with style attributes in all richText areas. I know some people, especially some designers are not happy about that as it may “break” the design on the front-end.

    The alternative is to add inline elements (spans) with classes, so the themes can style them properly. Unfortunately this is theme specific. Was looking in adding spans with classes and then output some basic CSS in the editor and on the front-end to style them. Been testing this approach for a while, will probably add it soon-ish and see how it goes πŸ™‚

    • This reply was modified 7 months, 1 week ago by  Andrew Ozz.

    In my opinion, simple HTML is the best solution for basic inline formatting.
    I know, that a lot of web designers hate all inline formatting and would like to solve everything with CSS – coded in the Theme.
    But TinyMCE Advanced is NOT for code writing developers, but for millions of regular users! (And to be honest: the same web designers hate TinyMCE Advanced too, because it allows users to do their own formatting πŸ˜‰
    And last not least changing Themes without any effect on existing Inline formatting done by TinyMCE Advanced is a big advantage of your plugin!

    Don’t think to complicated.
    Be consistent with existing formatting.
    A newly formatted part of text in a regular paragraph block should – viewed in HTML – look like an exiting classic block / classic pragraph with the same formatting.

    Anyway, You have no chance to make hardcore web designers happy with your plugin πŸ™‚

    Plugin Author Andrew Ozz

    (@azaozz)

    And to be honest: the same web designers hate TinyMCE Advanced too, because it allows users to do their own formatting πŸ˜‰

    Right. This touches the (much bigger) issue of designer’s relations with clients, and the ability of clients/users to override designer’s decisions.

    Yes, using inline styles has the advantage of working after switching themes and the disadvantage of making it harder for designers to “enforce” particular looks. I’ve been looking at adding a class to elements with inline styles to make it a bit easier for designers. For example:

    <span class="tma-custom-font" style="font-family: Arial, Helvetica, sans-serif;">...</span>

    However that’s not much of a help. A better option may be to add:

    <span class="tma-custom-font tma-font-family-Arial-Helvetica-sans-serif">...</span>

    and then have some CSS like:

    .tma-font-family-Arial-Helvetica-sans-serif {
        font-family: Arial, Helvetica, sans-serif;
    }

    which would let the theme to override the exact font-face used but “honor” the intention of the user to have a sans-serif font. For example the theme can do:

    .tma-font-family-Arial-Helvetica-sans-serif {
        font-family: Lato, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    }

    Still looking at/thinking about it. All ideas/help appreciated πŸ™‚

    • This reply was modified 7 months, 1 week ago by  Andrew Ozz.
    • This reply was modified 7 months, 1 week ago by  Andrew Ozz.

    For myself, I don’t want anybody to override my formatting decisions!

    And to make designers happy, you must not allow any inline formatting.

    And a more complex solution is a source of additional problems too. For example there is – at the moment – only one other plugin for Gutenberg which enables some inline formatting -less than TinyMCE Advanced, but with classes.
    And I ran into two problems on testing it:

    a) Tried to change the formatting afterwards with TinyMCE Advanced and get some working changes … and some HTML chaos.
    So, please, be consistent with existing HTML formatting! A lot of users – more than 2 Millions – have used TinyMCE Advanced in the pre-Gutenberg time and expect – when converting their content into blocks – that they can change all old formatting and mix it up with new formatting without any problem.
    Also a HTML copy of a formatted text should work everywhere and everytime as the original. And that can only be achieved by using regular HTML – without any dependencies which may be not available on insertion target.

    b) The second problem with the tested other plugin: It created surprisingly some big problems in the Text Widget (losing some important formatting options – until deactivating the plugin). Don’t know if the use of classes is the cause of this problem, but I’m sure that every added complexity (CSS, classes, …) will be an additional source of potential conflicts with other tools, plugins, layout options, …

    My suggestion: Don’t even try to get the love of web designers (no chance), but respect the formatting decision of users. And realize this with the simplest, most stable and most interchangeable formatting solution … and use clean HTML!

    I’m a WordPress trainer for many years and live also for many years with the hate of designers, because I’m propagating the freedom of creating and designing websites by normal people without coding a single line.
    And I recommend your plugin everytime as a great representation of this freedom!

    Plugin Author Andrew Ozz

    (@azaozz)

    For myself, I don’t want anybody to override my formatting decisions!

    And to make designers happy, you must not allow any inline formatting.

    And a more complex solution is a source of additional problems

    Yeah, all very good points πŸ™‚

    My suggestion: Don’t even try to get the love of web designers (no chance), but respect the formatting decision of users. And realize this with the simplest, most stable and most interchangeable formatting solution

    Agreed! Very good suggestions, I’ve been thinking along these lines too. Not really trying to “get the love of web designers”, just to “unblock” this so the themes have a way to improve on what the users have chosen.

    The most “subtle” way I’ve tried was to add a class with the first font name for font-family and the value for font-size. Something like this:

    <span class="font-family__arial font-size__24px" style="font-family: Arial, Helvetica, sans-serif; font-size: 24px;">...</span>

    This matches how things work now, just adds a bit more info about what the user intended while editing the post. (Was also looking into using data-* attributes but they may be a bit problematic for users without “unfiltered_html” capability.)

    Also, the font-family is not that critical, but the font-size limits how the webpage looks on different devices. The size is “locked” by the user and won’t be displayed as intended on a cell phone for example or (in some themes) when the browser window is very large.

    This, of course, can be fixed by using relative values for font-size: 1em, 1.5em, 2em, etc. or percents. Perhaps that would be the best option as it’s simplest πŸ™‚

    Two points: Don’t reinvent the wheel AND be conform with WP core if possible:

    I) Font Size:
    WP-Gutenberg itself provides a variable fontsize setting (for whole paragraph):
    a) <p style="font-size:21px"> … for exact size
    b) <p class="has-medium-font-size"> … using class
    Would be a good idea to simply follow WP standard in this case?
    But I think relative values – if easy to implement – could work too. (Maybe as choice in TinyMCE Advanced options?)

    II) Font Family:
    What about 2 different options:
    a) Hardcoded style = 100% identical existing usage (no class!)
    <span style="font-family: arial, helvetica, sans-serif;">
    b) Provide a Theme controlled Styling/Font list (with hardcoded IIa as fallback)
    AND let Admin-user select in TinyMCE Advanced options which one (a/b) to use in Editor
    OR make an additional selection field in Editor for Theme Styles/Fonts … which maybe the best solution, because which controls are shown in toolbar are anyway configured in TinyMCE Advanced Options!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Great now for Gutenberg too! But …’ is closed to new replies.