This PR refactors the initial concept of a Slider block. It has been used on several projects and the editor feature and styling has been tested on those projects and refined a few times.
Slider Block: This block is a wrapper for the Slide block. The SwiperJS library is initialized on this container.
Slide Block: Each slide is a Slide block. All blocks should go inside the Slide block for each slide.
Defaults that cannot be changed without a code update include: The type of slider and parameters for Swiper.
The pagination is enabled and has an example style with notes.
The Slider and Slide blocks have their own css files. However, in the general theme styles I included one to use for overrides that are project-specific. Over time we can use that to have different themes or something. But either way it keeps the base block styles separate.
Editor UI: A fully custom (using all native WordPress components) editor UI has navigation between the slides (displaying only the current slide and hiding all others). You can click the + or Add Slide button to add an additional slide. Although I do still recommend keeping a close eye on the Document Overview list view of blocks to make sure things stay where they should be.
The Swiper JS and CSS loads from the node_modules Swiper directory. Those have been moved to the block's code. This should mean they load only when they block is used instead of always loading. Either way, its more organized this way.
Colors were set to black or greys to keep them generic until we have color naming convention worked out.
This should provide a stable starting point for custom sliders. Parameters for Swiper can be added easily and there are settings for prev/next arrow nav (separate from the bullet pagination) that can be uncommented to enable these. They are in the Slider block's js files and in the Swiper init file.
As the functional tester for this pull request, I verify that:
[ ] The slider should be functional and have no obvious visual issues and no console errors.
[ ] It should be mobile responsive.
Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana. If all tests pass, move the task to "Ready for Code Review" in Asana and tag a team member for code review.
Code review
As the code reviewer for this pull request, I verify that:
[ ] All automated tests have passed.
[ ] The code is written (or documented) in a way that is easy to understand.
[ ] The code is free of obvious errors.
[ ] The code is free of obvious duplication.
[ ] The code follows our coding standards.
[ ] The code is sanitized or escaped appropriately for any SQL or XSS injection possibilities.
Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana or continue with the "merging" steps below.
Merging
As the individual merging this pull request, I verify that:
[ ] All automated tests have passed.
[ ] All functional tests have passed.
[ ] All code review tests have passed.
[ ] I have moved the task to "Ready to Deploy" in Asana and notified the pull request author.
Changes proposed in this pull request
This PR refactors the initial concept of a Slider block. It has been used on several projects and the editor feature and styling has been tested on those projects and refined a few times.
Closes https://app.asana.com/0/1203895219649773/1203989192608428/f
Pre-submit checklist
As the author of this pull request, I verify that:
master.Testing
How to test the changes in this pull request
Follow the steps below to test the changes in this PR.
Functional tests
As the functional tester for this pull request, I verify that:
Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana. If all tests pass, move the task to "Ready for Code Review" in Asana and tag a team member for code review.
Code review
As the code reviewer for this pull request, I verify that:
Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana or continue with the "merging" steps below.
Merging
As the individual merging this pull request, I verify that: