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

Autoscaling/sizing Block previews #16113

Closed
wants to merge 27 commits into from
Closed

Autoscaling/sizing Block previews #16113

wants to merge 27 commits into from
+205 −43

Commits on Aug 1, 2019

  1. First stab at a proof of concept.

    @getdave
    Joen Asmussen authored and getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    a4c2f85 View commit details
    Browse the repository at this point in the history

  2. Attempt to programmatically determine dest dimensions

    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    a379c0f View commit details
    Browse the repository at this point in the history

  3. Add README stub.

    @jasmussen @getdave
    jasmussen authored and getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    20d479e View commit details
    Browse the repository at this point in the history

  4. Updates to use default args for width and height 

    Addresses #16113 (comment)
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    5186e2c View commit details
    Browse the repository at this point in the history

  5. Update class namespaces to match package 

    Addresses #16113 (comment)
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    d4b7d95 View commit details
    Browse the repository at this point in the history

  6. Add width and height as Effect Hook deps 

    Addresses #16113 (comment)
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    480e1d8 View commit details
    Browse the repository at this point in the history

  7. Use correct createRef from @wordpress/element 

    Was previously using React createRef.

Addresses #16113 (comment)
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    4e45237 View commit details
    Browse the repository at this point in the history

  8. Revert "Update class namespaces to match package" 

    This reverts commit 24252fa887986548839e7d9a6fe2639807ed0bc6.
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    96aa785 View commit details
    Browse the repository at this point in the history

  9. Migrate to useRef hook

    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    fa2573e View commit details
    Browse the repository at this point in the history

  10. Adds basic unit test 

    Still a WIP
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    84ad7b0 View commit details
    Browse the repository at this point in the history

  11. Updates and fleshes out the README

    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    5511495 View commit details
    Browse the repository at this point in the history

  12. Refactor to avoid unecessary state and simplify implementation of sca… 

    …ling
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    f9bdb50 View commit details
    Browse the repository at this point in the history

  13. Add some padding to the preview 

    Avoids Blocks butting up against the edges of the preview, especially if the preview wrapper has rounded corners which can cause the Blocks to be clipped.
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    7cb2283 View commit details
    Browse the repository at this point in the history

  14. Refactor to utilise JS template strings

    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    de50bfe View commit details
    Browse the repository at this point in the history

  15. WIP: Adds zoom for small individual blocks 

    With small individual Blocks showing the preview at “actual size” (even when scaled to fit) is a bit odd. Everything still looks very zoomed out and far away.

Updates to check DOM for largest element within the Block and use that width to calculate a “zoomed” scale value so that the contents of the Block itself is shown zoomed in.

Still WIP
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    0ffb3e7 View commit details
    Browse the repository at this point in the history

  16. Updates to target block contents more reliably and to calc entire box… 

    … model in width
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    69b6a68 View commit details
    Browse the repository at this point in the history

  17. block-preview: render scaled preview in a shadow dom

    @retrofox @getdave
    retrofox authored and getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    f789d27 View commit details
    Browse the repository at this point in the history

  18. try: setting styles to shadow dom elements

    @retrofox @getdave
    retrofox authored and getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    944d023 View commit details
    Browse the repository at this point in the history

  19. Revert "try: setting styles to shadow dom elements" 

    This reverts commit ea573f9.

The reason being that there is no benefit of using shadow DOM and it introduces additional complexity.
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    7fde7da View commit details
    Browse the repository at this point in the history

  20. Removes attempt at auto zoom on Block contents 

    After much experimenting we’ve decided that attempting to reliably detect the visual size of the Block’s visual contents is impossible. This is due to inconsistencies in the DOM markup of each Block.

See #16113 (comment)
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    5bceef3 View commit details
    Browse the repository at this point in the history

  21. Updates to remove scale by default in favour of opt in via prop 

    As discussed here #16113 (comment), there is little point in having thumbnail preview and large popover preview showing the same thing.

Update to introduce a prop to opt in to scaling the preview. By default the preview is no auto-scaled.

Apply `true` value to `BlockPreview` to ensure that Block Styles popover preview is scaled to fit.
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    1f79935 View commit details
    Browse the repository at this point in the history

  22. Adds scaleFactor prop to provide control for non dynamically scaled p… 

    …review
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    1bec746 View commit details
    Browse the repository at this point in the history

  23. Adjust scaleFactor for Block Styles preview

    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    bdf16ad View commit details
    Browse the repository at this point in the history

  24. Fix to ensure hooks are called unconditionally to obey rules of Hooks 

    See https://reactjs.org/docs/hooks-rules.html
    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    c5ba882 View commit details
    Browse the repository at this point in the history

  25. Removes padding and border from preview on designer advice

    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    a73b145 View commit details
    Browse the repository at this point in the history

  26. Only apply dimensions to preview content when dynamically scaling

    @getdave
    getdave committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    320002d View commit details
    Browse the repository at this point in the history

  27. update doc

    @retrofox
    retrofox committed Aug 1, 2019
    Configuration menu
    Copy the full SHA
    0dedae9 View commit details
    Browse the repository at this point in the history