Skip to content

Commit f65eea9

Browse files
fellyphfellyph
authored
Merge pull request #8 from fellyph/adding-blueprint-parser
updating blueprints
2 parents 19dd20b + 15dc670 commit f65eea9

3 files changed

Lines changed: 247 additions & 9 deletions

File tree

‎generate_content.py‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
2+
content = r'''<!-- wp:paragraph -->
3+
<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>
4+
<!-- /wp:paragraph -->
5+
6+
<!-- wp:paragraph -->
7+
<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>
8+
<!-- /wp:paragraph -->
9+
10+
<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-scale-up"} -->
11+
<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>
12+
<!-- /wp:image -->
13+
14+
<!-- wp:paragraph -->
15+
<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>
16+
<!-- /wp:paragraph -->
17+
18+
<!-- wp:heading {"className":"scroll-anim-scale-up scroll-anim-block scroll-anim-fade-in"} -->
19+
<h2 class="wp-block-heading scroll-anim-scale-up scroll-anim-block scroll-anim-fade-in">Cities of Portugal</h2>
20+
<!-- /wp:heading -->
21+
22+
<!-- wp:paragraph -->
23+
<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>
24+
<!-- /wp:paragraph -->
25+
26+
<!-- wp:columns {"align":"wide"} -->
27+
<div class="wp-block-columns alignwide"><!-- wp:column -->
28+
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-right"} -->
29+
<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>
30+
<!-- /wp:image --></div>
31+
<!-- /wp:column -->
32+
33+
<!-- wp:column -->
34+
<div class="wp-block-column"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-up"} -->
35+
<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>
36+
<!-- /wp:image --></div>
37+
<!-- /wp:column -->
38+
39+
<!-- wp:column -->
40+
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-left"} -->
41+
<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>
42+
<!-- /wp:image --></div>
43+
<!-- /wp:column --></div>
44+
<!-- /wp:columns -->
45+
46+
<!-- wp:columns {"align":"wide"} -->
47+
<div class="wp-block-columns alignwide"><!-- wp:column -->
48+
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"scroll-anim-block scroll-anim-slide-in-right"} -->
49+
<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>
50+
<!-- /wp:image --></div>
51+
<!-- /wp:column -->
52+
53+
<!-- wp:column -->
54+
<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"} -->
55+
<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>
56+
<!-- /wp:image --></div>
57+
<!-- /wp:column --></div>
58+
<!-- /wp:columns -->
59+
60+
<!-- wp:paragraph -->
61+
<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>
62+
<!-- /wp:paragraph -->
63+
64+
<!-- wp:paragraph -->
65+
<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>
66+
<!-- /wp:paragraph -->'''
67+
68+
# Step 1: Escape ' to \' for PHP
69+
# We want the output to contain literal \' for every '
70+
php_content = content.replace("'", "\\'")
71+
72+
# Step 2: Flatten to single line
73+
php_content = php_content.replace("\n", "")
74+
75+
# Step 3: Escape " to \" for JSON
76+
json_content = php_content.replace('"', '\\"')
77+
78+
print(json_content)

‎src/index.js‎

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { addFilter } from '@wordpress/hooks';
22
import { __ } from '@wordpress/i18n';
33
import { createHigherOrderComponent } from '@wordpress/compose';
44
import { InspectorControls } from '@wordpress/block-editor';
5-
import { PanelBody, SelectControl, RangeControl } from '@wordpress/components';
5+
import { PanelBody, SelectControl, RangeControl, ToggleControl } from '@wordpress/components';
66
import { dispatch } from '@wordpress/data';
77

88
import './style.css';
@@ -32,10 +32,14 @@ const ANIMATION_OPTIONS = [
3232
{ label: __('Scale Up', 'my-scroll-block'), value: 'scale-up' },
3333
{ label: __('Rotate In', 'my-scroll-block'), value: 'rotate-in' },
3434
{ label: __('Blur In', 'my-scroll-block'), value: 'blur-in' },
35+
{ label: __('3D Rotate In', 'my-scroll-block'), value: 'rotate-3d-in' },
36+
{ label: __('Circle Reveal', 'my-scroll-block'), value: 'circle-reveal' },
37+
{ label: __('Curtain Reveal', 'my-scroll-block'), value: 'curtain-reveal' },
3538
{ label: __('🔄 Fade In & Out', 'my-scroll-block'), value: 'fade-in-out' },
3639
{ label: __('🔄 Slide Up In & Out', 'my-scroll-block'), value: 'slide-up-in-out' },
3740
{ label: __('🔄 Scale In & Out', 'my-scroll-block'), value: 'scale-in-out' },
3841
{ label: __('🔄 Rotate In & Out', 'my-scroll-block'), value: 'rotate-in-out' },
42+
{ label: __('🔄 3D Rotate In & Out', 'my-scroll-block'), value: 'rotate-3d-in-out' },
3943
];
4044

4145
const RANGE_OPTIONS = [
@@ -79,6 +83,14 @@ addFilter('blocks.registerBlockType', 'my-scroll-block/extend-attributes', (sett
7983
type: 'number',
8084
default: 100,
8185
},
86+
parallaxEnabled: {
87+
type: 'boolean',
88+
default: false,
89+
},
90+
parallaxStrength: {
91+
type: 'number',
92+
default: 50,
93+
},
8294
},
8395
};
8496
});
@@ -97,6 +109,8 @@ const withAnimationControls = createHigherOrderComponent((BlockEdit) => {
97109
animationEntryEnd = 100,
98110
animationExitStart = 0,
99111
animationExitEnd = 100,
112+
parallaxEnabled = false,
113+
parallaxStrength = 50,
100114
},
101115
setAttributes,
102116
} = props;
@@ -219,6 +233,26 @@ const withAnimationControls = createHigherOrderComponent((BlockEdit) => {
219233
)}
220234
</>
221235
)}
236+
237+
238+
<ToggleControl
239+
label={__('Enable Parallax Effect', 'my-scroll-block')}
240+
checked={parallaxEnabled}
241+
onChange={(value) => setAttributes({ parallaxEnabled: value })}
242+
help={__('Adds a parallax scrolling effect to the block background or content.', 'my-scroll-block')}
243+
/>
244+
245+
{parallaxEnabled && (
246+
<RangeControl
247+
label={__('Parallax Strength', 'my-scroll-block')}
248+
value={parallaxStrength}
249+
onChange={(value) => setAttributes({ parallaxStrength: value })}
250+
min={10}
251+
max={200}
252+
step={10}
253+
help={__('Higher values create more movement.', 'my-scroll-block')}
254+
/>
255+
)}
222256
</PanelBody>
223257
</InspectorControls>
224258
<BlockEdit {...props} />
@@ -244,9 +278,11 @@ addFilter(
244278
animationEntryEnd = 100,
245279
animationExitStart = 0,
246280
animationExitEnd = 100,
281+
parallaxEnabled = false,
282+
parallaxStrength = 50,
247283
} = attributes;
248284

249-
if (animationType === 'none') {
285+
if (animationType === 'none' && !parallaxEnabled) {
250286
return extraProps;
251287
}
252288

@@ -272,6 +308,15 @@ addFilter(
272308
}
273309
}
274310

311+
if (parallaxEnabled) {
312+
extraProps['data-parallax'] = '1';
313+
extraProps['data-parallax-strength'] = parallaxStrength;
314+
extraProps.style = {
315+
...extraProps.style,
316+
'--parallax-strength': `${parallaxStrength}px`,
317+
};
318+
}
319+
275320
return extraProps;
276321
}
277322
);
@@ -292,6 +337,8 @@ addFilter(
292337
animationEntryEnd = 100,
293338
animationExitStart = 0,
294339
animationExitEnd = 100,
340+
parallaxEnabled = false,
341+
parallaxStrength = 50,
295342
} = props.attributes;
296343

297344
const extraProps = {};
@@ -316,6 +363,16 @@ addFilter(
316363
}
317364
}
318365
}
366+
367+
368+
if (parallaxEnabled) {
369+
extraProps['data-parallax'] = '1';
370+
extraProps['data-parallax-strength'] = parallaxStrength;
371+
extraProps.style = {
372+
...props.style,
373+
'--parallax-strength': `${parallaxStrength}px`,
374+
};
375+
}
319376
return <BlockListBlock {...props} {...extraProps} />;
320377
};
321378
}, 'withListExtraProps')
@@ -345,9 +402,9 @@ addFilter(
345402
if (!SUPPORTED_BLOCKS.includes(props.name)) {
346403
return <BlockListBlock {...props} />;
347404
}
348-
const { animationType = 'none' } = props.attributes;
405+
const { animationType = 'none', parallaxEnabled = false } = props.attributes;
349406

350-
if (animationType === 'none') {
407+
if (animationType === 'none' && !parallaxEnabled) {
351408
return <BlockListBlock {...props} />;
352409
}
353410

0 commit comments

Comments
 (0)