Skip to content

updating blueprints #8

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

Merged
fellyph merged 1 commit into from
Nov 21, 2025
Merged

updating blueprints #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions blueprint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"meta": {
"name": "My Scroll Block",
"title": "My Scroll Block",
"description": "A WordPress plugin that adds scroll-driven animation capabilities to core blocks using CSS scroll timelines.",
"author": "Fellyph Cintra"
},
Expand All @@ -16,7 +16,7 @@
},
{
"step": "runPHP",
"code": "<?php require_once './wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Simple post from PHP', 'post_content' => '<!-- wp:paragraph --><p>A trip to Portugal is an immersion into a land where history, culture, and nature blend seamlessly. From the sun-drenched beaches of the Algarve to the rugged volcanic landscapes of the Azores, Portugal offers a stunning diversity of scenery.</p><!-- /wp:paragraph --><!-- wp:paragraph --><p>Wander through Lisbon&#39;s historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world&#39;s oldest wine region.</p><!-- /wp:paragraph --><!-- wp:image {\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"scale-up\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-scale-up\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/cover-image.webp\" alt=\"\"/></figure><!-- /wp:image --><!-- wp:paragraph {\"animationType\":\"fade-in\"} --><p class=\"scroll-anim-block scroll-anim-fade-in\" data-scroll-anim=\"1\">Portugal&#39;s rich past is visible everywhere, from medieval castles to the monuments of the Age of Discoveries, while its modern spirit thrives in vibrant cities and a welcoming, laid-back culture.</p><!-- /wp:paragraph --><!-- wp:heading {\"className\":\"scroll-anim-scale-up\",\"animationType\":\"fade-in\"} --><h2 class=\"wp-block-heading scroll-anim-scale-up scroll-anim-block scroll-anim-fade-in\" data-scroll-anim=\"1\">Cities of Portugal</h2><!-- /wp:heading --><!-- wp:paragraph {\"animationType\":\"fade-in\"} --><p class=\"scroll-anim-block scroll-anim-fade-in\" data-scroll-anim=\"1\">Wander through Lisbon&#39;s historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world&#39;s oldest wine region.</p><!-- /wp:paragraph --><!-- wp:columns {\"align\":\"wide\"} --><div class=\"wp-block-columns alignwide\"><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"slide-in-right\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-slide-in-right\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_we7iutwe7iutwe7i.webp\" alt=\"\"/></figure><!-- /wp:image --></div><!-- /wp:column --><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"aspectRatio\":\"1\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"slide-in-up\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-slide-in-up\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_83jl2g83jl2g83jl.webp\" alt=\"\" style=\"aspect-ratio:1;object-fit:cover\"/></figure><!-- /wp:image --></div><!-- /wp:column --><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"slide-in-left\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-slide-in-left\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_pi34y8pi34y8pi34.webp\" alt=\"\"/></figure><!-- /wp:image --></div><!-- /wp:column --></div><!-- /wp:columns --><!-- wp:columns {\"align\":\"wide\"} --><div class=\"wp-block-columns alignwide\"><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"slide-in-right\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-slide-in-right\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_trof06trof06trof.webp\" alt=\"\"/></figure><!-- /wp:image --></div><!-- /wp:column --><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"aspectRatio\":\"1\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"scroll-anim-slide-in-up\",\"animationType\":\"slide-in-left\"} --><figure class=\"wp-block-image size-large scroll-anim-slide-in-up scroll-anim-block scroll-anim-slide-in-left\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_we7iutwe7iutwe7i.webp\" alt=\"\" style=\"aspect-ratio:1;object-fit:cover\"/></figure><!-- /wp:image --></div><!-- /wp:column --></div><!-- /wp:columns --><!-- wp:paragraph {\"animationType\":\"fade-in\"} --><p class=\"scroll-anim-block scroll-anim-fade-in\" data-scroll-anim=\"1\">Wander through Lisbon&#39;s historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world&#39;s oldest wine region.</p><!-- /wp:paragraph -->', 'post_author' => 1, 'post_status' => 'publish')); ?>"
"code": "<?php require_once '/wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Simple post from PHP', 'post_content' => '<!-- wp:paragraph --><p>A trip to Portugal is an immersion into a land where history, culture, and nature blend seamlessly. From the sun-drenched beaches of the Algarve to the rugged volcanic landscapes of the Azores, Portugal offers a stunning diversity of scenery.</p><!-- /wp:paragraph --><!-- wp:paragraph --><p>Wander through Lisbon&#39;s historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world&#39;s oldest wine region.</p><!-- /wp:paragraph --><!-- wp:image {\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"scale-up\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-scale-up\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/cover-image.webp\" alt=\"\"/></figure><!-- /wp:image --><!-- wp:paragraph {\"animationType\":\"fade-in\"} --><p class=\"scroll-anim-block scroll-anim-fade-in\" data-scroll-anim=\"1\">Portugal&#39;s rich past is visible everywhere, from medieval castles to the monuments of the Age of Discoveries, while its modern spirit thrives in vibrant cities and a welcoming, laid-back culture.</p><!-- /wp:paragraph --><!-- wp:heading {\"className\":\"scroll-anim-scale-up\",\"animationType\":\"fade-in\"} --><h2 class=\"wp-block-heading scroll-anim-scale-up scroll-anim-block scroll-anim-fade-in\" data-scroll-anim=\"1\">Cities of Portugal</h2><!-- /wp:heading --><!-- wp:paragraph {\"animationType\":\"fade-in\"} --><p class=\"scroll-anim-block scroll-anim-fade-in\" data-scroll-anim=\"1\">Wander through Lisbon&#39;s historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world&#39;s oldest wine region.</p><!-- /wp:paragraph --><!-- wp:columns {\"align\":\"wide\"} --><div class=\"wp-block-columns alignwide\"><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"slide-in-right\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-slide-in-right\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_we7iutwe7iutwe7i.webp\" alt=\"\"/></figure><!-- /wp:image --></div><!-- /wp:column --><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"aspectRatio\":\"1\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"slide-in-up\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-slide-in-up\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_83jl2g83jl2g83jl.webp\" alt=\"\" style=\"aspect-ratio:1;object-fit:cover\"/></figure><!-- /wp:image --></div><!-- /wp:column --><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"slide-in-left\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-slide-in-left\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_pi34y8pi34y8pi34.webp\" alt=\"\"/></figure><!-- /wp:image --></div><!-- /wp:column --></div><!-- /wp:columns --><!-- wp:columns {\"align\":\"wide\"} --><div class=\"wp-block-columns alignwide\"><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"animationType\":\"slide-in-right\"} --><figure class=\"wp-block-image size-large scroll-anim-block scroll-anim-slide-in-right\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_trof06trof06trof.webp\" alt=\"\"/></figure><!-- /wp:image --></div><!-- /wp:column --><!-- wp:column --><div class=\"wp-block-column\"><!-- wp:image {\"aspectRatio\":\"1\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"scroll-anim-slide-in-up\",\"animationType\":\"slide-in-left\"} --><figure class=\"wp-block-image size-large scroll-anim-slide-in-up scroll-anim-block scroll-anim-slide-in-left\" data-scroll-anim=\"1\"><img src=\"https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_we7iutwe7iutwe7i.webp\" alt=\"\" style=\"aspect-ratio:1;object-fit:cover\"/></figure><!-- /wp:image --></div><!-- /wp:column --></div><!-- /wp:columns --><!-- wp:paragraph {\"animationType\":\"fade-in\"} --><p class=\"scroll-anim-block scroll-anim-fade-in\" data-scroll-anim=\"1\">Wander through Lisbon&#39;s historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world&#39;s oldest wine region.</p><!-- /wp:paragraph -->', 'post_author' => 1, 'post_status' => 'publish')); ?>"
}
]
}
78 changes: 78 additions & 0 deletions generate_content.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@

content = r'''<!-- wp:paragraph -->
<p>A trip to Portugal is an immersion into a land where history, culture, and nature blend seamlessly. From the sun-drenched beaches of the Algarve to the rugged volcanic landscapes of the Azores, Portugal offers a stunning diversity of scenery.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-scale-up"} -->
<figure class="wp-block-image size-large scroll-anim-block scroll-anim-scale-up"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/cover-image.webp" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"className":"scroll-anim-scale-up scroll-anim-block scroll-anim-fade-in"} -->
<h2 class="wp-block-heading scroll-anim-scale-up scroll-anim-block scroll-anim-fade-in">Cities of Portugal</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-right"} -->
<figure class="wp-block-image size-large scroll-anim-block scroll-anim-slide-in-right"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_we7iutwe7iutwe7i.webp" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-up"} -->
<figure class="wp-block-image size-large scroll-anim-block scroll-anim-slide-in-up"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_83jl2g83jl2g83jl.webp" alt="" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-left"} -->
<figure class="wp-block-image size-large scroll-anim-block scroll-anim-slide-in-left"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_pi34y8pi34y8pi34.webp" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-right"} -->
<figure class="wp-block-image size-large scroll-anim-block scroll-anim-slide-in-right"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_trof06trof06trof.webp" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"scroll-anim-slide-in-up scroll-anim-block scroll-anim-slide-in-left"} -->
<figure class="wp-block-image size-large scroll-anim-slide-in-up scroll-anim-block scroll-anim-slide-in-left"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_we7iutwe7iutwe7i.webp" alt="" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
<!-- /wp:paragraph -->'''

# Step 1: Escape ' to \' for PHP
# We want the output to contain literal \' for every '
php_content = content.replace("'", "\\'")

# Step 2: Flatten to single line
php_content = php_content.replace("\n", "")

# Step 3: Escape " to \" for JSON
json_content = php_content.replace('"', '\\"')

print(json_content)
Copy link

@github-actions github-actions bot Nov 21, 2025

Choose a reason for hiding this comment

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

🟢 This script is a good utility for generating the content string. For improving readability and robustness, you could consider using f-strings for formatting and the json module for escaping, which is safer and handles more edge cases.

Suggested change
print(json_content)
+import json
+
+content = r'''<!-- wp:paragraph -->
+<p>A trip to Portugal is an immersion into a land where history, culture, and nature blend seamlessly. From the sun-drenched beaches of the Algarve to the rugged volcanic landscapes of the Azores, Portugal offers a stunning diversity of scenery.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-scale-up"} -->
+<figure class="wp-block-image size-large scroll-anim-block scroll-anim-scale-up"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/cover-image.webp" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph -->
+<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"className":"scroll-anim-scale-up scroll-anim-block scroll-anim-fade-in"} -->
+<h2 class="wp-block-heading scroll-anim-scale-up scroll-anim-block scroll-anim-fade-in">Cities of Portugal</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-right"} -->
+<figure class="wp-block-image size-large scroll-anim-block scroll-anim-slide-in-right"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_we7iutwe7iutwe7i.webp" alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-up"} -->
+<figure class="wp-block-image size-large scroll-anim-block scroll-anim-slide-in-up"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_83jl2g83jl2g83jl.webp" alt="" style="aspect-ratio:1;object-fit:cover"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-left"} -->
+<figure class="wp-block-image size-large scroll-anim-block scroll-anim-slide-in-left"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_pi34y8pi34y8pi34.webp" alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-right"} -->
+<figure class="wp-block-image size-large scroll-anim-block scroll-anim-slide-in-right"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_trof06trof06trof.webp" alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"scroll-anim-slide-in-up scroll-anim-block scroll-anim-slide-in-left"} -->
+<figure class="wp-block-image size-large scroll-anim-slide-in-up scroll-anim-block scroll-anim-slide-in-left"><img src="https://pub-4517acecab6543f0bc62af2fea95f2b6.r2.dev/Gemini_Generated_Image_we7iutwe7iutwe7i.webp" alt="" style="aspect-ratio:1;object-fit:cover"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:paragraph -->
+<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Wander through Lisbon's historic, tiled streets, where traditional fado music echoes from old neighborhoods. Or explore Porto, the capital of the Douro Valley, the world's oldest wine region.</p>
+<!-- /wp:paragraph -->'''
+
+# Step 1: Escape for PHP and flatten to single line
+php_content = content.replace("'", "\\'").replace("\n", "")
+
+# Step 2: Escape for JSON
+# Using json.dumps is safer as it handles various edge cases.
+# We slice the result of dumps to remove the surrounding quotes it adds.
+json_content = json.dumps(php_content)[1:-1]
+
+
+print(json_content)

65 changes: 61 additions & 4 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
import { createHigherOrderComponent } from '@wordpress/compose';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl, RangeControl } from '@wordpress/components';
import { PanelBody, SelectControl, RangeControl, ToggleControl } from '@wordpress/components';
import { dispatch } from '@wordpress/data';

import './style.css';
Expand Down Expand Up @@ -32,10 +32,14 @@ const ANIMATION_OPTIONS = [
{ label: __('Scale Up', 'my-scroll-block'), value: 'scale-up' },
{ label: __('Rotate In', 'my-scroll-block'), value: 'rotate-in' },
{ label: __('Blur In', 'my-scroll-block'), value: 'blur-in' },
{ label: __('3D Rotate In', 'my-scroll-block'), value: 'rotate-3d-in' },
{ label: __('Circle Reveal', 'my-scroll-block'), value: 'circle-reveal' },
{ label: __('Curtain Reveal', 'my-scroll-block'), value: 'curtain-reveal' },
{ label: __('🔄 Fade In & Out', 'my-scroll-block'), value: 'fade-in-out' },
{ label: __('🔄 Slide Up In & Out', 'my-scroll-block'), value: 'slide-up-in-out' },
{ label: __('🔄 Scale In & Out', 'my-scroll-block'), value: 'scale-in-out' },
{ label: __('🔄 Rotate In & Out', 'my-scroll-block'), value: 'rotate-in-out' },
{ label: __('🔄 3D Rotate In & Out', 'my-scroll-block'), value: 'rotate-3d-in-out' },
];

const RANGE_OPTIONS = [
Expand Down Expand Up @@ -79,6 +83,14 @@ addFilter('blocks.registerBlockType', 'my-scroll-block/extend-attributes', (sett
type: 'number',
default: 100,
},
parallaxEnabled: {
type: 'boolean',
default: false,
},
parallaxStrength: {
type: 'number',
default: 50,
},
},
};
});
Expand All @@ -97,6 +109,8 @@ const withAnimationControls = createHigherOrderComponent((BlockEdit) => {
animationEntryEnd = 100,
animationExitStart = 0,
animationExitEnd = 100,
parallaxEnabled = false,
parallaxStrength = 50,
},
setAttributes,
} = props;
Expand Down Expand Up @@ -219,6 +233,26 @@ const withAnimationControls = createHigherOrderComponent((BlockEdit) => {
)}
</>
)}


<ToggleControl
label={__('Enable Parallax Effect', 'my-scroll-block')}
checked={parallaxEnabled}
onChange={(value) => setAttributes({ parallaxEnabled: value })}
help={__('Adds a parallax scrolling effect to the block background or content.', 'my-scroll-block')}
/>

{parallaxEnabled && (
<RangeControl
label={__('Parallax Strength', 'my-scroll-block')}
value={parallaxStrength}
onChange={(value) => setAttributes({ parallaxStrength: value })}
min={10}
max={200}
step={10}
help={__('Higher values create more movement.', 'my-scroll-block')}
/>
)}
</PanelBody>
</InspectorControls>
<BlockEdit {...props} />
Expand All @@ -244,9 +278,11 @@ addFilter(
animationEntryEnd = 100,
animationExitStart = 0,
animationExitEnd = 100,
parallaxEnabled = false,
parallaxStrength = 50,
} = attributes;

if (animationType === 'none') {
if (animationType === 'none' && !parallaxEnabled) {
return extraProps;
}

Expand All @@ -272,6 +308,15 @@ addFilter(
}
}

if (parallaxEnabled) {
extraProps['data-parallax'] = '1';
extraProps['data-parallax-strength'] = parallaxStrength;
extraProps.style = {
...extraProps.style,
'--parallax-strength': `${parallaxStrength}px`,
};
}

return extraProps;
}
);
Expand All @@ -292,6 +337,8 @@ addFilter(
animationEntryEnd = 100,
animationExitStart = 0,
animationExitEnd = 100,
parallaxEnabled = false,
parallaxStrength = 50,
} = props.attributes;

const extraProps = {};
Expand All @@ -316,6 +363,16 @@ addFilter(
}
}
}


if (parallaxEnabled) {
extraProps['data-parallax'] = '1';
extraProps['data-parallax-strength'] = parallaxStrength;
extraProps.style = {
...props.style,
'--parallax-strength': `${parallaxStrength}px`,
Copy link

@github-actions github-actions bot Nov 21, 2025

Choose a reason for hiding this comment

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

🟡 The logic for adding animation and parallax attributes to blocks is duplicated in withAnimationAttributes and withListExtraProps. This could lead to maintenance issues if the logic needs to be updated in the future. Consider refactoring this into a shared function to improve code reuse and maintainability.

A shared function could accept the block's attributes and existing props as arguments and return the new set of props. This function could then be called from both withAnimationAttributes and withListExtraProps, ensuring consistency and making future changes easier.

Suggested change
'--parallax-strength': `${parallaxStrength}px`,
if (animationType === 'none' && !parallaxEnabled) {
return extraProps;
}
if (animationType !== 'none') {
extraProps['data-scroll-anim'] = '1';
extraProps.className = classnames(extraProps.className, `scroll-anim-${animationType}`);
if (animationRange && animationRange !== 'default') {
extraProps['data-anim-range'] = animationRange;
}
if (isInOutAnimation(animationType)) {
extraProps.style = {
...extraProps.style,
'--animation-entry-start': `${animationEntryStart}%`,
'--animation-entry-end': `${animationEntryEnd}%`,
'--animation-exit-start': `${animationExitStart}%`,
'--animation-exit-end': `${animationExitEnd}%`,
};
} else {
extraProps.style = {
...extraProps.style,
'--animation-entry-start': `${animationEntryStart}%`,
'--animation-entry-end': `${animationEntryEnd}%`,
};
}
}
if (parallaxEnabled) {
extraProps['data-parallax'] = '1';
extraProps['data-parallax-strength'] = parallaxStrength;
extraProps.style = {
...extraProps.style,
'--parallax-strength': `${parallaxStrength}px`,
};
}
return extraProps;
}
);
/**
* A filter that adds the animation attributes to the block's class name in the editor.
* This is necessary for the animations to work in the editor.
*
* @param {Function} BlockListBlock The original block list block component.
* @returns {Function} The modified block list block component.
*/
addFilter(
'editor.BlockListBlock',
'my-scroll-block/with-client-id',
createHigherOrderComponent((BlockListBlock) => {
return (props) => {
if (!SUPPORTED_BLOCKS.includes(props.name)) {
return <BlockListBlock {...props} />;
}
const {
animationType = 'none',
animationRange,
animationEntryStart = 0,
animationEntryEnd = 100,
animationExitStart = 0,
animationExitEnd = 100,
parallaxEnabled = false,
parallaxStrength = 50,
} = props.attributes;
const extraProps = {};
if (animationType !== 'none') {
extraProps.className = classnames(props.className, `scroll-anim-${animationType}`);
if (animationRange && animationRange !== 'default') {
extraProps['data-anim-range'] = animationRange;
}
if (isInOutAnimation(animationType)) {
extraProps.style = {
...props.style,
'--animation-entry-start': `${animationEntryStart}%`,
'--animation-entry-end': `${animationEntryEnd}%`,
'--animation-exit-start': `${animationExitStart}%`,
'--animation-exit-end': `${animationExitEnd}%`,
};
} else {
extraProps.style = {
...props.style,
'--animation-entry-start': `${animationEntryStart}%`,
'--animation-entry-end': `${animationEntryEnd}%`,
};
}
}
if (parallaxEnabled) {
extraProps['data-parallax'] = '1';
extraProps['data-parallax-strength'] = parallaxStrength;
extraProps.style = {
...props.style,
'--parallax-strength': `${parallaxStrength}px`,
};
}
return <BlockListBlock {...props} {...extraProps} />;
};
}, 'withListExtraProps')
);
/**

};
}
return <BlockListBlock {...props} {...extraProps} />;
};
}, 'withListExtraProps')
Expand Down Expand Up @@ -345,9 +402,9 @@ addFilter(
if (!SUPPORTED_BLOCKS.includes(props.name)) {
return <BlockListBlock {...props} />;
}
const { animationType = 'none' } = props.attributes;
const { animationType = 'none', parallaxEnabled = false } = props.attributes;

if (animationType === 'none') {
if (animationType === 'none' && !parallaxEnabled) {
return <BlockListBlock {...props} />;
}

Expand Down
Loading
Loading