How can I avoid that editor toolbar buttons are disappearing in my theme?

[schulle4u]

While helping a friend to create a new website, I noticed that the toolbar buttons in the editor were not complete, even though the setting was set to auto. For example, the status button and the page preview were missing. Apparently this is due to my Wittstock theme, because in the default Stockholm theme everything works as expected. I can reproduce this behaviour in a new installation. As soon as Wittstock is installed and set as default theme, some toolbar buttons are missing. I never noticed this myself, as I rarely need the buttons, but my friend does 🙂 With a little experimentation I found out that changing the page zoom affects the behavior of the toolbar buttons. The smaller the page, the fewer buttons, but some buttons also disappear at higher zoom levels above 100%. In my theme, however, I can't get all the buttons to appear, regardless of the zoom level. I roughly understand why the buttons behave this way, but I am not sure which CSS settings or even HTML elements affect how the toolbar fits into the page. Does any of the CSS experts have an idea?

[xrat]

I am interested too. I haven't been digging as deep as you since opting to make the body a bit wider helped:

body { grid-template-columns: 1fr min(49rem, 90%) 1fr; }

[schulle4u]

Thanks, widening the second grid column seems to be the best solution here. Well, I should finally make a cheat sheet so I can keep track of all the changes from the original theme when I update simple.css from upstream in the future. 😅

It seems that all themes have the problem that the toolbar may not be completely displayed when the zoom level is changed, although this behavior is probably intentional so as not to destroy the entire layout.

[auer-kk]

The dimensions of the edit-pane are calculated by javascript. If you make the following changes to wittstock.cssthe width of the inserted div .yellow-bar will be the whole width of body.

body > *:not(.yellow-bar) {
  grid-column: 2;
}

body > .yellow-bar {
  grid-column: 1 / -1;
}

[schulle4u]

Thank you for the suggestion. I've added it to my Wittstock theme as a more elegant solution which leaves the remaining styles untouched. 👍

[annaesvensson]

What you describe is the intended behaviour of a responsive user interface. The built-in web editor displays as many toolbar buttons as will fit in one row, if there is not enough space then fewer buttons will be displayed. The available width is calculated using JavaScript. You can customise the available width with the help of CSS, but ultimately the editor determines how many buttons are displayed when you resize the web browser. Perhaps the responsive user interface can be improved in the future? Perhaps something like ... or >>> or a kind of "menu" button to access the disappearing buttons?

[schulle4u]

Yes, a good idea to try out, as GitHub also implements this in their editor. Maybe the editor even could have a distraction-free mode and open the whole toolbar in a sidebar? Otherwise I think the current implementation is also fine. You just have to get used to the behavior of the editor as a theme developer.

[annaesvensson]

I think the web editor should work well with a variety of themes, devices and screen sizes. Let us check how much source code it would take to implement, I'll get back to you.