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

Try/even better previews #16873

Merged
merged 83 commits into from
Aug 7, 2019
Merged

Try/even better previews #16873

merged 83 commits into from
Aug 7, 2019

Commits on Aug 2, 2019

  1. First stab at a proof of concept.

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

  2. Attempt to programmatically determine dest dimensions

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

  3. Add README stub.

    @jasmussen @retrofox
    jasmussen authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    2cc1264 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    3ad0bc1 View commit details
    Browse the repository at this point in the history

  5. Update class namespaces to match package 

    Addresses #16113 (comment)
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    3a15d94 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    167fadb 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    68fb82f 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    2ae0507 View commit details
    Browse the repository at this point in the history

  9. Migrate to useRef hook

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

  10. Adds basic unit test 

    Still a WIP
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    dc8738f View commit details
    Browse the repository at this point in the history

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

    …ling
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    0f4f105 View commit details
    Browse the repository at this point in the history

  12. 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    62e1109 View commit details
    Browse the repository at this point in the history

  13. Refactor to utilise JS template strings

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

  14. 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    04648b4 View commit details
    Browse the repository at this point in the history

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

    … model in width
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    a6f6e38 View commit details
    Browse the repository at this point in the history

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

    @retrofox
    retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    6f5c06f View commit details
    Browse the repository at this point in the history

  17. try: setting styles to shadow dom elements

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

  18. 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    770ff2d View commit details
    Browse the repository at this point in the history

  19. 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    a55e988 View commit details
    Browse the repository at this point in the history

  20. 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 @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    7755b5b View commit details
    Browse the repository at this point in the history

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

    …review
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    94b6e3d View commit details
    Browse the repository at this point in the history

  22. Adjust scaleFactor for Block Styles preview

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

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

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

  24. Removes padding and border from preview on designer advice

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

  25. Only apply dimensions to preview content when dynamically scaling

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

  26. block-preview: a different approach attempt.

    @retrofox
    retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    5649e51 View commit details
    Browse the repository at this point in the history

  27. Correct typo in util function name

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

  28. Seek the firstChild of the Block DOM node

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

  29. Tidy up effect timers and improve comments

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

  30. Dynamically calculate widths and offsets of preview container 

    Removes hardcoded values.
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    4def132 View commit details
    Browse the repository at this point in the history

  31. Updates to account for widths of all Blocks passed into to preview 

    Preivously we only considered a single Block scenario. However, the recent addition of multi block support for Previews means we need to ensure we’re measuring the widths of _all_ Blocks.
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    ea1d096 View commit details
    Browse the repository at this point in the history

  32. Revert class additions to Blocks

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

  33. Adds optional scope to DOM utils. Use to limit scope in Block width c… 

    …omparison.
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    52084af View commit details
    Browse the repository at this point in the history

  34. Update packages/block-editor/src/components/block-preview/index.js 

    Co-Authored-By: Riad Benguella <[email protected]>
    @getdave @youknowriad @retrofox
    2 people authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    6d0a85d View commit details
    Browse the repository at this point in the history

  35. Allow prop based opt out from scaling

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

  36. Fix to ensure smallest Block is found even if smaller than container 

    Preivously we were default to the container width being the largest item. In fact we always want to determine the largest Block contents element and use that to determine the scale.
    @getdave @retrofox
    getdave authored and retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    7c86742 View commit details
    Browse the repository at this point in the history

  37. Remove unecessary Math.min usage

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

  38. core/button: adjust dims of button wrapper

    @retrofox
    retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    595cf03 View commit details
    Browse the repository at this point in the history

  39. apply vertical alignment

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

  40. set scale factor to 0.9

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

  41. rollback testing purpose comment

    @retrofox
    retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    6a7c6d9 View commit details
    Browse the repository at this point in the history

  42. cpre/button: keep adjusting styles for preview

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

  43. rename vars and css class names

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

  44. adjust rebase

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

  45. restore isScaled factor scale

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

  46. set the scale adjustment in the proper place

    @retrofox
    retrofox committed Aug 2, 2019
    Configuration menu
    Copy the full SHA
    55cd662 View commit details
    Browse the repository at this point in the history

  47. update README file

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

Commits on Aug 5, 2019

  1. core/button: tidy edit preview styles

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

  2. coer/button: tweak button preview

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

  3. preview-block: ensure make the preview visible.

    @retrofox
    retrofox committed Aug 5, 2019
    Configuration menu
    Copy the full SHA
    18ded7d View commit details
    Browse the repository at this point in the history

  4. block-preview: hide dropzone

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

  5. core/button: adjust preview for thumb and full sizes

    @retrofox
    retrofox committed Aug 5, 2019
    Configuration menu
    Copy the full SHA
    354d42c View commit details
    Browse the repository at this point in the history

  6. core/button: set same width for preview

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

  7. core/button: because it's !important

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

Commits on Aug 6, 2019

  1. core/button: set nowrap button in preview

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

  2. core/button: set nowrap onlu for button

    @retrofox
    retrofox committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    758468c View commit details
    Browse the repository at this point in the history

  3. core/quote: adjust quote size

    @retrofox
    retrofox committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    2b71c32 View commit details
    Browse the repository at this point in the history

  4. Make previews overflow to the bottom. 

    Currently still has a bug where the large `.block-editor-block-switcher__preview` pane behaves like it's previewing a taller block, when it's not
    @obenland
    obenland committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    65097d0 View commit details
    Browse the repository at this point in the history

  5. Merge branch 'try/even-better-previews' of https://github.com/WordPre… 

    …ss/gutenberg into try/even-better-previews
    @obenland
    obenland committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    8bdcb8e View commit details
    Browse the repository at this point in the history

  6. Revert "core/button: set nowrap onlu for button" 

    It breaks previews of long buttons

This reverts commit 758468c.
    @obenland
    obenland committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    6096c3e View commit details
    Browse the repository at this point in the history

  7. Fix unit test

    @obenland
    obenland committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    e1b9483 View commit details
    Browse the repository at this point in the history

  8. core/button: apply nowrap only to buttons

    @retrofox
    retrofox committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    75d43ce View commit details
    Browse the repository at this point in the history

  9. Try a fixed canvas width

    @youknowriad
    youknowriad committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    89f6393 View commit details
    Browse the repository at this point in the history

  10. Fix blocks editor styles

    @youknowriad
    youknowriad committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    5a1e5ad View commit details
    Browse the repository at this point in the history

  11. core/button: centering preview

    @retrofox
    retrofox committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    3d47db8 View commit details
    Browse the repository at this point in the history

  12. core/button: adjust only into teh styles preview

    @retrofox
    retrofox committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    27b430f View commit details
    Browse the repository at this point in the history

  13. block-preview: remove scaleAdjustment property

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

  14. block-preview: hide inserte element in preview

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

  15. block-preview: just pick up the first block to scale

    @retrofox
    retrofox committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    2b1a111 View commit details
    Browse the repository at this point in the history

  16. block-preview: fix set tall class. X position (wip)

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

  17. popover: remove commented lines

    @retrofox
    retrofox committed Aug 6, 2019
    Configuration menu
    Copy the full SHA
    5208a03 View commit details
    Browse the repository at this point in the history

Commits on Aug 7, 2019

  1. Refactor the preview

    @youknowriad
    youknowriad committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    029e131 View commit details
    Browse the repository at this point in the history

  2. Remove debug code

    @youknowriad
    youknowriad committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    72c5027 View commit details
    Browse the repository at this point in the history

  3. simplify preview resets

    @youknowriad
    youknowriad committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    a4958f3 View commit details
    Browse the repository at this point in the history

  4. Fix the preview recomputing

    @youknowriad
    youknowriad committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    22b4d84 View commit details
    Browse the repository at this point in the history

  5. Vertical alignining small blocks

    @youknowriad
    youknowriad committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    f218f64 View commit details
    Browse the repository at this point in the history

  6. block-editor: restore viewportWidth as a property

    @retrofox
    retrofox committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    835c4ba View commit details
    Browse the repository at this point in the history

  7. Update Readme docs 

    Props @marekhrabe.
    @obenland
    obenland committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    3fe45d7 View commit details
    Browse the repository at this point in the history

  8. Remove tests for now 

    We'll revisit when we have a better idea what specifically we should be testing
    @obenland
    obenland committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    91f142f View commit details
    Browse the repository at this point in the history

  9. block-preview: simplify comparision

    @retrofox
    retrofox committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    33fb2d9 View commit details
    Browse the repository at this point in the history

  10. Merge branch 'try/even-better-previews' of github.com:WordPress/guten… 

    …berg into try/even-better-previews
    @retrofox
    retrofox committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    527111e View commit details
    Browse the repository at this point in the history

  11. Remove readme updates that break tests

    @obenland
    obenland committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    6f29c27 View commit details
    Browse the repository at this point in the history

  12. Update docs properly. 

    See 6f29c27
    @obenland
    obenland committed Aug 7, 2019
    Configuration menu
    Copy the full SHA
    a3bb473 View commit details
    Browse the repository at this point in the history