Site Editor: Document title is misaligned when in Style Book/Revisions mode

[t-hamano]

Description

Note

This issue occurs in Gutenberg versions 18.1 and above, so it does not reproduce in WP6.5.

In the site editor, when you open the Style Book or Revisions page, the title shifts to the left. I think this is caused by #59134.

Style Book:

Revisions:

The CSS introduced in #59134 assumes that the document title has the following structure.

<div class="edit-site-header-edit-mode">
  <div class="edit-site-header-edit-mode__start">
  </div>
  <div class="edit-site-header-edit-mode__center">
  </div>
  <div class="edit-site-header-edit-mode__end">
  </div>
</div>

However, in Style Book/Revisions page, the left element is missing as shown below. As a result, the title, which should be centered left and right, is shifted to the left.

<div class="edit-site-header-edit-mode">
  <div class="edit-site-header-edit-mode__center">
  </div>
  <div class="edit-site-header-edit-mode__end">
  </div>
</div>

Step-by-step reproduction instructions

• Open the Global Styles sidebar in the Site Editor.
• Click the Style Book or Revisions button.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

We should probably ship #51667 and #54514 to have unified document title styles.

[richtabor]

We should probably ship #51667 and #54514 to have unified document title styles.

I was going to say the same.

[t-hamano]

If we simply apply a document title style, I think the title will still be offset to the left.

Perhaps we need to always render an element with the .edit-site-header-edit-mode__start class regardless of the state of the canvas view? This is because I believe that the root cause of the title shifting to the left is that the element with this class is not rendered on Style Blook page and Revisions page.

gutenberg/packages/edit-site/src/components/header-edit-mode/index.js

Lines 118 to 120 in 25cebb3

	{ hasDefaultEditorCanvasView && (
	<motion.div
	className="edit-site-header-edit-mode__start"

[Mamaduka]

This was fixed in #61273. The DocumentTools is now always rendered.