+
+ );
+}
\ No newline at end of file
diff --git a/examples/example-block/src/editor.scss b/examples/example-block/src/editor.scss
new file mode 100644
index 000000000..1f14d4d14
--- /dev/null
+++ b/examples/example-block/src/editor.scss
@@ -0,0 +1,71 @@
+/**
+ * Editor styles for LSX Example Block
+ *
+ * The following styles get applied only inside the editor.
+ * They provide visual feedback to help users understand how the block will look.
+ *
+ * @since 1.0.0
+ */
+
+.wp-block-lsx-example-block {
+ border: 2px dashed #ddd;
+ padding: 1rem;
+ margin: 1rem 0;
+ position: relative;
+
+ &::before {
+ content: "LSX Example Block";
+ position: absolute;
+ top: -10px;
+ left: 1rem;
+ background: #fff;
+ padding: 0 0.5rem;
+ font-size: 0.75rem;
+ color: #666;
+ font-weight: 600;
+ }
+
+ // Alignment styles
+ &.has-text-align-left {
+ text-align: left;
+ }
+
+ &.has-text-align-center {
+ text-align: center;
+ }
+
+ &.has-text-align-right {
+ text-align: right;
+ }
+
+ // RichText component styling in editor
+ .rich-text {
+ min-height: 2rem;
+
+ &:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px #007cba;
+ }
+ }
+
+ // Placeholder styling
+ .components-placeholder {
+ border: 1px dashed #ccc;
+ padding: 2rem;
+ text-align: center;
+
+ .components-placeholder__label {
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ }
+ }
+}
+
+// Inspector controls customization
+.lsx-example-block-inspector {
+ .components-panel__body {
+ .components-base-control {
+ margin-bottom: 1rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/examples/example-block/src/index.js b/examples/example-block/src/index.js
new file mode 100644
index 000000000..e2dd34eb6
--- /dev/null
+++ b/examples/example-block/src/index.js
@@ -0,0 +1,22 @@
+/**
+ * Registers the LSX Example Block
+ *
+ * @since 1.0.0
+ */
+
+import { registerBlockType } from '@wordpress/blocks';
+import './editor.scss';
+import './style.scss';
+import Edit from './edit';
+import save from './save';
+import metadata from '../block.json';
+
+/**
+ * Register the LSX Example Block
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(metadata.name, {
+ edit: Edit,
+ save,
+});
\ No newline at end of file
diff --git a/examples/example-block/src/save.js b/examples/example-block/src/save.js
new file mode 100644
index 000000000..dac4d0e94
--- /dev/null
+++ b/examples/example-block/src/save.js
@@ -0,0 +1,39 @@
+/**
+ * Save component for LSX Example Block
+ *
+ * @since 1.0.0
+ */
+
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into post_content.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
+ *
+ * @param {Object} props Properties passed to the function.
+ * @param {Object} props.attributes Available block attributes.
+ * @return {Element} Element to render.
+ */
+export default function save({ attributes }) {
+ const { content, alignment, backgroundColor, textColor } = attributes;
+
+ const blockProps = useBlockProps.save({
+ className: `has-text-align-${alignment}`,
+ style: {
+ backgroundColor: backgroundColor,
+ color: textColor,
+ },
+ });
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/examples/example-block/src/style.scss b/examples/example-block/src/style.scss
new file mode 100644
index 000000000..b9d07a7e9
--- /dev/null
+++ b/examples/example-block/src/style.scss
@@ -0,0 +1,75 @@
+/**
+ * Frontend styles for LSX Example Block
+ *
+ * These styles are applied on both the frontend and in the editor.
+ * Use theme.json variables when possible for consistency.
+ *
+ * @since 1.0.0
+ */
+
+.wp-block-lsx-example-block {
+ padding: 1.5rem;
+ margin: 1rem 0;
+ border-radius: 0.25rem;
+ transition: all 0.3s ease;
+
+ // Default styling
+ background-color: var(--wp--preset--color--light-gray, #f8f9fa);
+ color: var(--wp--preset--color--dark-gray, #333);
+
+ // Typography
+ font-family: var(--wp--preset--font-family--system, inherit);
+ font-size: var(--wp--preset--font-size--medium, 1rem);
+ line-height: var(--wp--preset--line-height--normal, 1.6);
+
+ // Alignment styles
+ &.has-text-align-left {
+ text-align: left;
+ }
+
+ &.has-text-align-center {
+ text-align: center;
+ }
+
+ &.has-text-align-right {
+ text-align: right;
+ }
+
+ // Content paragraph styling
+ p {
+ margin: 0;
+ padding: 0;
+ }
+
+ // Responsive design
+ @media (max-width: 768px) {
+ padding: 1rem;
+ margin: 0.5rem 0;
+ }
+
+ // Hover effects for interactive elements
+ &:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ // Focus styles for accessibility
+ &:focus-within {
+ outline: 2px solid var(--wp--preset--color--primary, #007cba);
+ outline-offset: 2px;
+ }
+
+ // High contrast mode support
+ @media (prefers-contrast: high) {
+ border: 2px solid currentColor;
+ }
+
+ // Reduced motion support
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+
+ &:hover {
+ transform: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/examples/example-block/webpack.config.js b/examples/example-block/webpack.config.js
new file mode 100644
index 000000000..816deb265
--- /dev/null
+++ b/examples/example-block/webpack.config.js
@@ -0,0 +1,14 @@
+/**
+ * WordPress webpack configuration
+ *
+ * This file extends the default @wordpress/scripts webpack config
+ * following LightSpeed standards.
+ */
+
+const defaultConfig = require('@wordpress/scripts/config/webpack.config');
+
+module.exports = {
+ ...defaultConfig,
+ // Additional configuration can be added here if needed
+ // For most blocks, the default WordPress config is sufficient
+};
\ No newline at end of file
diff --git a/examples/patterns/hero-cta.php b/examples/patterns/hero-cta.php
new file mode 100644
index 000000000..c011a5f66
--- /dev/null
+++ b/examples/patterns/hero-cta.php
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/patterns/simple-cta.php b/examples/patterns/simple-cta.php
new file mode 100644
index 000000000..968361fb3
--- /dev/null
+++ b/examples/patterns/simple-cta.php
@@ -0,0 +1,40 @@
+
+
+
+