Quadrat: block styles for query block #4171
Conversation
|
@kjellr and @beafialho this is ready for your review as well |
| 'headline-button', | ||
| 'media-text-button', | ||
| 'latest-episodes', | ||
| 'episode', | ||
| 'cover-with-heading', | ||
| 'episode', | ||
| 'headline-button', | ||
| 'headlines-and-buttons', | ||
| 'query-diamond', | ||
| 'latest-episodes', | ||
| 'listen-to-the-podcast', | ||
| 'media-text-button', |
There was a problem hiding this comment.
@scruffian I hope you are proud of me
| @media (max-width: #{ ($break-small - 1) }) { | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
this aligns it to the Columns block media query that collapses the two columns into one. I tried to find a solution without a media query but I couldn't :(
| transition: all 0.4s ease-in; | ||
| } | ||
| &:hover:before { | ||
| opacity:1; | ||
| } | ||
| &:nth-child(2n+1):before { | ||
| transform: rotate(16deg) translate(-130px, -20px); | ||
| } | ||
| &:nth-child(2n+1):hover:before { | ||
| transform: rotate(-8deg) translate(-110px, 0); | ||
| } | ||
| &:nth-child(2n+2):before { | ||
| transform: rotate(24deg) translate(-130px, 20px); | ||
| } | ||
| &:nth-child(2n+2):hover:before { | ||
| transform: rotate(16deg) translate(-110px, 40px); | ||
| } |
There was a problem hiding this comment.
@kjellr we went with a very simple animation that we think looks decent, but feel free to tweak the numbers in any way shape or form
|
This looks great, @MaggieCabrera! I pushed a couple commits with some minor adjustments:
The only issue I'm seeing is the issue you referenced above, which unfortunately impacts the preview. But since that's an upstream bug, I think this is ready to go!
|
|
Since this is an opt-in feature I'm bringing this in and we can iterate if we find it needs more work |
Changes proposed in this Pull Request:
This PR includes a new block style for the Query block and the associated block pattern. The design has a "Load more posts" button but I've decided to maintain the current query navigation design since we don't have the option for a one button solution within the Query block right now.
There are a few known issues that need to be solved in Gutenberg but I don't think they block this PR from merging in its current state:
Related issue(s):
Fixes #3644