Description
What problem does this address?
The Site and Post Editor headers are constructed slightly differently.
The design requirements for both headers, however, are similar, which makes styling them so that they resemble one another, especially at the pixel level, a unique challenge.
See for example the following issue:
This issue and the subsequent PR uncovered that the headers have different heights. Furthermore, they way they render the bottom 1px border appears inconsistent.
2023-09-12.12.27.34.mp4
In the Post Editor, the header contents including toolbar sit underneath,.interface-interface-skeleton__header and its immediate child .edit-post-header (component)
In the Site Editor, ,.interface-interface-skeleton__header is an empty element. Styles are determined by the .edit-site-layout__header element, and the immediate child .edit-site-header-edit-mode (component).
What is your proposed solution?
The Site Editor header is "special" and has different requirements, such as the complexity of view/edit modes and the ever-present WordPress logo. For this reason, it's inevitable that there will be varying design requirements.
Nevertheless, it would be worth investigating how both the HTML and CSS for the headers could be synchronized. This could even be a single, housing component in the block editor package (?)
The exercise would include the following:
- consistent height
- toolbar icons alignment
- WordPress logo alignment
- consistent collapsing behavior and styles in mobile view
- consistent borders
@jameskoster proposed a 64px internal height for the header "as that allows all the other values to align with the 4px baseline"
