Make layout compatible with wp7.0#4497
Conversation
girishpanchal30
added
the
pr-checklist-skip
pirate-bot
added
the
pr-checklist-complete
There was a problem hiding this comment.
Pull request overview
Adds a WP 7.x compatibility stylesheet intended to fix small admin/customizer layout regressions introduced by WordPress 7 UI changes.
Changes:
- Enqueue a new WP7-specific admin stylesheet from the Customizer loader on newer WP versions.
- Add a new
assets/scss/wp7.scssentry to the Grunt SASS build and CSS minification pipeline. - Introduce WP7 CSS overrides for sizing controls and core UI button/dashicon alignment.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
inc/customizer/loader.php |
Enqueues a new admin stylesheet conditionally based on WordPress version. |
grunt/sass.js |
Adds compilation target for assets/scss/wp7.scss → assets/css/wp7.css. |
grunt/cssmin.js |
Adds minification target for assets/css/wp7.css → assets/css/wp7.min.css. |
assets/scss/wp7.scss |
New WP7 compatibility CSS overrides affecting Neve controls and .wp-core-ui buttons. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .neve-responsive-sizing button.link { | ||
| min-height: 40px; | ||
| } | ||
|
|
||
| .wp-core-ui .button .dashicons, | ||
| .wp-core-ui .button-primary .dashicons, | ||
| .wp-core-ui .button-secondary .dashicons { | ||
| line-height: 1; | ||
| } | ||
|
|
||
| .wp-core-ui .button-link, | ||
| .wp-core-ui .button.button-link { | ||
| border: none; | ||
| } No newline at end of file |
There was a problem hiding this comment.
I am not sure about those changes since you are practically reverting the core styles of .wp-core-ui WP 7.0 at a general level.
I will suggest working with a targeted selector. @abaicus @HardeepAsrani, if you have some feedback about this.
There was a problem hiding this comment.
@Soare-Robert-Daniel, I have implemented as you suggested with the latest commit. Please check it and let me know if any changes are needed.
There was a problem hiding this comment.
The new selectors look nice. We still have a problem since this change is loaded as an extra file. I do not think I saw this before, and not sure if it is a good pattern.
The current CSS, I think, can go directly into the main CSS files
There was a problem hiding this comment.
The current CSS, I think, can go directly into the main CSS files
For the button styles, we can go with what you suggested. However, the input field height has also been updated to 40px in WP 7.x. Because of that, the buttons in the Customizer for WP 6.x look like this:
There was a problem hiding this comment.
That 40px is a good point. Another version that I am thinking will be to add a special class on the component based on the WP version and some CSS based on it, like some sort of versioning:
But a separate file might be simpler. @abaicus @HardeepAsrani, what do you think?
There was a problem hiding this comment.
@girishpanchal30 It would be helpful if you could share a screenshot of the final version.
There was a problem hiding this comment.
Customizer link component looks like:
In 6.x:
In 7.x:
There was a problem hiding this comment.
@girishpanchal30 the inputs should keep their height from 6.x, same should the button.
There was a problem hiding this comment.
@abaicus I have set the height for input and buttons to 30px (as per 6.x) with the latest commit. Please check it and let me know if any changes are needed.
There was a problem hiding this comment.
Sounds good, it should be fine if it looks like it used to before 7.x
Thank you for the changes, @girishpanchal30 👍🏻
|
🎉 This PR is included in version 4.2.4 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
pirate-bot
added
the
released
Summary
Fixed the layout's style to make it compatible with WordPress 7.0.
Check before Pull Request is ready:
Closes #4496