-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Update cover image markup and CSS #3444
Conversation
Related: #2541 |
2a46732
to
96e5b50
Compare
In 96e5b504881961fc861c2142dfc0a52679c1c8c3 I added align classes mentioned in issue #3516. |
@aduth when you have a chance: what is the best way to help this PR move on? The changes proposed here make a lot of sense to me. |
ac92034
to
aaf961d
Compare
|
Should |
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.
Should wp-block-cover-image-text class be wp-block-cover-image__text?
The general guidelines are outlined here:
In the case of blocks (particularly block front-end styling), the rules haven't been quite consistent with this. Based on the generated class I think .wp-block-cover-image-text
could be fine enough.
The alternative being that we don't assign a class to the paragraph and instead apply styles via an element selector (.wp-block-cover-image > p
), but arguments can be made discouraging this, as it makes the markup less tolerant to deprecation changes.
Speaking of styling and deprecation, one important consideration we should have with all blocks, including the changes here, is that we should anticipate that some older blocks exist with the deprecated markup (here, the h2
tag) and therefore we ought to always keep those styles around so users' legacy blocks' don't suddenly start breaking when viewed on the front-end (cc @youknowriad ).
When running npm test I still get errors. Something about File 'core__pullquote__multi-paragraph.json' does not match expected value:
Have you tried running the npm script for regenerating fixtures?
npm run fixtures:regenerate
blocks/library/cover-image/index.js
Outdated
const style = url ? | ||
{ backgroundImage: `url(${ url })` } : | ||
undefined; | ||
const classes = classnames( |
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.
It's possible we could DRY this up a bit by moving the common logic into a function (similar to the shared blockAttributes
variable).
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.
Only for const style
? I can do the similar as function dimRatioToClass()
.
Related: #4408, #3851 (comment) |
3bac288
to
fc6b77a
Compare
Hmmm I messed my branch when accidently deleting also this branch on local. Now I only have one commit message in here: 80a7d815d8d9b29e9a970fc7248195632e7ba178 |
12970ea
to
80a7d81
Compare
Does this PR also ensure that no empty |
@jasmussen I just tested and it does output empty If @aduth have time to push me into right direction that would be nice. Edit: This is what I got for title check: 8ba755d688f50517f2f6340b1714a5eeef8f0f63 |
Not sure what's left on this PR. How can we help? |
@youknowriad Pretty much nothing left to do if you ask me:) There seems to be some merge conflicts, I'll try to look into them over the weekend. |
8ba755d
to
5898663
Compare
Fixed merge conflict and added link color to white. |
blocks/library/cover-image/index.js
Outdated
const classes = classnames( | ||
className, | ||
align ? `align${ align }` : null, |
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 seems like a duplicate?
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.
I removed duplicate and fixed merge conflict.
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 looks good to me, there's a small duplicate and failing test. I'll merge once fixed
459a70e
to
7d93529
Compare
@youknowriad Any update on this one? There is check errors but other that should be good to go. I'm going trough all the changes in the front-end and this popped up. |
Actually, I was waiting for you to fix the tests before merging :). Do you want some help in doing so? |
Yes please:) I don't know how to fix the tests, tried couple of times but don't really understand the reasons. |
@jasmussen Can I have a quick design review for this before merge. The text looks lighter because it's not an H2 anymore but maybe it's better this way? |
Thanks for the fix! We could add |
@jasmussen Can we merge this? |
Looks right to me, but I didn't add |
@youknowriad Can we merge this? |
Description
Update cover image markup and CSS discussed in #2902.
How Has This Been Tested?
npm test
gives error. I can't seem to track down why? It's about"isValid": false,
.Screenshots (jpeg or gifs if applicable):
Types of changes
<section>
to<div>
.<h2>
to<p>
.<p class="wp-block-cover-image-text">
. This was mainly for easier styling in the editor.wp-block-cover-image-text
. I have now added it like this:<p className={ classnames( 'wp-block-cover-image-text' ) }>
Checklist: