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

[Browser Issues] Block editor inserter: Fix blocks and patterns selector panel width flicker #42476

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from

Conversation

amjadr360
Copy link

What?

This PR fixe blocks and patterns selector panel width flicker bug.

Why?

#41794
Switching Blocks and Patterns tabs back and forth selector panel, panel inner elements (search bar, patterns list ) width flicker. The width flickering issue is due to the scrollbar.

How?

This is done by adding max-width ($block-inserter-width - $block-inserter-scrollbar-width ) in .block-editor-inserter__content.

  • Different browsers have different scroll bar widths, added a $block-inserter-scrollbar-width: 17px; SCSS variable. 17px is the width is most common in different browsers.

Testing Instructions

  1. Open a Post or Page.
  2. Click on the Toggle block inserter button.
    image
  3. Star switching Blocks and Patterns tabs back and forth selector panel.

Screenshots or screencast

switching Blocks and Patterns tabs back and forth selector panel

@amjadr360 amjadr360 requested a review from ellatrix as a code owner July 15, 2022 17:52
@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jul 15, 2022
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @amjadr360! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants