fellyph · Copilot · Nov 21, 2025 · Nov 21, 2025
diff --git a/.github/workflows/build-plugin.yml b/.github/workflows/build-plugin.yml
@@ -12,16 +12,16 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
-          cache: "npm"
+          node-version: 'lts/*'
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci
@@ -59,4 +59,3 @@ jobs:
           files: my-scroll-block*.zip
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -18,8 +18,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
-          cache: "npm"
+          node-version: 'lts/*'
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci

diff --git a/AGENTS.md b/AGENTS.md
@@ -83,10 +83,12 @@ The plugin uses **WordPress block filters** to extend core blocks without creati
 ### CSS Classes & Frontend
 
 **Editor classes:**
+
 - `.scroll-anim-block` - Main animation class
 - `.scroll-anim-{type}` - Specific animation type class
 
 **Frontend rendering:**
+
 - Classes are added by PHP filters in `my-scroll-block.php` (handles dynamic blocks)
 - JavaScript filters in `src/index.js` handle saved block markup in post editor
 - CSS scroll timeline rules in `src/style.css` trigger animations
@@ -103,20 +105,21 @@ Tests use **Playwright + TypeScript + WordPress Playground**:
 - **Blueprint** (`blueprint.json`): Contains the initial data to initiate a WordPress Playground instance for testing
 
 To run tests individually:
+
 ```bash
 npx playwright test scroll-block.spec.ts -g "test-name-pattern"
 ```
 
 ## Key Files & Their Roles
 
-| File | Purpose |
-|------|---------|
-| [my-scroll-block.php](my-scroll-block.php) | Plugin entry point; enqueues assets; applies render_block filter for frontend class/attr injection |
-| [src/index.js](src/index.js) | Block filters for editor integration; attribute registration, UI controls, markup manipulation |
-| [src/style.css](src/style.css) | CSS scroll timeline rules for all animation types |
-| [src/editor.css](src/editor.css) | Editor UI styles (animation indicator, editor preview) |
-| [tests/scroll-block.spec.ts](tests/scroll-block.spec.ts) | End-to-end tests for editor and frontend rendering |
-| [tests/global-setup.ts](tests/global-setup.ts) | WordPress Playground startup with plugin mounting |
+| File                                                     | Purpose                                                                                            |
+| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| [my-scroll-block.php](my-scroll-block.php)               | Plugin entry point; enqueues assets; applies render_block filter for frontend class/attr injection |
+| [src/index.js](src/index.js)                             | Block filters for editor integration; attribute registration, UI controls, markup manipulation     |
+| [src/style.css](src/style.css)                           | CSS scroll timeline rules for all animation types                                                  |
+| [src/editor.css](src/editor.css)                         | Editor UI styles (animation indicator, editor preview)                                             |
+| [tests/scroll-block.spec.ts](tests/scroll-block.spec.ts) | End-to-end tests for editor and frontend rendering                                                 |
+| [tests/global-setup.ts](tests/global-setup.ts)           | WordPress Playground startup with plugin mounting                                                  |
 
 ## When Making Changes
 
@@ -130,6 +133,7 @@ npx playwright test scroll-block.spec.ts -g "test-name-pattern"
 ### Modifying Block Support
 
 Supported blocks are defined in:
+
 - `SUPPORTED_BLOCKS` constant in [src/index.js](src/index.js)
 - `$supported_blocks` array in [my-scroll-block.php](my-scroll-block.php) (must match)
 
@@ -142,6 +146,7 @@ The animation selector is rendered via `PanelBody` + `SelectControl` components
 ### Testing New Features
 
 Tests run against a real WordPress instance via WordPress Playground. When adding tests:
+
 1. Use TypeScript for type safety (`npm run typecheck` validates)
 2. Ensure WordPress Playground can reach the feature (auto-login, plugin pre-activated)
 3. Use page selectors that work with WordPress's block editor DOM
@@ -210,4 +215,4 @@ This will install and activate the plugin with the changes from this branch.
 - The `installPlugin` step automatically installs and activates the plugin
 - Users can test the changes without needing to set up a local WordPress environment
 - This mirrors the functionality of the GitHub action in `.github/workflows/pr-playground-comment.yml` but uses branches instead of PR refs
-- Important: Use `"refType":"branch"` when referencing branch names, not `"refType":"refname"` (which is used for full refs like `refs/pull/123/head`)
+- Important: Use `"refType":"branch"` when referencing branch names, not `"refType":"refname"` (which is used for full refs like `refs/pull/123/head`)
diff --git a/NOVAS-FUNCIONALIDADES.md b/NOVAS-FUNCIONALIDADES.md
@@ -67,13 +67,13 @@ Uma nova animação de entrada que usa o efeito de desfoque (blur) para criar tr
 
 ```css
 @keyframes scrollBlurIn {
-  from { 
-    opacity: 0; 
-    filter: blur(10px); 
+  from {
+    opacity: 0;
+    filter: blur(10px);
   }
-  to { 
-    opacity: 1; 
-    filter: blur(0); 
+  to {
+    opacity: 1;
+    filter: blur(0);
   }
 }
 ```
@@ -136,13 +136,15 @@ Novos atributos adicionados aos blocos:
 Os elementos renderizados incluem:
 
 ```html
-<p class="scroll-anim-block scroll-anim-fade-in-out"
-   data-scroll-anim="1"
-   data-anim-range="custom"
-   data-entry-start="20"
-   data-entry-end="100"
-   data-exit-start="0"
-   data-exit-end="100">
+<p
+  class="scroll-anim-block scroll-anim-fade-in-out"
+  data-scroll-anim="1"
+  data-anim-range="custom"
+  data-entry-start="20"
+  data-entry-end="100"
+  data-exit-start="0"
+  data-exit-end="100"
+>
   Conteúdo
 </p>
 ```
@@ -156,8 +158,8 @@ Todas as animações usam `animation-timeline: view()` conforme a especificaçã
   .scroll-anim-fade-in-out {
     animation-timeline: view();
   }
-  
-  [data-anim-range="quick"].scroll-anim-fade-in {
+
+  [data-anim-range='quick'].scroll-anim-fade-in {
     animation-range: entry 0% cover 50%;
   }
 }
@@ -198,12 +200,15 @@ O plugin respeita as preferências de movimento reduzido:
 ## 🎓 Exemplos da Documentação Implementados
 
 ### ✅ Contact List (In-and-Out)
+
 Implementado com as animações "In & Out" - elementos que animam ao entrar E sair.
 
 ### ✅ Animation Range Control
+
 Implementado com os presets de timing e controles custom.
 
 ### ✅ Multiple Timeline Ranges
+
 Implementado com as animações In-and-Out que usam ranges diferentes para entry e exit.
 
 ## 🚀 Próximos Passos Possíveis
@@ -219,4 +224,3 @@ Baseado na documentação, futuras funcionalidades poderiam incluir:
 ---
 
 **Desenvolvido com base na documentação oficial do Chrome e seguindo as melhores práticas de Web Animations API.**
-
diff --git a/PROGRESS-BAR-SUMMARY.md b/PROGRESS-BAR-SUMMARY.md
@@ -7,6 +7,7 @@ A new **Reading Progress Bar** block has been successfully implemented using CSS
 ## 📁 Files Created
 
 ### Block Files
+
 ```
 src/progress-block/
 ├── block.json          ✅ Block metadata & attributes
@@ -16,6 +17,7 @@ src/progress-block/
 ```
 
 ### Build Output
+
 ```
 build/progress-block/
 ├── block.json         ✅ Copied block metadata
@@ -26,6 +28,7 @@ build/progress-block/
 ```
 
 ### Documentation
+
 ```
 READING-PROGRESS-BAR.md    ✅ Complete user guide
 PROGRESS-BAR-SUMMARY.md    ✅ This file
@@ -34,21 +37,24 @@ PROGRESS-BAR-SUMMARY.md    ✅ This file
 ## 🎯 Key Features
 
 ### 1. **Scroll Progress Timeline**
+
 - Uses `animation-timeline: scroll(root block)`
 - Tracks document scroll position
 - 100% CSS, no JavaScript needed
 - Runs off main thread for 60fps performance
 
 ### 2. **Customization Options**
-| Option | Type | Default | Range/Options |
-|--------|------|---------|---------------|
-| Position | Select | top | top, bottom |
-| Bar Height | Range | 4px | 2-20px |
-| Bar Color | Color | #3858e9 | Any color + alpha |
-| Background Color | Color | #e0e0e0 | Any color + alpha |
-| Show Percentage | Toggle | false | true/false |
+
+| Option           | Type   | Default | Range/Options     |
+| ---------------- | ------ | ------- | ----------------- |
+| Position         | Select | top     | top, bottom       |
+| Bar Height       | Range  | 4px     | 2-20px            |
+| Bar Color        | Color  | #3858e9 | Any color + alpha |
+| Background Color | Color  | #e0e0e0 | Any color + alpha |
+| Show Percentage  | Toggle | false   | true/false        |
 
 ### 3. **Responsive & Accessible**
+
 - Mobile optimized
 - Respects `prefers-reduced-motion`
 - Non-blocking (pointer-events: none)
@@ -68,16 +74,19 @@ PROGRESS-BAR-SUMMARY.md    ✅ This file
 }
 
 @keyframes progress-bar {
-  from { transform: scaleX(0); }
-  to { transform: scaleX(1); }
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
 }
 ```
 
 ### HTML Structure
 
 ```html
-<div class="reading-progress-container position-top" 
-     style="--progress-bar-color: #3858e9;">
+<div class="reading-progress-container position-top" style="--progress-bar-color: #3858e9;">
   <div class="reading-progress-track">
     <div class="reading-progress-bar"></div>
   </div>
@@ -116,6 +125,7 @@ PROGRESS-BAR-SUMMARY.md    ✅ This file
 ## 🎨 Usage Examples
 
 ### Basic Setup
+
 1. Add "Reading Progress Bar" block to post
 2. Configure in sidebar (color, height, position)
 3. Publish
@@ -124,6 +134,7 @@ PROGRESS-BAR-SUMMARY.md    ✅ This file
 ### Recommended Configurations
 
 **Blog Post:**
+
 ```
 Position: Top
 Height: 4px
@@ -133,6 +144,7 @@ Percentage: Off
 ```
 
 **Documentation:**
+
 ```
 Position: Top
 Height: 5px
@@ -142,6 +154,7 @@ Percentage: On
 ```
 
 **Minimal:**
+
 ```
 Position: Bottom
 Height: 2px
@@ -152,28 +165,29 @@ Percentage: Off
 
 ## 🌐 Browser Support
 
-| Browser | Version | Status |
-|---------|---------|--------|
-| Chrome | 115+ | ✅ Full Support |
-| Edge | 115+ | ✅ Full Support |
-| Opera | 101+ | ✅ Full Support |
-| Firefox | Experimental | ⏳ Behind Flag |
-| Safari | In Development | ⏳ Coming Soon |
+| Browser | Version        | Status          |
+| ------- | -------------- | --------------- |
+| Chrome  | 115+           | ✅ Full Support |
+| Edge    | 115+           | ✅ Full Support |
+| Opera   | 101+           | ✅ Full Support |
+| Firefox | Experimental   | ⏳ Behind Flag  |
+| Safari  | In Development | ⏳ Coming Soon  |
 
 ### Fallback
+
 - Displays warning message in unsupported browsers
 - Gracefully degrades (bar hidden but site functional)
 - No errors or broken layouts
 
 ## 📊 Performance Metrics
 
-| Metric | Value |
-|--------|-------|
-| JS Bundle | 4.3KB (minified) |
-| CSS Bundle | 2.3KB (minified) |
-| Runtime CPU | <1% additional |
-| FPS | Consistent 60fps |
-| Render | Off main thread |
+| Metric      | Value            |
+| ----------- | ---------------- |
+| JS Bundle   | 4.3KB (minified) |
+| CSS Bundle  | 2.3KB (minified) |
+| Runtime CPU | <1% additional   |
+| FPS         | Consistent 60fps |
+| Render      | Off main thread  |
 
 ## 🎓 Based On
 
@@ -190,14 +204,14 @@ This implementation follows the official Chrome documentation:
 
 ## 🔄 Difference from View Timeline
 
-| Feature | Scroll Timeline (Progress Bar) | View Timeline (In-Out Animations) |
-|---------|-------------------------------|-----------------------------------|
-| **Tracks** | Document scroll position | Element visibility in viewport |
-| **Use Case** | Progress indicators, parallax | Entry/exit animations |
-| **Syntax** | `scroll(root block)` | `view()` |
-| **Range** | 0% (top) to 100% (bottom) | entry/cover/exit ranges |
-| **Fixed Position** | Usually yes | Usually no |
-| **Multiple Instances** | Typically one per page | Multiple per page |
+| Feature                | Scroll Timeline (Progress Bar) | View Timeline (In-Out Animations) |
+| ---------------------- | ------------------------------ | --------------------------------- |
+| **Tracks**             | Document scroll position       | Element visibility in viewport    |
+| **Use Case**           | Progress indicators, parallax  | Entry/exit animations             |
+| **Syntax**             | `scroll(root block)`           | `view()`                          |
+| **Range**              | 0% (top) to 100% (bottom)      | entry/cover/exit ranges           |
+| **Fixed Position**     | Usually yes                    | Usually no                        |
+| **Multiple Instances** | Typically one per page         | Multiple per page                 |
 
 ## 🚀 Next Steps (Optional Enhancements)
 
@@ -213,10 +227,12 @@ Based on Chrome docs, future features could include:
 ## 📝 Files Modified
 
 ### Existing Files Updated
+
 - `/src/index.js` - Added import for progress block
 - `/my-scroll-block.php` - Added block registration function
 
 ### New Files Created
+
 - `/src/progress-block/block.json`
 - `/src/progress-block/index.js`
 - `/src/progress-block/editor.css`
@@ -261,4 +277,3 @@ npm run playground:start
 **Implementation Date:** November 10, 2025  
 **Based On:** [Chrome Developers - Scroll-Driven Animations](https://developer.chrome.com/docs/css-ui/scroll-driven-animations)  
 **Status:** ✅ Complete & Ready for Production
-