• In TinyMCE (classic) the max-width for the editor is taken from the active theme, resulting in real WYSIWYG editing. For example in theme Twenty sixteen: 840 pix for pages and 600 pix for posts.

    You have separate max-width values for pages and post in your plugin setting so the TinyMCE behaviour can be emulated by manually inserting correct max-width values.
    Great!

    But to achieve this result, you have to know the correct values or measure them on the website before adjusting the plugin settings.
    A working solution for experts, but hard for beginners. So it would be very good to have an additional settings option for max-width on pages and posts: use values of actual theme

Viewing 12 replies - 1 through 12 (of 12 total)
  • It’s a good point. It’s tricky to pull off.
    The 840px is in the global variable for $content_width. So I could make that (if defined by the theme) the fullwidth default. But the 600px is only defined in their stylesheet and there isn’t really a way across themes to access that kind of data.
    One possible solution would be to create a database with the top 100 themes where you manually found the widths associated with full width or sidebar content but that would be tricky to manage, update and create.

    In the end similar to the classic editor I would assume themes will start to add in their own width support for Gutenberg (or Gutenberg will come out with an easy filter that themes could define widths with.

    So perhaps a better solution is just to allow the editor width setting to be turned off in favor of the theme settings unless the user wanted the extra controls.

    Thread Starter burnuser

    (@burnuser)

    I think a 50% solution is a good start!

    But I recommend only a clear communication:

    1.) Rename the two templates to something neutral like: “small” and “large”, because “Sidebar Template” and “No Sidebar Template” is only one possible usage (for example I use it for pages and posts – both with sidebar)

    2.) Declare the actual theme $content_width value only in a textline like:
    “Max Width (for pages) by active theme:” and “840 pix” or “not defined”

    3.) Let Fullwidth be really fullwidth

    So, even when the theme is changed, everyone can see the actual value and decide what value to use and nothing is hidden in background adjustments.

    Hey,
    Thanks for the feedback. I’m testing different options. I’m not sure I understand what you mean with fullwidth, can you clarify that for me?

    Thread Starter burnuser

    (@burnuser)

    You have 2 different fullwidth settings with nearly the same wording but different functionality:

    1. “Fullwidth” in the plugin settings as selectable option for “Post default” / “Page Default” … seems to use Gutenberg default width (not was I expected – maybe rename it to “Gutenberg” and make “Fullwidth” an extra option?)

    2. “Full Screen Width” in the “Editor Max Width” options on post/page editor screen … which does what it says – and this is what I mean with fullwidth.

    ok, I see 1 is an error that should have been fullwidth and wasn’t working. I’ll update today with a fix.

    Thread Starter burnuser

    (@burnuser)

    It works!
    Thank You!

    Thread Starter burnuser

    (@burnuser)

    OK, in the moment it is not true WYSIWYG.
    But to get WYSIWYG like in Classic TinyMCE seems to be a real problem:
    I have to add 30 pix (840 + 30 = 870) to get a WYSIWYG display with measured 840 pix width in the editor. (Some Gutenberg paddings/margins should be taken in calculation?)
    But I have to add only 10 pix to get the same line breaks like in the website.
    So I discovered, that Gutenberg (unlike Classic TinyMCE) uses not the same font like the website => generally precalculated WYSIWYG is not possible!
    Don’t know what to do …

    By the way:
    The Editor Max Width options in post/page are accidentally changed: “Small” delivers large, “Large” delivers small template.

    OK, in the moment it is not true WYSIWYG.

    This is an issue with Gutenberg. They add a lot of margin that isn’t there on the frontend. I don’t understand some of the reasoning behind it.

    But I’ll test some options for making the editor editing space closer to the front end.

    So I discovered, that Gutenberg (unlike Classic TinyMCE) uses not the same font like the website => generally precalculated WYSIWYG is not possible!

    This comes down to theme support. Our themes are set up for the same font to be used in Gutenberg that is set for the front end. You should ask the theme author to add this support.

    Thanks for the note about small and large. I’ll fix that.

    Ben

    Thread Starter burnuser

    (@burnuser)

    Thank You for Your ongoing efforts!

    And I have one point more ??

    I think the width settings really need an additional deactivation and/or “Original” option (which means unchanged – using original Gutenberg/Theme configuration)

    Your plugin has two different functions: Blocks and Max-Widths

    But if I need only Blocks and not Max-Widths, I have a problem, because I have to deactivate the whole plugin – including the Blocks! – for deactivating Max-Width settings.

    a) At the moment I need very often Gutenberg original settings for testing purposes. (Bad, if I have used your great page builder blocks!)

    b) In the hopefully future, when more and more themes learn to control Gutenberg like TinyMCE, your plugin could be a perfect combination, if they only control WYSIWYG fonts … or a potential conflict, if the theme controls the editor width too.

    So a separate deactivation option for Max-Widths settings (leaving Blocks active) and/or an additional “Original” option (also useable for testing on a single page) would be really helpful …

    Hey, Thanks for posting. I’m going to push out an update today that adds an option to turn it off.

    Ben

    Thread Starter burnuser

    (@burnuser)

    Thanky You!
    a) large = large, small = small
    b) Width Off works
    c) Width is now much closer to WYSIWYG

    But I can’t find any difference in effect between “True” and “False” in “Enable Less Margin CSS”?

    It’s subtle but the content inside the blocks have less padding around each item. Look at the outline around a paragraph block with it turn on and turned off.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Max-width from theme for WYSIWYG’ is closed to new replies.