Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Slider not working inside a flex container #1906

Merged
merged 4 commits into from
Dec 18, 2023
Merged

Slider not working inside a flex container #1906

merged 4 commits into from
Dec 18, 2023

Conversation

cristian-ungureanu
Copy link

@cristian-ungureanu cristian-ungureanu commented Oct 2, 2023 •
edited

Closes #1750, Codeinwp/neve#4092.

Summary

  • Due to a Glide bug, the slider is stretching far more than the container if the container has a flexible width.
  • It seems that making the container "display:grid" fixes the issue
  • The fix was already in Otter but it only worked if you would have added the Slider inside a column

Test instructions

Please note that the issue I've mentioned here is still there but I think we can consider it an edge case. Here's how it manifests: https://vertis.d.pr/v/Nm55m6

Checklist before the final review

  • Included E2E or unit tests for the changes in this PR.
  • Visual elements are not affected by independent changes.
  • It is at least compatible with the minimum WordPress version.
  • It loads additional script in frontend only if it is required.
  • Does not impact the Core Web Vitals.
  • In case of deprecation, old blocks are safely migrated.
  • It is usable in Widgets and FSE.
  • Copy/Paste is working if the attributes are modified.
  • PR is following the best practices

@pirate-bot pirate-bot added the pr-checklist-incomplete The Pull Request checklist is incomplete. (automatic label) label Oct 2, 2023
@cristian-ungureanu cristian-ungureanu added the pr-checklist-skip Allow this Pull Request to skip checklist. label Oct 2, 2023
@pirate-bot pirate-bot added pr-checklist-complete The Pull Request checklist is complete. (automatic label) and removed pr-checklist-incomplete The Pull Request checklist is incomplete. (automatic label) labels Oct 2, 2023
This was linked to issues Oct 2, 2023
Slider images not rendered if added in Neve's header #1750
Closed
Image sliders (Otter and Smart Slider 3) in header widget not visible in mobile view Codeinwp/neve#4092
Open
@pirate-bot
Copy link
Contributor

pirate-bot commented Oct 2, 2023 •
edited

Bundle Size Diff

Package Old Size New Size Diff
Animations 284.71 KB 284.71 KB 0 B (0.00%)
Blocks 1.5 MB 1.5 MB -9 B (-0.00%)
CSS 91.71 KB 91.71 KB 0 B (0.00%)
Dashboard 176.79 KB 176.79 KB 0 B (0.00%)
Export Import 89.53 KB 89.53 KB 0 B (0.00%)
Pro 354.14 KB 354.14 KB 0 B (0.00%)

@pirate-bot
Copy link
Contributor

pirate-bot commented Oct 2, 2023 •
edited

Plugin build for 0bbfa37 is ready 🛎️!

@pirate-bot
Copy link
Contributor

pirate-bot commented Oct 2, 2023 •
edited

E2E Tests

Playwright Test Status:

Performance Results serverResponse: 184.4, firstPaint: 565.1, domContentLoaded: 1647.9, loaded: 1649.9, firstContentfulPaint: 9692.15, firstBlock: 16616, type: 41.25, minType: 38.71, maxType: 46.97, typeContainer: 12.25, minTypeContainer: 10.83, maxTypeContainer: 16.66, focus: 58.61, minFocus: 52.11, maxFocus: 71.81, inserterOpen: 23.45, minInserterOpen: 22.21, maxInserterOpen: 25.43, inserterSearch: 7.59, minInserterSearch: 7.25, maxInserterSearch: 8.34, inserterHover: 36.35, minInserterHover: 34.28, maxInserterHover: 38.09, listViewOpen: 149.14, minListViewOpen: 134.29, maxListViewOpen: 178.43

Soare-Robert-Daniel
Soare-Robert-Daniel approved these changes Oct 2, 2023
View reviewed changes
Copy link
Contributor

@Soare-Robert-Daniel Soare-Robert-Daniel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your solution is 🔥 . Also, it is not breaking for me in Chrome, Vivaldi, Firefox, and Safari 💯
https://github.com/Codeinwp/otter-blocks/assets/17597852/b9056dd2-9691-4e1d-b004-ad5240c8fef9

@rodica-andronache
Copy link

hey @cristian-ungureanu I'm not sure what I'm missing, but the slider is not working for me. I've tried both on instawp and local. https://vertis.d.pr/v/vL02Tl
You can check it here:

https://yellowed-yacare-oegik.vertisite.cloud/
user: admin
pass: yyF@^@tgUQuReny#4MmjU*cHmim

@cristian-ungureanu
Copy link
Author

Hey @rodica-andronache, thanks for testing. I opened another ticket for it here: #1907, it seems the files are not loaded if you add a Slider block in the header like this.

When I tested it, I had another slider block inside my page, that's why I didn't see this issue. Hardeep or Robert should be able to handle it. Until then, to test this particular issue, you can add another slider inside the page content.

@rodica-andronache
Copy link

@cristian-ungureanu ok, tested again with another slider in the content of the page, and I can confirm that in that case, the slider from the header is loading as well.
But there is another issue. The arrows of the slider from the header area are not working, on mobile https://vertis.d.pr/v/2djypx

@Soare-Robert-Daniel
Copy link
Contributor

Now, the slider should work in Neve Header on Mobile.

The solution was not noticeable at first.

When you use the header builder for desktop and mobile, and add the same widget then the slider will appear in two places: the section for desktop and the section for mobile.

Because we were using a dump selector like #${ slider.id }, we were only getting the first apparition of the slider, which in the context of the builder was the desktop one. This made that the mobile slider to be left out.

We should avoid as much as possible to make selectors like this because it took a noticeable time to debug.

@Soare-Robert-Daniel Soare-Robert-Daniel self-assigned this Dec 14, 2023
@HardeepAsrani HardeepAsrani merged commit d3997e8 into development Dec 18, 2023
11 checks passed
@HardeepAsrani HardeepAsrani deleted the fix/slider-not-working branch December 18, 2023 12:55
@pirate-bot
Copy link
Contributor

🎉 This PR is included in version 2.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Dec 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@HardeepAsrani HardeepAsrani HardeepAsrani approved these changes

@Soare-Robert-Daniel Soare-Robert-Daniel Soare-Robert-Daniel approved these changes

Assignees

@Soare-Robert-Daniel Soare-Robert-Daniel

Labels
pr-checklist-complete The Pull Request checklist is complete. (automatic label) pr-checklist-skip Allow this Pull Request to skip checklist. released Indicate that an issue has been resolved and released in a particular version of the product.
Projects
None yet
Milestone
No milestone
5 participants
@cristian-ungureanu @pirate-bot @rodica-andronache @Soare-Robert-Daniel @HardeepAsrani