Codeinwp / Codeinwp/otter-blocks
Conflict between Animations and Font Awesome 6
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 198
- Forks
- 36
- Avg merge
- 3d 4h
- Merged PRs (30d)
- 30
Description
Description
A user reported that there is a problem with the Block Animations plugin, hence with the Otter Blocks.
Each speed type has a different class, but they use generic names. In this case, when using the Fast speed, it adds a .fast class on the block.
In Font Awesome 6, there is also a .fast class, so they interfere.
Ref: https://wordpress.org/support/topic/compatibility-issue-with-font-awesome-6-pro/
Step-by-step reproduction instructions
- Insert a block
- Open the Animations
- Select an animation, then pick the fast speed
- Go to the live page and inspect it
Screenshots, screen recording, code snippet or Help Scout ticket
Environment info
No response
Is the issue you are reporting a regression
No
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the Block Animations workflow and inspect the generated class when the Fast speed is selected. Trace where the animation speed class is created and styled, then verify that the live block no longer conflicts with Font Awesome 6 while the animation still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100