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.

Sign up for GitHub

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

Jump to bottom

Block Styles: Show style preview when hovered or focused #34522

Merged
merged 20 commits into from
Nov 10, 2021
Merged

Block Styles: Show style preview when hovered or focused #34522

merged 20 commits into from
Nov 10, 2021

Commits on Nov 10, 2021

  1. Initial commit

    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    098b54b View commit details
    Browse the repository at this point in the history

  2. Tweaking text and hover colours 

    Removing commented out code
Consolidating handlers
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    6fb45f3 View commit details
    Browse the repository at this point in the history

  3. Adding container ref to try to position the popover

    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    04e7ac1 View commit details
    Browse the repository at this point in the history

  4. Experimenting with removing the default style picker select dropdown … 

    …with a button click, based on the active style

Updating block supports readme to remove references to the select dropdown
Refactoring DefaultStylePicker
Replacing the transform menu style switcher with a menu
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    e334afa View commit details
    Browse the repository at this point in the history

  5. Abstract renderedStyles, which adds a default to the array for user s… 

    …election on the frontend.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    caf01b9 View commit details
    Browse the repository at this point in the history

  6. Reduce the switcher to a Make default button where the preferred defa… 

    …ult is not selected.

Added tests for getRenderedStyles
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    05952b2 View commit details
    Browse the repository at this point in the history

  7. Aligning preview with preview block popover styles 

    Creating custom DOMRect object to pass to the PopOver component to set x value.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    9aa6248 View commit details
    Browse the repository at this point in the history

  8. Fixed typo in expected label in the getRenderedStyles test

    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    a651c01 View commit details
    Browse the repository at this point in the history

  9. Cleaning up styles and classnames 

    `.block-editor-block-styles__item` should exist for the e2e test: style-variation.test.js
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    35ea380 View commit details
    Browse the repository at this point in the history

  10. Removing unused preview block code in the block styles menu switcher

    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    3a1cf50 View commit details
    Browse the repository at this point in the history

  11. This commit reverts the default style picker, and creates a condition… 

    … to only show the default picker dropdown where a non-default style has been previously selected. So effectively, we're removing the default style picker from the view. The default style picker will some day be moved to global styles.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    e16a4eb View commit details
    Browse the repository at this point in the history

  12. This commit: 

    - debounces the setHoveredStyle state to avoid flickering effect in the preview when unsetting/setting value
- we need to give more specificity to the classes that hide the preview on narrow widths to avoid overriding
- giving the style buttons fixed widths with ellipses on overflowing text
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    ebc57c5 View commit details
    Browse the repository at this point in the history

  13. Removing useCallback function memo

    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    51cf2f3 View commit details
    Browse the repository at this point in the history

  14. Using the Text component to control character overflow. 

    Removing ellipsis styles.

This commit:
- uses InserterPreviewPanel to show the block styles previews, adjusts the attributes being passed to this component so that it displays the correct title.
- remove unused styles
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    8373343 View commit details
    Browse the repository at this point in the history

  15. This commit splits BlockStyles component into two components: one for… 

    … the settings sidebar and one for inclusion within menu groups.

We are abstracting much of the shared logic to a hook. We've replaced current usages of BlockStyles (2) with the new, specific components.
Also, instead of using `getAnchorRect` to calculate the popover left position, let's overwrite with !important the position of the popover container using the width of the sidebar plus gutter.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    7e1c8f5 View commit details
    Browse the repository at this point in the history

  16. This commit fixes the position of the block preview container and rem… 

    …oves the popover.

Adding panel header height to the top position of the preview panel, since there's going to be at least one.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    aa7bc1d View commit details
    Browse the repository at this point in the history

  17. This is an attempt to ensure that we should the preview panel outside… 

    … the confines of the sidebar container.

Removing overflow: auto allows us to position elements beyond the container.
We have to detect fullscreen vs non-fullscreen mode to allow for varying top positions.
Also updated selected active states of the button.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    e1c8294 View commit details
    Browse the repository at this point in the history

  18. This commit adds a slot in the editor content area for the block styl… 

    …es popover.

We're also reverting changes from the previous commit, where we removed the overflow scroll on the sidebar.
In order to position the preview correctly we need to keep an eye on the scroll top value of the content area.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    71fcad7 View commit details
    Browse the repository at this point in the history

  19. Fixing z-index to have the same z-index as the sidebar. 

    Using useLayoutEffect for setting the scrollTop.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    bf66057 View commit details
    Browse the repository at this point in the history

  20. Using lodash debounce so we can cancel the debounce when needed. 

    Also hiding preview when mousing out of the preview container.
    @ramonjd
    ramonjd committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    51319b0 View commit details
    Browse the repository at this point in the history