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

Feature: add support for a Tiled Gallery layout (Square Tiles) as a Gutenberg block #9434

Closed
wants to merge 44 commits into from
Closed

Feature: add support for a Tiled Gallery layout (Square Tiles) as a Gutenberg block #9434

wants to merge 44 commits into from

Commits on May 12, 2018

  1. prototype separate jetpack tiled gallery block, render in php (placeh… 

    …older), transform to/from core/gallery
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    a63a8d2 View commit details
    Browse the repository at this point in the history

  2. remove dangling comma

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    ba7c1a0 View commit details
    Browse the repository at this point in the history

  3. remove php render code - focus on js render (more "Gutenbergy", and u… 

    …nclear on how to store attributes/state so they are available to PHP render)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    7196e45 View commit details
    Browse the repository at this point in the history

  4. (work in progress - fails gutenberg validation?) render gallery block… 

    … front end, so image state persists (and renders)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    b5a8269 View commit details
    Browse the repository at this point in the history

  5. fix jetpack/gallery attribute definition; attributes were disappearin… 

    …g on editor reload due to assuming wrapper element class name based on core/gallery block (was causing validation error) – fixed by simplifying selector
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    b10bb38 View commit details
    Browse the repository at this point in the history

  6. refactor jetpack/gallery to use same component for rendering images i… 

    …n save and edit
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    1de72b6 View commit details
    Browse the repository at this point in the history

  7. implement column-tiled jetpack/gallery using css column-count approach

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    d0922e8 View commit details
    Browse the repository at this point in the history

  8. tweak styling so gallery layout is consistent across editor/frontend: 

    - reset line-height
- zero out figure margin
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    5654332 View commit details
    Browse the repository at this point in the history

  9. fix jetpack gallery transform to/from core gallery: correctly pass at… 

    …tributes object
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    9604d77 View commit details
    Browse the repository at this point in the history

  10. add upload button prompt text

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    45eb8e6 View commit details
    Browse the repository at this point in the history

  11. basic gallery item item component - rough markup (port php tiled gall… 

    …ery to js work-in-progress)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    fd25887 View commit details
    Browse the repository at this point in the history

  12. update classname in attribute spec to ensure block attributes are pre… 

    …served (fix no data/validation error)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    584a7b0 View commit details
    Browse the repository at this point in the history

  13. get image dimensions from store/api and render in markup

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    469f759 View commit details
    Browse the repository at this point in the history

  14. ensure that all child TiledGalleryItems have a key

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    eff362c View commit details
    Browse the repository at this point in the history

  15. set width & height attributes and render them in front-end markup (so… 

    … we can use them for smart tiling layouts implemented in js)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    dbfd125 View commit details
    Browse the repository at this point in the history

  16. add columns attribute (param for various tiled layouts)

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    1003eb6 View commit details
    Browse the repository at this point in the history

  17. enqueue tiled gallery js (and css) by default, so we can use it for o… 

    …ur block-based tiled galleries (short term hack)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    4c1aabe View commit details
    Browse the repository at this point in the history

  18. remove width/height elements from visible display (remnant of dev/inv… 

    …estigation)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    6be8207 View commit details
    Browse the repository at this point in the history

  19. new placeholder react component for "Square Tiles" layout, use it by … 

    …default
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    fbdc8bb View commit details
    Browse the repository at this point in the history

  20. initial port of square tiled layout algorithm – rough markup structure

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    999c50b View commit details
    Browse the repository at this point in the history

  21. remove jetpack-tiled-gallery class to avoid clashes with column-count… 

    … fake masonry prototype styles
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    989caa2 View commit details
    Browse the repository at this point in the history

  22. square layout roughly working – render calculated layout width as sty… 

    …le attribute (big cells are not working right yet)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    93ed133 View commit details
    Browse the repository at this point in the history

  23. hard code content width to 520 for now (is appropriate for my current… 

    … setup) so initial layout is roughly correct
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    74c63de View commit details
    Browse the repository at this point in the history

  24. implement basic square-tiles layout - render appropriate classes and … 

    …size-related attributes expected by tiled-gallery.js resize script
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    8444d0b View commit details
    Browse the repository at this point in the history

  25. fix tiled-gallery image spacing – override (reset) figure margin

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    bddb327 View commit details
    Browse the repository at this point in the history

  26. capitalise tiled gallery block "save" component, consistent with othe… 

    …r components
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    d0c78d4 View commit details
    Browse the repository at this point in the history

  27. check setAttributes prop in TiledGalleryImage before use

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    1b99d49 View commit details
    Browse the repository at this point in the history

  28. WYSIWYG editor preview for jetpack tiled galleries in Gutenberg editor 

    - use full save component rather than rendering individual image tiles
- note this uses the existing jQuery setup/resize handling script and css
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    079650e View commit details
    Browse the repository at this point in the history

  29. remove tiled gallery block file upload button (until we find a nice w… 

    …ay to integrate it as a proto-image tiles)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    323dcdd View commit details
    Browse the repository at this point in the history

  30. enqueue existing/legacy tiled gallery scripts & styles for in `enqueu… 

    …e_block_assets` for use in gutenberg editor and front end (fix hack enqueue in constructor)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    495e705 View commit details
    Browse the repository at this point in the history

  31. Gutenberg Tiled Gallery: add support for editing column count attribu… 

    …te (first cut)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    e5fd06d View commit details
    Browse the repository at this point in the history

  32. Gutenberg Tiled Gallery: fix issue with column count not displaying i… 

    …n editor
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    559ee99 View commit details
    Browse the repository at this point in the history

  33. Gutenberg Tiled Gallery: render captions if they are set for the imag… 

    …e (media item) (using exisiting tiled galleries css, rather than gutenberg style)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    54f58f9 View commit details
    Browse the repository at this point in the history

  34. Gutenberg Tiled Gallery: implement "link to.." author option ("..atta… 

    …chment page" not working yet)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    92f34fa View commit details
    Browse the repository at this point in the history

  35. Gutenberg Tiled Gallery: fix "link to..attachment page" - link prop… 

    …erty was not persisted to attributes
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    c0775b0 View commit details
    Browse the repository at this point in the history

  36. Gutenberg Tiled Gallery: tidy up edit component, remove methods that … 

    …we don't use (that we stole from core/gallery..)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    0cf2a2e View commit details
    Browse the repository at this point in the history

  37. Gutenberg Tiled Gallery: disable linkTo when editing, to avoid risk o… 

    …f user navigating out of editor when clicking the gallery
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    806be4e View commit details
    Browse the repository at this point in the history

  38. Gutenberg Tiled Gallery: remove style.css (unused, left over from col… 

    …umn-count layout experiment)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    b043dee View commit details
    Browse the repository at this point in the history

  39. Gutenberg Tiled Gallery: remove unused image component

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    7c53cce View commit details
    Browse the repository at this point in the history

  40. Gutenberg Tiled Gallery: switch out album icon for format-gallery… 

    … (for now - ideally we'd have a jetpack-branded icon or a "tiled" icon)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    faa68c2 View commit details
    Browse the repository at this point in the history

  41. Gutenberg Tiled Gallery: consistent capitalisation for save component

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    a86f834 View commit details
    Browse the repository at this point in the history

  42. Gutenberg Tiled Gallery: tidy/clarify comments

    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    8ea0fab View commit details
    Browse the repository at this point in the history

  43. Gutenberg Tiled Gallery: avoid fragile relative paths when enqueing g… 

    …utenberg script asset (using JETPACK__PLUGIN_FILE instead of current-file-relative __FILE__)
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    1dd0fb7 View commit details
    Browse the repository at this point in the history

  44. Gutenberg Tiled Gallery: use "Jetpack Gallery" in empty-gallery place… 

    …holder component for consistency and to disambiguate from core/gallery
    @haszari
    haszari committed May 12, 2018
    Configuration menu
    Copy the full SHA
    e8dd3eb View commit details
    Browse the repository at this point in the history