0

Is it possible to have line break in Gutenberg post title?

Ideally I'd like not to use custom fields to keep in consistent with the plugins, etc.

2 Answers 2

0

Is it possible to have line break in Gutenberg post title?

Sometimes, but the solution is the same as pre-gutenberg, there has been no changes.

If you are an administrator on a single site, or a super admin on a multisite, then your user will have the unfiltered_html capability. If you have this capability, you can write HTML tags in post content and titles without the whitelist being applied.

Keep in mind though, that this also allows you to write invalid HTML that can break your sites layout, as well as dangerous tags such as script tags etc

Fundamentally though, a post title should just be a title. If you're trying to add sub-titles then this should be done through additional functionality

0

I know this is an older topic, but I find it still very relevant.

Recently, a client asked me how they can add a line break within a post title. Manually inserting <br> tags proved to be difficult for them, and I believe it might be the same for other users.

So, I tried to create a JS script to automate this process. However, the current implementation doesn't significantly simplify the task. You still have to switch to code view and then press Ctrl + Shift + B, which generates a <br> (btw key combinations could be anything else). You might ask, how is this any easier than just typing <br>? And You are right.

This code snippet rather serves as a demonstration and potential starting point for further refinement. It's not a perfect solution, but an initial step.

The JS (break-in-post-title.js)

document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.shiftKey && e.code === 'KeyB') {
    const titleInput = 
    document.querySelector('h1[contenteditable="true"].editor-post-title__input');

    // cursor position
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);

    const startPos = range.startOffset;

    // content before-after cursor pos.
    const textBeforeCursor = titleInput.innerText.substring(0, startPos);
    const textAfterCursor = titleInput.innerText.substring(startPos);

    const brNode = document.createElement('br');

    range.insertNode(brNode);

    // update title with <br>
    titleInput.innerText = textBeforeCursor + '<br>' + textAfterCursor;

    selection.collapseToEnd();

    e.preventDefault();
  } 
});

Here is the functions.php which calls the JS file. It only calls when user is in editing mode.

function enqueue_break_in_post_title_script() {
  // if current screen in editing mode
  $current_screen = get_current_screen();
  if ($current_screen && ($current_screen->base === 'post' || $current_screen->base === 'page')) {
      
      wp_enqueue_script('break-in-post-title', get_stylesheet_directory_uri() . '/assets/js/break-in-post-title.js', array(), '1.0', true);
  }
}
add_action('admin_enqueue_scripts', 'enqueue_break_in_post_title_script');
2
  • note that inserting a <br> is only possible if you are an admin on a non-multisite install with the unfiltered_html capability that bypasses the security restrictions, you're not normally meant to be able to do that as it would be stripped out on save, and on some WordPress hosts they prevent you from being able to have that capability at all no matter what role your user has
    – Tom J Nowell
    Mar 28 at 17:53
  • Also, that JS modifies the DOM nodes in the block editor but that's not where the post title is stored, it's just the UI for the wp.data store behind the scenes so it won't persist correctly
    – Tom J Nowell
    Mar 28 at 17:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.