Press This: Match styling on tools.php

[kraftbj]

The Press This area of /wp-admin/tools.php doesn't match the styling of the Category converter text or generally other pages in /wp-admin/

Notice ​https://cloudup.com/clOJ-s28VZa vs ​https://cloudup.com/cyFFhCZIIwv
(granted there is Jetpack material, but shows the styling used up to now on that page).

Time to overhaul tools.php visually or change up PT to match?

Main ticket: #31373

[Michael Arestad]

I have mixed feelings on this. The text everywhere else really needs a max width. This way it's actually pleasant to read. that's my main issue and the reason for the design.

I also have never found the black on grey text pleasant to read, so this was a fun little test. It looks like an afterthought to me.

BUT consistency is important. This may need to be a separate ticket even though it will look fairly unpleasant and detached.

Compare:

(If we kept it, I'd move all the PT info into one single box.)

[kraftbj]

How much room do we have to experiment with the tools.php page?

Could we make change it up so that the styles currently applied to PT are applied to all tool-box class, at least on the tools.php page (since we can target that with .tools-php class)?

It would standardize that one page, though still lack consistency with the rest of wp-admin.

That said, agreed on one box if this stays the way it is.

[Michael Arestad]

I think if we decided to try to style all of Tools.php, we'd want to adjust some .postbox styles (or introduce a new class) to make the container reusable. I suspect it is probably out of this project scope, though. @helen thoughts?

[helen]

Happy to introduce a new class for that type of panel/card container, it's a common enough need and using .postbox isn't fun because of JS and interior styles that are inherited. Don't really see it as being "out of scope". If there are some relatively quick wins we can do for the Tools screen, happy to entertain them.

[Michael Arestad]

@helen added a patch that refactored a bit of the press-this stuff. I also added an element called .card for wrapping containers with. It's almost the same as .postbox, but with an added max-width. I'm not sure where it should live. common.css? It should look something like this:

[azaozz]

In 31806:

Press This: fix styling on the Tools screen.
Props Michael-Arestad, see #31462.

[azaozz]

This is fixed but leaving open in case we heed to tweak the newly added stuff a little in order to make it easily reusable.

[DrewAPicture]

Looks good. Let's close this and encourage new tickets for new ideas.