Add an Option to Manage "Max-Width" of Text and Headings in Gutenberg Editor

[thomasnuggets]

What problem does this address?

I'm always frustrated when trying to ensure optimal readability of text and headings on large screens. Currently, it is difficult to control the line length of text in Gutenberg editor, which can result in poor readability and a less appealing layout. Without the ability to set a maximum width for text and headings, users often face challenges in creating visually pleasing and reader-friendly content, especially on wider displays.

What is your proposed solution?

I propose adding a new option in the Gutenberg editor settings to allow users to manage the "max-width" of text and headings. This feature would provide more flexibility by enabling users to define a maximum width for text blocks and headings, enhancing the layout and reading experience across different devices.

Features:

1. Block Settings:

   • Add a "max-width" option in the settings for each text and heading block.
   • Allow users to specify the "max-width" in pixels, percentage, or relative units (like rem, em).

2. Global Options:

   • Include an option in the global settings of the editor to set a default "max-width" for all text and heading blocks.
   • Allow users to override these global settings at the individual block level.

3. User Interface:

   • Add a field in the block configuration panel where users can enter the desired "max-width" value.
   • Provide a real-time preview of the effect of the "max-width" on the block.

Benefits:

• Improved Readability: By limiting the width of text lines, users can enhance the readability of their content, particularly on large screens.
• Increased Flexibility: This option allows content creators to better control the appearance of their posts and pages, ensuring the text remains visually appealing and easy to read.
• Responsive Compatibility: Using relative units or percentages, users can ensure their content remains well-formatted across different devices and screen sizes.

Example Use Case:

1. A user creates a new post in the Gutenberg editor.
2. They add a text block and want to limit its width for better readability on large screens.
3. In the block settings, they find the "max-width" option and enter "600px".
4. The text block updates in real-time to display the text with the specified maximum width, providing a better reading experience.

Thank you for considering this proposal. I look forward to your feedback and suggestions to improve this request.

[coreyworrell]

I agree this could be useful, but just as suggestion for now, you can wrap with a Group and set "Inner blocks use content width" and then assign a specific max-width there. Or you can make use of CSS text-wrap: balance or text-wrap: pretty (Not fully supported yet) which works very well for headings and leading paragraphs.

[talldan]

In addition to the options on the group block mentioned in the previous comment, there are also global options in the global styles layout panel and in the theme.json file: