Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Misaligned per-block CSS label #48047

Closed
richtabor opened this issue Feb 13, 2023 · 6 comments
Closed

Misaligned per-block CSS label #48047

richtabor opened this issue Feb 13, 2023 · 6 comments
Assignees
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@richtabor
Copy link
Member

The "Additional block CSS" label for the per-block CSS should be aligned with the other contents of the panel (like the global additional CSS control is).

Visual

CleanShot 2023-02-13 at 16 31 04

@richtabor richtabor added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Feb 13, 2023
@glendaviesnz
Copy link
Contributor

glendaviesnz commented Feb 13, 2023

@richtabor there seems to be a difference between the left padding on the top-level global styles panel and the block-level ones. Is this supposed to be the case? For example, if I set the same padding on the additional block CSS section as on the global styles one, it fixes the alignment issue, but it is more indented than the items above it - but in global styles, they line up as more of a left padding for all:

Global Block
global-css block-css

should I just match the left padding of the other items in the block panel, or does that padding need to be adjusted to match the global styles panel?

@richtabor richtabor added the Needs Design Feedback Needs general design feedback. label Feb 14, 2023
@richtabor
Copy link
Member Author

Good point. I'm good with resolving the padding discrepancy between the parent and child panels as well. I don't want to index too much on this, as it'll adapt when we move it closer to the Browse Mode UI — but a small padding tweak to consistently align all the controls would be good.

Here's what that'd look like, with the Additional block CSS tweak included as well:

CleanShot 2023-02-14 at 08 09 45

@tomdevisser
Copy link
Member

tomdevisser commented Feb 14, 2023

The reason for the inconsistency is not in the actual button, but the space around it as mentioned above. The lower panel has padding where the top one doesn't.

Screenshot 2023-02-14 at 5 58 52 PM
Screenshot 2023-02-14 at 5 59 36 PM

Notice the padding is also inconsistent with the panel for style variations, where margin is used.

Screenshot 2023-02-14 at 6 01 31 PM
Screenshot 2023-02-14 at 6 02 18 PM

I suggest choosing one value for padding to apply to all the panels, and removing any extra margins that are now being used on e.g. the quote preview and the style variations panel.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Feb 15, 2023
@glendaviesnz
Copy link
Contributor

I have made a start on this here, but still a bit of work to do in terms of making sure everything is the same across all the screens. I am AFK for the next week or so, so happy for someone else to pick this up and finish off, otherwise I will finish it off when I am back.

@jordesign
Copy link
Contributor

With this control now being moved into the 'Advanced' section - it seems this issue no longer needs to be resolved?

Screenshot 2023-07-27 at 5 28 50 pm

@jordesign jordesign added the [Type] Bug An existing feature does not function as intended label Jul 27, 2023
@t-hamano
Copy link
Contributor

With this control now being moved into the 'Advanced' section - it seems this issue no longer needs to be resolved?

I agree. It was moved to the Advanced panel as one of #49428. I am closing this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

5 participants