-
Notifications
You must be signed in to change notification settings - Fork 360
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.
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
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@scruffian I hope you are proud of me
@media (max-width: #{ ($break-small - 1) }) { | ||
width: 100%; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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