\n", esc_html( $label ), esc_html( $value ) ); + $all_fields_text[] = $label . ': ' . $value; + } + + // Body: escape every value. {all_fields} is already escaped internally. + $body_tags = array_map( 'esc_html', $raw_values ); + $body_tags['{all_fields}'] = $all_fields_html; + + // Subject: do NOT escape. Strip newlines so a submitted value cannot + // smuggle in an extra mail header (PHPMailer would also catch this, but + // the intent belongs here rather than depending on a downstream library). + // The `%0a`/`%0d` literals mirror the header-injection strip at the top of + // this method: a value can arrive percent-encoded from a source that was + // not URL-decoded, and stripping both forms is cheaper than proving no + // such path exists. The trade-off — a subject legitimately containing the + // text "%0a" loses it — is negligible against a header-injection strip. + $newlines = array( "\r", "\n", '%0a', '%0d' ); + $subject_tags = array_map( + static function ( $value ) use ( $newlines ) { + return str_replace( $newlines, ' ', $value ); + }, + $raw_values + ); + $subject_tags['{all_fields}'] = str_replace( $newlines, ' ', implode( '; ', $all_fields_text ) ); + + // Default email body if empty. + if ( empty( $email_body ) ) { + $email_body = __( "New form submission:\n\n{all_fields}\n\nSubmitted from: {page_url}", 'airo-wp' ); + } else { + $email_body = sanitize_textarea_field( $email_body ); + } + + // Replace merge tags — each context with its own map (see above). + $email_subject = str_replace( array_keys( $subject_tags ), array_values( $subject_tags ), $email_subject ); + $email_body = str_replace( array_keys( $body_tags ), array_values( $body_tags ), $email_body ); + + // Convert line breaks to
for HTML email. + $email_body = nl2br( $email_body ); + + // Set up headers. + $headers = array( + 'Content-Type: text/html; charset=UTF-8', + sprintf( 'From: %s <%s>', $email_from_name, $email_from ), + ); + + // Add Reply-To if specified and field exists. + if ( ! empty( $email_reply_to ) && isset( $fields[ $email_reply_to ] ) ) { + // Flatten through the shared helper: a multi-value field yields an + // array, and handing that to str_replace()/sanitize_email() below is a + // PHP 8 TypeError (strlen() on an array) that would take down the whole + // notification. self::stringify_field_value() guarantees a string. + $reply_to_value = self::stringify_field_value( $fields[ $email_reply_to ] ); + + // Strip newlines to prevent email header injection. + $reply_to_value = str_replace( array( "\r", "\n", '%0a', '%0d' ), '', $reply_to_value ); + $reply_to_value = sanitize_email( $reply_to_value ); + + if ( is_email( $reply_to_value ) ) { + $headers[] = sprintf( 'Reply-To: %s', $reply_to_value ); + } + } + + // Send email. + $email_sent = wp_mail( $email_to, $email_subject, $email_body, $headers ); + + // Store email delivery status in submission meta. + update_post_meta( $submission_id, '_dsg_email_sent', $email_sent ? 'yes' : 'no' ); + update_post_meta( $submission_id, '_dsg_email_to', $email_to ); + update_post_meta( $submission_id, '_dsg_email_sent_date', current_time( 'mysql' ) ); + + // Log email delivery if enabled in settings. + $form_settings = $this->get_form_settings(); + $enable_email_logging = isset( $form_settings['enable_email_logging'] ) ? $form_settings['enable_email_logging'] : false; + + if ( $enable_email_logging ) { + error_log( // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log -- Intentional logging when enabled in settings. + sprintf( + 'airo-wp Form: Email %s for submission #%d (To: %s, Subject: %s)', + $email_sent ? 'sent successfully' : 'FAILED to send', + $submission_id, + $email_to, + $email_subject + ) + ); + } + + // Fire action hook for email monitoring/integration. + do_action( 'airowp_form_email_sent', $submission_id, $form_id, $email_sent, $email_to, $email_subject ); + } + + /** + * Clean up old form submissions based on retention settings. + * + * Called daily by cron job to delete submissions older than the configured retention period. + * Respects the retention_days setting (default: 30 days). + * + * Processes in batches to prevent timeout issues on sites with large numbers of submissions. + * Use 'airowp_cleanup_batch_size' filter to adjust batch size (default: 100). + * + * @since 1.2.0 + */ + public function cleanup_old_submissions() { + $form_settings = $this->get_form_settings(); + $retention_days = absint( $form_settings['retention_days'] ); + + // If retention is 0, keep submissions indefinitely (disable cleanup). + if ( 0 === $retention_days ) { + return; + } + + // Calculate cutoff date. + $cutoff_date = gmdate( 'Y-m-d H:i:s', strtotime( "-{$retention_days} days" ) ); + + // Batch size to prevent timeout (filterable). + $batch_size = apply_filters( 'airowp_cleanup_batch_size', 100 ); + + // Find old submissions (limited batch to prevent timeout). + $query = new WP_Query( + array( + 'post_type' => 'dsgo_form_submission', + 'post_status' => 'any', + 'date_query' => array( + array( + 'before' => $cutoff_date, + ), + ), + 'posts_per_page' => $batch_size, + 'fields' => 'ids', + 'no_found_rows' => true, + ) + ); + + $old_submissions = $query->posts; + + if ( empty( $old_submissions ) ) { + return; + } + + // Delete submissions and their metadata. + foreach ( $old_submissions as $submission_id ) { + wp_delete_post( $submission_id, true ); // Force delete (bypass trash). + } + + // Clear form submissions count cache. + delete_transient( 'dsgo_form_submissions_count' ); + + // Log cleanup for debugging. + if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) { + error_log( // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log -- Intentional debug logging. + sprintf( + 'airo-wp: Deleted %d form submissions older than %d days.', + count( $old_submissions ), + $retention_days + ) + ); + } + } + + /** + * Look up form block attributes from post content by form ID. + * + * Searches published posts for a form-builder block with the matching formId + * attribute. This ensures email configuration is read from the server-side + * block definition, not from client-submitted data. + * + * @param string $form_id Form identifier to look up. + * @return array|null Block attributes array, or null if not found. + */ + private function get_form_block_attributes( $form_id ) { + // Check transient cache first to avoid LIKE queries on every submission. + // v2 prefix invalidates older caches that were stored before block-type + // defaults were merged into parsed attributes. + $cache_key = 'airowp_form_attrs_v2_' . md5( $form_id ); + $cached = get_transient( $cache_key ); + + if ( false !== $cached ) { + return $cached; + } + + global $wpdb; + + // Note: esc_like() wraps the entire concatenated string including $form_id, + // so LIKE wildcards (%, _) in $form_id are escaped. prepare() handles SQL injection. + // LIMIT 5 accounts for edge cases like revisions or duplicate formIds. + // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter + $posts = $wpdb->get_results( + // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter + $wpdb->prepare( + // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter + "SELECT ID, post_content FROM {$wpdb->posts} + WHERE post_content LIKE %s + AND post_content LIKE %s + AND post_status IN ('publish', 'private') + LIMIT 5", + // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter + '%' . $wpdb->esc_like( 'airo-wp/form-builder' ) . '%', + // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter + '%' . $wpdb->esc_like( '"formId":"' . $form_id . '"' ) . '%' + ) + ); + + if ( empty( $posts ) ) { + return null; + } + + foreach ( $posts as $post ) { + $blocks = parse_blocks( $post->post_content ); + $attrs = $this->find_form_block_attributes( $blocks, $form_id ); + if ( null !== $attrs ) { + // Cache for 1 hour. Invalidated on save_post via clear_form_attributes_cache(). + set_transient( $cache_key, $attrs, HOUR_IN_SECONDS ); + return $attrs; + } + } + + return null; + } + + /** + * Recursively search parsed blocks for a form-builder block with matching formId. + * + * @param array $blocks Parsed blocks array. + * @param string $form_id Form identifier to match. + * @return array|null Block attributes if found, null otherwise. + */ + private function find_form_block_attributes( $blocks, $form_id ) { + foreach ( $blocks as $block ) { + if ( + 'airo-wp/form-builder' === $block['blockName'] && + isset( $block['attrs']['formId'] ) && + $block['attrs']['formId'] === $form_id + ) { + // parse_blocks() returns only the attributes that were serialized into + // the block comment. The editor omits attributes that equal their + // declared default, so booleans like `enableEmail` (default true) and + // similar may be missing here. Merge in the block-type defaults so + // server-side consumers see the same attribute set the editor does. + return $this->apply_form_block_defaults( $block['attrs'] ); + } + + if ( ! empty( $block['innerBlocks'] ) ) { + $result = $this->find_form_block_attributes( $block['innerBlocks'], $form_id ); + if ( null !== $result ) { + return $result; + } + } + } + + return null; + } + + /** + * Merge registered block-type attribute defaults into a parsed attributes array. + * + * @param array $attrs Parsed block attributes from parse_blocks(). + * @return array Attributes with block.json defaults filled in for missing keys. + */ + private function apply_form_block_defaults( $attrs ) { + if ( ! class_exists( '\WP_Block_Type_Registry' ) ) { + return $attrs; + } + + $block_type = \WP_Block_Type_Registry::get_instance()->get_registered( 'airo-wp/form-builder' ); + if ( ! $block_type || ! is_array( $block_type->attributes ) ) { + return $attrs; + } + + foreach ( $block_type->attributes as $key => $schema ) { + if ( array_key_exists( $key, $attrs ) ) { + continue; + } + if ( is_array( $schema ) && array_key_exists( 'default', $schema ) ) { + $attrs[ $key ] = $schema['default']; + } + } + + return $attrs; + } + + /** + * Look up server-defined field types for a form by form ID. + * + * Uses parsed block content so validation/sanitization does not rely on + * client-supplied field types. + * + * @param string $form_id Form identifier to look up. + * @return array
' . esc_html__( 'No form data available.', 'airo-wp' ) . '
'; + return; + } + + echo '| ' . esc_html__( 'Field Name', 'airo-wp' ) . ' | '; + echo '' . esc_html__( 'Value', 'airo-wp' ) . ' | '; + echo '' . esc_html__( 'Type', 'airo-wp' ) . ' | '; + echo '
|---|---|---|
| ' . esc_html( $field_name ) . ' | '; + echo '' . $value . ' | '; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + echo '' . esc_html( $type ) . ' | ';
+ echo '
';
+ echo '' . esc_html__( 'Form ID:', 'airo-wp' ) . '
'; + echo '
';
+
+ if ( $date ) {
+ echo ''; + echo '
' . esc_html( $form_id ) . '';
+ echo '';
+ echo '' . esc_html__( 'Submitted:', 'airo-wp' ) . '
'; + echo esc_html( wp_date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), strtotime( $date ) ) ); + echo '
';
+ }
+
+ // Email delivery status.
+ if ( '' !== $email_sent ) {
+ $is_sent = ( 'yes' === $email_sent );
+ $status_class = $is_sent ? 'airo-wp-submission-status--success' : 'airo-wp-submission-status--error';
+
+ printf( ''; + echo esc_html( wp_date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), strtotime( $date ) ) ); + echo '
', esc_attr( $status_class ) );
+ echo '' . esc_html__( 'Email Status:', 'airo-wp' ) . '
'; + if ( $is_sent ) { + echo '✓ ' . esc_html__( 'Sent Successfully', 'airo-wp' ) . ''; + if ( $email_to ) { + echo '
' . esc_html__( 'To:', 'airo-wp' ) . ' ' . esc_html( $email_to ) . ''; + } + if ( $email_sent_date ) { + echo '
' . esc_html__( 'Sent:', 'airo-wp' ) . ' ' . esc_html( wp_date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), $email_sent_date ) ) . ''; + } + } else { + echo '✗ ' . esc_html__( 'Failed to Send', 'airo-wp' ) . ''; + if ( $email_to ) { + echo '
' . esc_html__( 'Attempted to:', 'airo-wp' ) . ' ' . esc_html( $email_to ) . ''; + } + } + echo '
';
+ }
+
+ if ( $ip_address ) {
+ echo ''; + if ( $is_sent ) { + echo '✓ ' . esc_html__( 'Sent Successfully', 'airo-wp' ) . ''; + if ( $email_to ) { + echo '
' . esc_html__( 'To:', 'airo-wp' ) . ' ' . esc_html( $email_to ) . ''; + } + if ( $email_sent_date ) { + echo '
' . esc_html__( 'Sent:', 'airo-wp' ) . ' ' . esc_html( wp_date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), $email_sent_date ) ) . ''; + } + } else { + echo '✗ ' . esc_html__( 'Failed to Send', 'airo-wp' ) . ''; + if ( $email_to ) { + echo '
' . esc_html__( 'Attempted to:', 'airo-wp' ) . ' ' . esc_html( $email_to ) . ''; + } + } + echo '
';
+ echo '' . esc_html__( 'IP Address:', 'airo-wp' ) . '
'; + echo '
';
+ }
+
+ if ( $referer ) {
+ echo ''; + echo '
' . esc_html( $ip_address ) . '';
+ echo '';
+ echo '' . esc_html__( 'Referrer:', 'airo-wp' ) . '
'; + echo '' . esc_html( $referer ) . ''; + echo '
';
+ }
+
+ if ( $user_agent ) {
+ echo ''; + echo '' . esc_html( $referer ) . ''; + echo '
';
+ echo '' . esc_html__( 'User Agent:', 'airo-wp' ) . '
'; + echo '
';
+ }
+ }
+
+ /**
+ * Customize admin columns.
+ *
+ * @param array $columns Existing columns.
+ * @return array Modified columns.
+ */
+ public function custom_columns( $columns ) {
+ $new_columns = array(
+ 'cb' => $columns['cb'],
+ 'title' => __( 'Submission', 'airo-wp' ),
+ 'form_id' => __( 'Form ID', 'airo-wp' ),
+ 'email_status' => __( 'Email', 'airo-wp' ),
+ 'ip_address' => __( 'IP Address', 'airo-wp' ),
+ 'date' => __( 'Date', 'airo-wp' ),
+ );
+
+ return $new_columns;
+ }
+
+ /**
+ * Render custom column content.
+ *
+ * @param string $column Column name.
+ * @param int $post_id Post ID.
+ */
+ public function custom_column_content( $column, $post_id ) {
+ switch ( $column ) {
+ case 'form_id':
+ $form_id = get_post_meta( $post_id, '_dsg_form_id', true );
+ echo $form_id ? ''; + echo '
' . esc_html( $user_agent ) . '';
+ echo '' . esc_html( $form_id ) . '' : '—';
+ break;
+
+ case 'email_status':
+ $email_sent = get_post_meta( $post_id, '_dsg_email_sent', true );
+ if ( '' === $email_sent ) {
+ echo '—';
+ } elseif ( 'yes' === $email_sent ) {
+ echo '✓ ' . esc_html__( 'Sent', 'airo-wp' ) . '';
+ } else {
+ echo '✗ ' . esc_html__( 'Failed', 'airo-wp' ) . '';
+ }
+ break;
+
+ case 'ip_address':
+ $ip_address = get_post_meta( $post_id, '_dsg_submission_ip', true );
+ echo $ip_address ? '' . esc_html( $ip_address ) . '' : '—';
+ break;
+ }
+ }
+
+ /**
+ * Enqueue admin styles for the submission meta box.
+ *
+ * @param string $hook Current admin page hook suffix.
+ */
+ public function enqueue_submission_styles( string $hook ) : void {
+ if ( 'post.php' !== $hook && 'post-new.php' !== $hook ) {
+ return;
+ }
+ wp_register_style( 'airowp-submissions', false, array(), AIRO_WP_VERSION ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
+ wp_enqueue_style( 'airowp-submissions' );
+ wp_add_inline_style( 'airowp-submissions', '.airo-wp-submission-status{margin-bottom:1em;padding:10px;border-left:3px solid}.airo-wp-submission-status--success{background:#d4edda;border-color:#28a745}.airo-wp-submission-status--success .airo-wp-submission-status__label{color:#155724}.airo-wp-submission-status--error{background:#f8d7da;border-color:#dc3545}.airo-wp-submission-status--error .airo-wp-submission-status__label{color:#721c24}' );
+ }
+}
diff --git a/includes/Blocks/Common/Modal/ModalHooks.php b/includes/Blocks/Common/Modal/ModalHooks.php
new file mode 100644
index 0000000..95e2e60
--- /dev/null
+++ b/includes/Blocks/Common/Modal/ModalHooks.php
@@ -0,0 +1,327 @@
+sanitize_attributes( $attributes );
+
+ /**
+ * Filter modal CSS classes.
+ *
+ * @param array $classes Array of CSS classes.
+ * @param array $attributes Modal block attributes.
+ * @param array $block Complete block data.
+ * @return array Modified classes.
+ */
+ $classes = apply_filters(
+ 'airowp_modal_classes',
+ array( 'airo-wp-modal' ),
+ $attributes,
+ $block
+ );
+
+ // Sanitize classes after filtering.
+ $classes = array_map( 'sanitize_html_class', array_filter( $classes ) );
+
+ /**
+ * Filter modal data attributes.
+ *
+ * These attributes are read by the JavaScript modal controller.
+ *
+ * @param array $data_attrs Associative array of data attributes.
+ * @param array $attributes Modal block attributes.
+ * @param array $block Complete block data.
+ * @return array Modified data attributes.
+ */
+ $data_attrs = apply_filters(
+ 'airowp_modal_data_attributes',
+ $this->get_default_data_attributes( $attributes ),
+ $attributes,
+ $block
+ );
+
+ // Sanitize data attributes after filtering.
+ $data_attrs = $this->sanitize_data_attributes( $data_attrs );
+
+ /**
+ * Action fired before modal block renders.
+ *
+ * @param array $attributes Modal block attributes.
+ * @param array $block Complete block data.
+ */
+ do_action( 'airowp_modal_before_render', $attributes, $block );
+
+ /**
+ * Filter complete modal block content.
+ *
+ * This is the final filter before output. Use this for major structural changes.
+ *
+ * @param string $block_content Current block HTML.
+ * @param array $attributes Modal block attributes.
+ * @param array $block Complete block data.
+ * @param array $classes Filtered CSS classes.
+ * @param array $data_attrs Filtered data attributes.
+ * @return string Modified block content.
+ */
+ $block_content = apply_filters(
+ 'airowp_modal_content',
+ $block_content,
+ $attributes,
+ $block,
+ $classes,
+ $data_attrs
+ );
+
+ /**
+ * Action fired after modal block renders.
+ *
+ * @param string $block_content Rendered block HTML.
+ * @param array $attributes Modal block attributes.
+ * @param array $block Complete block data.
+ */
+ do_action( 'airowp_modal_after_render', $block_content, $attributes, $block );
+
+ return $block_content;
+ }
+
+ /**
+ * Get default data attributes from modal attributes.
+ *
+ * @param array $attributes Modal block attributes.
+ * @return array Data attributes array.
+ */
+ private function get_default_data_attributes( $attributes ) {
+ $data_attrs = array();
+
+ // Map modal attributes to data attributes.
+ $attr_map = array(
+ 'modalId' => 'modal-id',
+ 'animationType' => 'animation-type',
+ 'animationDuration' => 'animation-duration',
+ 'closeOnBackdrop' => 'close-on-backdrop',
+ 'closeOnEsc' => 'close-on-esc',
+ 'disableBodyScroll' => 'disable-body-scroll',
+ 'allowHashTrigger' => 'allow-hash-trigger',
+ 'updateUrlOnOpen' => 'update-url-on-open',
+ 'autoTriggerType' => 'auto-trigger-type',
+ 'autoTriggerDelay' => 'auto-trigger-delay',
+ 'autoTriggerFrequency' => 'auto-trigger-frequency',
+ 'cookieDuration' => 'cookie-duration',
+ 'exitIntentSensitivity' => 'exit-intent-sensitivity',
+ 'exitIntentMinTime' => 'exit-intent-min-time',
+ 'exitIntentExcludeMobile' => 'exit-intent-exclude-mobile',
+ 'scrollDepth' => 'scroll-depth',
+ 'scrollDirection' => 'scroll-direction',
+ 'timeOnPage' => 'time-on-page',
+ 'galleryGroupId' => 'gallery-group-id',
+ 'galleryIndex' => 'gallery-index',
+ 'showGalleryNavigation' => 'show-gallery-navigation',
+ 'navigationStyle' => 'navigation-style',
+ 'navigationPosition' => 'navigation-position',
+ );
+
+ foreach ( $attr_map as $attr_key => $data_key ) {
+ if ( isset( $attributes[ $attr_key ] ) ) {
+ $value = $attributes[ $attr_key ];
+
+ // Convert booleans to strings.
+ if ( is_bool( $value ) ) {
+ $value = $value ? 'true' : 'false';
+ }
+
+ $data_attrs[ $data_key ] = $value;
+ }
+ }
+
+ return $data_attrs;
+ }
+
+ /**
+ * Sanitize modal attributes.
+ *
+ * @param array $attributes Attributes to sanitize.
+ * @return array Sanitized attributes.
+ */
+ private function sanitize_attributes( $attributes ) {
+ $sanitized = array();
+
+ // Define expected attribute types and validation.
+ $validators = array(
+ 'modalId' => 'sanitize_key',
+ 'width' => 'sanitize_text_field',
+ 'maxWidth' => 'sanitize_text_field',
+ 'height' => 'sanitize_text_field',
+ 'maxHeight' => 'sanitize_text_field',
+ 'animationType' => array( $this, 'validate_enum' ),
+ 'animationDuration' => 'absint',
+ 'overlayOpacity' => 'absint',
+ 'overlayColor' => 'sanitize_hex_color',
+ 'overlayBlur' => 'absint',
+ 'closeOnBackdrop' => 'rest_sanitize_boolean',
+ 'closeOnEsc' => 'rest_sanitize_boolean',
+ 'showCloseButton' => 'rest_sanitize_boolean',
+ 'closeButtonPosition' => array( $this, 'validate_enum' ),
+ 'closeButtonSize' => 'absint',
+ 'closeButtonIconColor' => 'sanitize_text_field',
+ 'closeButtonBgColor' => 'sanitize_text_field',
+ 'disableBodyScroll' => 'rest_sanitize_boolean',
+ 'allowHashTrigger' => 'rest_sanitize_boolean',
+ 'updateUrlOnOpen' => 'rest_sanitize_boolean',
+ 'autoTriggerType' => array( $this, 'validate_enum' ),
+ 'autoTriggerDelay' => 'absint',
+ 'autoTriggerFrequency' => array( $this, 'validate_enum' ),
+ 'cookieDuration' => 'absint',
+ 'exitIntentSensitivity' => array( $this, 'validate_enum' ),
+ 'exitIntentMinTime' => 'absint',
+ 'exitIntentExcludeMobile' => 'rest_sanitize_boolean',
+ 'scrollDepth' => 'absint',
+ 'scrollDirection' => array( $this, 'validate_enum' ),
+ 'timeOnPage' => 'absint',
+ 'galleryGroupId' => 'sanitize_key',
+ 'galleryIndex' => 'absint',
+ 'showGalleryNavigation' => 'rest_sanitize_boolean',
+ 'navigationStyle' => array( $this, 'validate_enum' ),
+ 'navigationPosition' => array( $this, 'validate_enum' ),
+ );
+
+ foreach ( $attributes as $key => $value ) {
+ if ( isset( $validators[ $key ] ) ) {
+ $sanitized[ $key ] = call_user_func( $validators[ $key ], $value, $key );
+ } else {
+ // If no validator defined for attribute, sanitize as text.
+ $sanitized[ $key ] = sanitize_text_field( $value );
+ }
+ }
+
+ return $sanitized;
+ }
+
+ /**
+ * Validate enum values.
+ *
+ * @param mixed $value Value to validate.
+ * @param string $key Attribute key.
+ * @return mixed Validated value or default.
+ */
+ private function validate_enum( $value, $key ) {
+ // Define valid enum values for each attribute.
+ $enums = array(
+ 'animationType' => array( 'fade', 'slide-up', 'slide-down', 'zoom', 'none' ),
+ 'closeButtonPosition' => array( 'inside-top-right', 'inside-top-left', 'top-right', 'top-left' ),
+ 'autoTriggerType' => array( 'none', 'pageLoad', 'exitIntent', 'scroll', 'time' ),
+ 'autoTriggerFrequency' => array( 'always', 'session', 'once' ),
+ 'exitIntentSensitivity' => array( 'low', 'medium', 'high' ),
+ 'scrollDirection' => array( 'down', 'both' ),
+ 'navigationStyle' => array( 'arrows', 'chevrons', 'text' ),
+ 'navigationPosition' => array( 'sides', 'bottom', 'top' ),
+ );
+
+ if ( isset( $enums[ $key ] ) && in_array( $value, $enums[ $key ], true ) ) {
+ return $value;
+ }
+
+ // Return first valid value as default if invalid value provided.
+ return isset( $enums[ $key ] ) ? $enums[ $key ][0] : sanitize_text_field( $value );
+ }
+
+ /**
+ * Sanitize data attributes.
+ *
+ * @param array $data_attrs Data attributes to sanitize.
+ * @return array Sanitized data attributes.
+ */
+ private function sanitize_data_attributes( $data_attrs ) {
+ $sanitized = array();
+
+ foreach ( $data_attrs as $key => $value ) {
+ // Sanitize key.
+ $clean_key = sanitize_key( $key );
+
+ // Sanitize value - escape for HTML attribute context.
+ if ( is_numeric( $value ) ) {
+ $clean_value = (string) $value;
+ } elseif ( is_string( $value ) ) {
+ $clean_value = esc_attr( $value );
+ } else {
+ // Convert other types to string and escape.
+ $clean_value = esc_attr( (string) $value );
+ }
+
+ $sanitized[ $clean_key ] = $clean_value;
+ }
+
+ return $sanitized;
+ }
+
+ /**
+ * Add custom scripts to footer for modal integrations.
+ *
+ * Developers can use this action to inject custom JavaScript for modal events.
+ */
+ public function modal_footer_scripts() {
+ /**
+ * Action fired in footer for custom modal scripts.
+ *
+ * Use this to add custom JavaScript that interacts with the modal API.
+ *
+ * Example:
+ * ```php
+ * add_action('airowp_modal_footer_scripts', function() {
+ * ?>
+ *
+ * \WP_REST_Server::CREATABLE,
+ 'callback' => array( $this, 'handle_render' ),
+ 'permission_callback' => array( $this, 'check_permission' ),
+ 'args' => array(
+ 'queryId' => array(
+ 'type' => 'string',
+ 'required' => true,
+ 'sanitize_callback' => 'sanitize_key',
+ ),
+
+ // NOTE: `attributes` and `params` are nested objects; WP only enforces the
+ // top-level type. The shared render helper (airowp_query_render) is
+ // responsible for per-field sanitization of every value before it reaches
+ // WP_Query args or HTML output. Do NOT assume these arrive sanitized.
+ 'attributes' => array(
+ 'type' => 'object',
+ 'required' => true,
+ ),
+ 'page' => array(
+ 'type' => 'integer',
+ 'default' => 1,
+ 'sanitize_callback' => 'absint',
+ ),
+ 'innerBlocks' => array(
+ 'type' => 'string',
+ 'default' => '',
+ ),
+ 'params' => array(
+ 'type' => 'object',
+ 'default' => array(),
+ ),
+ 'currentUrl' => array(
+ 'type' => 'string',
+ 'default' => '',
+ 'sanitize_callback' => 'esc_url_raw',
+ ),
+ ),
+ )
+ );
+
+ register_rest_route(
+ self::REST_NAMESPACE,
+ '/query/filter-register',
+ array(
+ 'methods' => \WP_REST_Server::CREATABLE,
+ 'callback' => array( $this, 'handle_filter_register' ),
+ 'permission_callback' => array( $this, 'check_manage_options_permission' ),
+ 'args' => array(
+ 'filter_key' => array(
+ 'type' => 'string',
+ 'required' => true,
+ 'sanitize_callback' => 'sanitize_key',
+ ),
+ 'config' => array(
+ 'type' => 'object',
+ 'required' => true,
+ ),
+ ),
+ )
+ );
+
+ // Admin-only routes (manage_options).
+
+ register_rest_route(
+ self::REST_NAMESPACE,
+ '/query/filter-status',
+ array(
+ 'methods' => \WP_REST_Server::READABLE,
+ 'callback' => array( $this, 'handle_filter_status' ),
+ 'permission_callback' => array( $this, 'check_manage_options_permission' ),
+ )
+ );
+
+ register_rest_route(
+ self::REST_NAMESPACE,
+ '/query/filter-rebuild',
+ array(
+ 'methods' => \WP_REST_Server::CREATABLE,
+ 'callback' => array( $this, 'handle_filter_rebuild' ),
+ 'permission_callback' => array( $this, 'check_manage_options_permission' ),
+ )
+ );
+
+ register_rest_route(
+ self::REST_NAMESPACE,
+ '/query/preview',
+ array(
+ 'methods' => \WP_REST_Server::READABLE,
+ 'callback' => array( $this, 'handle_preview' ),
+ 'permission_callback' => array( $this, 'check_edit_posts_permission' ),
+ 'args' => array(
+ 'attributes' => array(
+ 'type' => 'object',
+ 'required' => true,
+ ),
+ ),
+ )
+ );
+
+ register_rest_route(
+ self::REST_NAMESPACE,
+ '/query/filters',
+ array(
+ array(
+ 'methods' => \WP_REST_Server::READABLE,
+ 'callback' => array( $this, 'handle_filters_list' ),
+ 'permission_callback' => array( $this, 'check_manage_options_permission' ),
+ ),
+ array(
+ 'methods' => \WP_REST_Server::DELETABLE,
+ 'callback' => array( $this, 'handle_filter_unregister' ),
+ 'permission_callback' => array( $this, 'check_manage_options_permission' ),
+ 'args' => array(
+ 'filter_key' => array(
+ 'type' => 'string',
+ 'required' => true,
+ 'sanitize_callback' => 'sanitize_key',
+ ),
+ ),
+ ),
+ )
+ );
+ }
+
+ /**
+ * Checks that the request carries a valid nonce and the user has manage_options.
+ *
+ * Used by every admin-only filter route: /filter-register, /filter-status,
+ * /filter-rebuild, /filters (list), /filters/{key} (delete). Editor-level
+ * users go through check_edit_posts_permission instead (used only by the
+ * /query/preview route).
+ *
+ * @param \WP_REST_Request $request The REST request.
+ * @return true|\WP_Error
+ */
+ public function check_manage_options_permission( \WP_REST_Request $request ) {
+ if ( ! is_user_logged_in() ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'You must be logged in.', 'airo-wp' ),
+ array( 'status' => 401 )
+ );
+ }
+
+ $nonce = $request->get_header( 'X-WP-Nonce' );
+ if ( ! $nonce || ! wp_verify_nonce( $nonce, 'wp_rest' ) ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'Invalid nonce.', 'airo-wp' ),
+ array( 'status' => 401 )
+ );
+ }
+
+ if ( ! current_user_can( 'manage_options' ) ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'Insufficient permissions.', 'airo-wp' ),
+ array( 'status' => 403 )
+ );
+ }
+
+ return true;
+ }
+
+ /**
+ * Handles the preview REST request.
+ *
+ * For `source === 'posts'` this returns a WP_Error (client uses useEntityRecords).
+ * For `source === 'users'` runs WP_User_Query limited to perPage results.
+ * For `source === 'terms'` runs get_terms() limited to perPage results.
+ *
+ * @param \WP_REST_Request $request The REST request.
+ * @return \WP_REST_Response|\WP_Error
+ */
+ public function handle_preview( \WP_REST_Request $request ) {
+ $attributes = (array) $request->get_param( 'attributes' );
+ $source = isset( $attributes['source'] ) ? sanitize_key( $attributes['source'] ) : 'posts';
+ $per_page = isset( $attributes['perPage'] ) ? max( 1, min( 100, (int) $attributes['perPage'] ) ) : 6;
+
+ if ( 'posts' === $source ) {
+ return new \WP_Error(
+ 'not_needed',
+ __( 'Use useEntityRecords for posts source preview.', 'airo-wp' ),
+ array( 'status' => 400 )
+ );
+ }
+
+ if ( 'users' === $source ) {
+ $user_query = new \WP_User_Query(
+ array(
+ 'number' => $per_page,
+ 'orderby' => 'registered',
+ 'order' => 'DESC',
+ 'fields' => array( 'ID', 'display_name' ),
+ )
+ );
+ $items = array();
+ foreach ( $user_query->get_results() as $user ) {
+ $items[] = array(
+ 'id' => (int) $user->ID,
+ 'name' => (string) $user->display_name,
+ 'type' => 'user',
+ );
+ }
+ return rest_ensure_response( $items );
+ }
+
+ if ( 'terms' === $source ) {
+ $taxonomy = isset( $attributes['taxonomy'] )
+ ? sanitize_key( $attributes['taxonomy'] )
+ : 'category';
+ $terms = get_terms(
+ array(
+ 'taxonomy' => $taxonomy,
+ 'number' => $per_page,
+ 'hide_empty' => false,
+ 'fields' => 'id=>name',
+ )
+ );
+
+ if ( is_wp_error( $terms ) || ! is_array( $terms ) ) {
+ return rest_ensure_response( array() );
+ }
+
+ $items = array();
+ foreach ( $terms as $term_id => $term_name ) {
+ $items[] = array(
+ 'id' => (int) $term_id,
+ 'name' => (string) $term_name,
+ 'type' => 'term',
+ );
+ }
+ return rest_ensure_response( $items );
+ }
+
+ return rest_ensure_response( array() );
+ }
+
+ /**
+ * Returns the current filter index status.
+ *
+ * @return \WP_REST_Response
+ */
+ public function handle_filter_status() {
+ return rest_ensure_response( FilterIndexRebuilder::status() );
+ }
+
+ /**
+ * Runs a full filter index rebuild synchronously and returns the result.
+ *
+ * Note: on large sites this may approach PHP's max_execution_time.
+ * For v2.2 the synchronous model is acceptable; the dashboard polls
+ * /filter-status every 2 s so even a timeout is handled gracefully.
+ *
+ * @return \WP_REST_Response
+ */
+ public function handle_filter_rebuild() {
+ return rest_ensure_response( FilterIndexRebuilder::rebuild_all() );
+ }
+
+ /**
+ * Returns all registered filters.
+ *
+ * @return \WP_REST_Response
+ */
+ public function handle_filters_list() {
+ return rest_ensure_response( FilterRegistry::all() );
+ }
+
+ /**
+ * Unregisters a filter by key.
+ *
+ * @param \WP_REST_Request $request The REST request.
+ * @return \WP_REST_Response|\WP_Error
+ */
+ public function handle_filter_unregister( \WP_REST_Request $request ) {
+ $key = $request->get_param( 'filter_key' );
+
+ if ( empty( $key ) ) {
+ return new \WP_Error(
+ 'airowp_filter_unregister_invalid',
+ __( 'filter_key is required.', 'airo-wp' ),
+ array( 'status' => 400 )
+ );
+ }
+
+ if ( null === FilterRegistry::get( $key ) ) {
+ return new \WP_Error(
+ 'airowp_filter_not_found',
+ __( 'Filter not found.', 'airo-wp' ),
+ array( 'status' => 404 )
+ );
+ }
+
+ FilterRegistry::unregister( $key );
+
+ return rest_ensure_response(
+ array(
+ 'unregistered' => true,
+ 'filter_key' => $key,
+ )
+ );
+ }
+
+ /**
+ * Checks that the request carries a valid nonce and the user can edit posts.
+ *
+ * Used by the /query/preview route — any editor-level user may use the live
+ * preview endpoint; only admins may mutate the filter registry (see
+ * check_manage_options_permission).
+ *
+ * @param \WP_REST_Request $request The REST request.
+ * @return true|\WP_Error
+ */
+ public function check_edit_posts_permission( \WP_REST_Request $request ) {
+ if ( ! is_user_logged_in() ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'You must be logged in.', 'airo-wp' ),
+ array( 'status' => 401 )
+ );
+ }
+
+ $nonce = $request->get_header( 'X-WP-Nonce' );
+ if ( ! $nonce || ! wp_verify_nonce( $nonce, 'wp_rest' ) ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'Invalid nonce.', 'airo-wp' ),
+ array( 'status' => 401 )
+ );
+ }
+
+ if ( ! current_user_can( 'edit_posts' ) ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'Insufficient permissions.', 'airo-wp' ),
+ array( 'status' => 403 )
+ );
+ }
+
+ return true;
+ }
+
+ /**
+ * Handles the filter-register REST request.
+ *
+ * Stores the filter configuration in FilterRegistry so the PHP filter index
+ * knows how to resolve values for this filter key.
+ *
+ * @param \WP_REST_Request $request The REST request.
+ * @return \WP_REST_Response|\WP_Error
+ */
+ public function handle_filter_register( \WP_REST_Request $request ) {
+ $key = $request->get_param( 'filter_key' );
+ $config = (array) $request->get_param( 'config' );
+
+ if ( empty( $key ) || empty( $config['type'] ) || empty( $config['source'] ) ) {
+ return new \WP_Error(
+ 'airowp_filter_register_invalid',
+ __( 'filter_key, type, and source are required.', 'airo-wp' ),
+ array( 'status' => 400 )
+ );
+ }
+
+ $type = (string) $config['type'];
+ if ( ! in_array( $type, array( 'taxonomy', 'meta' ), true ) ) {
+ return new \WP_Error(
+ 'airowp_filter_invalid_type',
+ __( 'config.type must be "taxonomy" or "meta".', 'airo-wp' ),
+ array( 'status' => 400 )
+ );
+ }
+
+ FilterRegistry::register( $key, $config );
+
+ return rest_ensure_response(
+ array(
+ 'registered' => true,
+ 'filter_key' => sanitize_key( $key ),
+ 'config' => FilterRegistry::get( $key ),
+ )
+ );
+ }
+
+ /**
+ * Checks that the request is authenticated and carries a valid nonce.
+ *
+ * @param \WP_REST_Request $request The REST request.
+ * @return true|\WP_Error
+ */
+ public function check_permission( \WP_REST_Request $request ) {
+ if ( ! is_user_logged_in() ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'You must be logged in.', 'airo-wp' ),
+ array( 'status' => 401 )
+ );
+ }
+
+ $nonce = $request->get_header( 'X-WP-Nonce' );
+ if ( ! $nonce || ! wp_verify_nonce( $nonce, 'wp_rest' ) ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'Invalid nonce.', 'airo-wp' ),
+ array( 'status' => 401 )
+ );
+ }
+
+ if ( ! current_user_can( 'read' ) ) {
+ return new \WP_Error(
+ 'rest_forbidden',
+ __( 'Insufficient permissions.', 'airo-wp' ),
+ array( 'status' => 403 )
+ );
+ }
+
+ return true;
+ }
+
+ /**
+ * Handles the render REST request and returns HTML + pagination metadata.
+ *
+ * @param \WP_REST_Request $request The REST request.
+ * @return \WP_REST_Response
+ */
+ public function handle_render( \WP_REST_Request $request ) {
+ $query_id = $request->get_param( 'queryId' );
+ $attributes = (array) $request->get_param( 'attributes' );
+ $page = max( 1, (int) $request->get_param( 'page' ) );
+ $inner_html = (string) $request->get_param( 'innerBlocks' );
+ $params = (array) $request->get_param( 'params' );
+ $current_url = (string) $request->get_param( 'currentUrl' );
+
+ // Sibling filter blocks (search / sort / checkbox / select / active /
+ // reset) read filter state from $_GET and the current page URL
+ // (`add_query_arg(array())`) so the no-JS fallback can build chip/
+ // reset links that navigate back to the page. On the REST refresh
+ // path, $_GET is empty and REQUEST_URI points at the REST endpoint,
+ // so we overlay both for the duration of the render and restore
+ // afterwards to avoid leaking state into later request-scoped code.
+ $original_get = $_GET; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+ // Snapshot REQUEST_URI raw — sanitize_text_field() mangles URL encoding
+ // (eats `+`, collapses whitespace) and this value is only ever restored
+ // to the superglobal, never echoed or used in HTML.
+ $original_uri = isset( $_SERVER['REQUEST_URI'] ) ? wp_unslash( $_SERVER['REQUEST_URI'] ) : ''; // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- restore-only, see comment above.
+ $allowed_keys = apply_filters( 'airowp_query_url_params', array( 'q', 'sort' ) );
+ foreach ( $params as $key => $value ) {
+ $key = (string) $key;
+ if ( in_array( $key, $allowed_keys, true ) || 0 === strpos( $key, 'filter_' ) ) {
+ // REST-supplied values are sanitized downstream before use in
+ // WP_Query / SQL / HTML, but nested block renders may pass
+ // through filter hooks or third-party code that reads $_GET
+ // directly — sanitize at the overlay boundary too.
+ if ( is_array( $value ) ) {
+ $_GET[ $key ] = array_map( 'sanitize_text_field', wp_unslash( (array) $value ) );
+ } else {
+ $_GET[ $key ] = sanitize_text_field( wp_unslash( (string) $value ) );
+ }
+ }
+ }
+ if ( '' !== $current_url ) {
+ $parsed = wp_parse_url( $current_url );
+ if ( is_array( $parsed ) && isset( $parsed['path'] ) ) {
+ $_SERVER['REQUEST_URI'] = $parsed['path']
+ . ( isset( $parsed['query'] ) ? '?' . $parsed['query'] : '' );
+ }
+ }
+
+ try {
+ $result = self::render(
+ $attributes,
+ array(
+ 'query_id' => $query_id,
+ 'page' => $page,
+ 'inner_html' => $inner_html,
+ 'params' => $params,
+ )
+ );
+ } finally {
+ $_GET = $original_get; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+ $_SERVER['REQUEST_URI'] = $original_uri;
+ }
+
+ return rest_ensure_response( $result );
+ }
+
+ /**
+ * Shared render entrypoint used by both REST and first-paint render.php.
+ *
+ * Delegates to airowp_query_render_region() so the REST response
+ * contains the full region (list + sibling blocks wrapped in
+ * .airo-wp-query-region) — identical to the first-paint output. The JS
+ * refresh handler swaps the outer region's innerHTML in one operation,
+ * updating pagination + no-results + chips together with the list.
+ *
+ * @param array $attributes Block attributes.
+ * @param array $context Keys: query_id, page, inner_html (full serialized
+ * innerBlocks including siblings), params.
+ * @return array { html: string, totalPages: int, totalItems: int }
+ */
+ public static function render( array $attributes, array $context ) {
+ $helpers = AIRO_WP_PLUGIN_DIR . 'build/blocks/query/render-helpers.php';
+ if ( file_exists( $helpers ) ) {
+ require_once $helpers; // phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.UsingVariable -- build artifact; path resolved from plugin directory
+ if ( function_exists( 'airowp_query_render_region' ) ) {
+ return airowp_query_render_region( $attributes, $context );
+ }
+ // Fallback to bare render (no region wrapper) for environments where
+ // the build artefact predates the region helper (e.g. older build cache).
+ if ( function_exists( 'airowp_query_render' ) ) {
+ return airowp_query_render( $attributes, $context );
+ }
+ }
+ return array(
+ 'html' => '',
+ 'totalPages' => 0,
+ 'totalItems' => 0,
+ );
+ }
+}
diff --git a/includes/Blocks/Common/Query/FilterIndex.php b/includes/Blocks/Common/Query/FilterIndex.php
new file mode 100644
index 0000000..d8c315b
--- /dev/null
+++ b/includes/Blocks/Common/Query/FilterIndex.php
@@ -0,0 +1,517 @@
+prefix}airowp_query_filter_index custom table.
+ *
+ * @package airo-wp
+ * @since 2.2.0
+ */
+
+declare(strict_types=1);
+
+namespace GoDaddy\WordPress\Plugins\AiroWp\Blocks\Common\Query;
+
+defined( 'ABSPATH' ) || exit;
+/**
+ * Manages the airowp_query_filter_index database table.
+ */
+class FilterIndex {
+
+ /**
+ * Current schema version.
+ *
+ * Increment when columns or indexes change and add migration logic in
+ * install() before updating the stored option.
+ *
+ * v2 (2026-04-19): adds `post_type` column so count_for_options can scope
+ * per-CPT. Upgrade TRUNCATEs the table — see install().
+ */
+ const SCHEMA_VERSION = '2';
+
+ /**
+ * Option key that stores the installed schema version.
+ */
+ const OPTION_SCHEMA = 'airowp_query_filter_index_schema';
+
+ /**
+ * Option key used to record background index status (e.g. "indexing", "ready").
+ * Reserved for future reindex tasks (Task A2+).
+ */
+ const OPTION_STATUS = 'airowp_query_filter_index_status';
+
+ /**
+ * Object-cache group for count_for_options() results.
+ *
+ * Cache entries carry the current epoch in their key so a bump invalidates
+ * every outstanding entry without needing to enumerate keys (which many
+ * object-cache backends do not support).
+ */
+ const CACHE_GROUP = 'airowp_query_filter_index';
+
+ /**
+ * Cache-epoch key. Read via wp_cache_get / bumped via wp_cache_incr so a
+ * persistent object cache (Redis/Memcached) invalidates count results
+ * atomically without hitting the options table on each write.
+ */
+ const CACHE_EPOCH_KEY = 'counts_epoch';
+
+ /**
+ * TTL (seconds) for cached count results. Counts stay correct until the
+ * next write (via the epoch), but we still TTL-cap in case the epoch
+ * counter is lost (non-persistent cache restart) — bounded staleness.
+ */
+ const CACHE_TTL = 300;
+
+ /**
+ * Per-request cache of the table existence check.
+ *
+ * Null = not yet checked; true/false = checked result.
+ *
+ * @var bool|null
+ */
+ private static $table_exists = null;
+
+ /**
+ * Returns the fully-qualified table name.
+ *
+ * @return string
+ */
+ public static function table_name(): string {
+ global $wpdb;
+ // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
+ return $wpdb->prefix . 'airowp_query_filter_index';
+ }
+
+ /**
+ * Returns true when the filter index table actually exists in the database.
+ *
+ * Result is cached for the lifetime of the request to avoid repeated
+ * SHOW TABLES queries. Call reset_table_cache() in tests between cases.
+ *
+ * @return bool
+ */
+ public static function table_exists(): bool {
+ if ( null !== self::$table_exists ) {
+ return self::$table_exists;
+ }
+ global $wpdb;
+ $table_name = self::table_name();
+ // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
+ self::$table_exists = ( $wpdb->get_var( $wpdb->prepare( 'SHOW TABLES LIKE %s', $wpdb->esc_like( $table_name ) ) ) === $table_name );
+ return self::$table_exists;
+ }
+
+ /**
+ * Resets the per-request table existence cache (for tests).
+ *
+ * @return void
+ */
+ public static function reset_table_cache(): void {
+ self::$table_exists = null;
+ }
+
+ /**
+ * Reindexes a single object's filter values.
+ *
+ * Deletes all prior rows for this (object_type, object_id) and rewrites them
+ * based on the current FilterRegistry entries. Idempotent by design.
+ *
+ * @param string $object_type One of 'post' (A2), 'user' (v2.4+), 'term' (v2.4+).
+ * @param int $object_id The object's primary key.
+ */
+ public static function reindex_object( string $object_type, int $object_id ): void {
+ global $wpdb;
+ if ( $object_id <= 0 || ! self::table_exists() ) {
+ return;
+ }
+
+ // v2.2 indexes only published posts. If the post is not published,
+ // remove any existing rows and bail. This covers the case where
+ // taxonomy/meta hooks fire for a draft that was previously published.
+ $post_type = '';
+ if ( 'post' === $object_type ) {
+ $post = get_post( $object_id );
+ if ( ! $post || 'publish' !== $post->post_status ) {
+ self::remove_object( 'post', $object_id );
+ return;
+ }
+ $post_type = (string) $post->post_type;
+ }
+
+ $table = self::table_name();
+
+ // Idempotency: wipe existing rows for this object before reinsert.
+ // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
+ $wpdb->delete(
+ $table,
+ array(
+ 'object_id' => $object_id,
+ 'object_type' => $object_type,
+ ),
+ array( '%d', '%s' )
+ );
+
+ $filters = FilterRegistry::all();
+ if ( empty( $filters ) ) {
+ return;
+ }
+
+ $rows = array();
+ foreach ( $filters as $filter_key => $config ) {
+ $values = self::resolve_filter_values( $object_type, $object_id, $config );
+ foreach ( $values as $value ) {
+ $rows[] = array(
+ 'object_id' => $object_id,
+ 'object_type' => $object_type,
+ 'post_type' => $post_type,
+ 'filter_key' => $filter_key,
+ 'filter_value' => (string) $value,
+ );
+ }
+ }
+
+ if ( empty( $rows ) ) {
+ return;
+ }
+
+ // Bulk insert — one query regardless of filter count.
+ $placeholders = array();
+ $params = array();
+ foreach ( $rows as $row ) {
+ $placeholders[] = '(%d, %s, %s, %s, %s)';
+ $params[] = $row['object_id'];
+ $params[] = $row['object_type'];
+ $params[] = $row['post_type'];
+ $params[] = $row['filter_key'];
+ $params[] = $row['filter_value'];
+ }
+
+ $sql = "INSERT INTO {$table} (object_id, object_type, post_type, filter_key, filter_value) VALUES "
+ . implode( ', ', $placeholders );
+
+ // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
+ $wpdb->query( $wpdb->prepare( $sql, $params ) );
+
+ self::bump_counts_cache();
+ }
+
+ /**
+ * Resolves filter values for a given object. Posts-only in v2.2.
+ *
+ * @param string $object_type One of 'post', 'user', 'term'.
+ * @param int $object_id Object primary key.
+ * @param array $config Filter config from FilterRegistry: { type, source, label }.
+ * @return array Flat array of string values to index.
+ */
+ private static function resolve_filter_values( string $object_type, int $object_id, array $config ): array {
+ if ( 'post' !== $object_type ) {
+ return array(); // v2.4 will add user/term support.
+ }
+
+ $type = $config['type'] ?? '';
+ $source = $config['source'] ?? '';
+ if ( '' === $source ) {
+ return array();
+ }
+
+ if ( 'taxonomy' === $type ) {
+ $term_ids = wp_get_post_terms( $object_id, $source, array( 'fields' => 'ids' ) );
+ if ( is_wp_error( $term_ids ) || empty( $term_ids ) ) {
+ return array();
+ }
+ return array_map( 'strval', $term_ids );
+ }
+
+ if ( 'meta' === $type ) {
+ $meta = get_post_meta( $object_id, $source, false );
+ if ( ! is_array( $meta ) || empty( $meta ) ) {
+ return array();
+ }
+ // Filter out empty strings, non-scalars, and values exceeding the VARCHAR(190) column width.
+ $clean = array();
+ foreach ( $meta as $value ) {
+ if ( ! is_scalar( $value ) ) {
+ continue;
+ }
+ $value = (string) $value;
+ if ( '' === $value ) {
+ continue;
+ }
+ if ( mb_strlen( $value ) > 190 ) {
+ continue; // Longer than the VARCHAR(190) index column; skip to avoid truncation.
+ }
+ $clean[] = $value;
+ }
+ return $clean;
+ }
+
+ return array();
+ }
+
+ /**
+ * Deletes all index rows for a given object.
+ *
+ * Scoped by both object_id and object_type to avoid cross-type collisions
+ * (e.g. a post and a user that happen to share the same numeric ID).
+ *
+ * @param string $object_type The object type (e.g. 'post').
+ * @param int $object_id The object's primary key.
+ * @return void
+ */
+ public static function remove_object( string $object_type, int $object_id ): void {
+ if ( ! self::table_exists() ) {
+ return;
+ }
+ global $wpdb;
+ // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
+ $wpdb->delete(
+ self::table_name(),
+ array(
+ 'object_id' => $object_id,
+ 'object_type' => $object_type,
+ ),
+ array( '%d', '%s' )
+ );
+ self::bump_counts_cache();
+ }
+
+ /**
+ * Returns the count of distinct objects matching each option value for a
+ * filter key, intersected with the current active-filter state.
+ *
+ * Within-group semantics: selections inside the same filter group are OR
+ * (showing "how many objects would match if you added this value").
+ * Across-group semantics: each other active-filter group is AND.
+ * The self-filter is excluded from the intersection so users can still see
+ * counts for all options of the group they are currently filtering on.
+ *
+ * @param string $filter_key The filter key to count options for (e.g. 'category').
+ * @param array $option_values Option values to count. Values are (string)-cast.
+ * @param array $active_filters Active filter state: [ filter_key => [ value, ... ] ].
+ * @param string $post_type Optional. When non-empty, counts are restricted
+ * to rows with a matching post_type — and so are
+ * the intersection subqueries for active filters,
+ * so a CPT-scoped query never leaks counts from
+ * other post types that share the same taxonomy.
+ * @return array [ value => count ] zero-filled for options absent from the result set.
+ */
+ public static function count_for_options( string $filter_key, array $option_values, array $active_filters, string $post_type = '' ): array {
+ if ( empty( $option_values ) || ! self::table_exists() ) {
+ return array();
+ }
+
+ global $wpdb;
+ $table = self::table_name();
+ $key = sanitize_key( $filter_key );
+ if ( '' === $key ) {
+ return array();
+ }
+
+ // Normalise option values to strings and build a keyed default (0-filled).
+ $string_values = array_values( array_unique( array_map( 'strval', $option_values ) ) );
+ $counts = array_fill_keys( $string_values, 0 );
+
+ // Exclude self-filter from intersection — OR semantics within a group.
+ unset( $active_filters[ $key ] );
+
+ // Cache lookup. Key is (epoch, filter_key, option_values, active_filters, post_type).
+ // The epoch is bumped on every index write, so cached entries remain valid
+ // until the next reindex/remove/rebuild. Skipped in tests where the
+ // per-request table_exists cache can race with the drop-table teardown.
+ $cache_key = self::build_counts_cache_key( $key, $string_values, $active_filters, $post_type );
+ $cached = wp_cache_get( $cache_key, self::CACHE_GROUP );
+ if ( is_array( $cached ) ) {
+ return $cached;
+ }
+
+ // Optional post_type scope — applied to the outer query AND each
+ // intersection subquery so cross-filter counts stay within the CPT.
+ $post_type_sql = '';
+ $subquery_pt_sql = '';
+ $post_type_params = array();
+ if ( '' !== $post_type ) {
+ $post_type_sql = ' AND post_type = %s';
+ $subquery_pt_sql = ' AND post_type = %s';
+ $post_type_params[] = $post_type;
+ }
+
+ // Build intersection subqueries, one per active-filter group.
+ $intersect_sql = '';
+ $intersect_params = array();
+
+ foreach ( $active_filters as $f_key => $f_values ) {
+ $sanitized_f_key = sanitize_key( (string) $f_key );
+ if ( '' === $sanitized_f_key || empty( $f_values ) ) {
+ continue;
+ }
+ $f_strings = array_values( array_unique( array_map( 'strval', (array) $f_values ) ) );
+ if ( empty( $f_strings ) ) {
+ continue;
+ }
+ $f_placeholders = implode( ',', array_fill( 0, count( $f_strings ), '%s' ) );
+ $intersect_sql .= " AND object_id IN (
+ SELECT object_id FROM {$table}
+ WHERE filter_key = %s AND filter_value IN ({$f_placeholders}){$subquery_pt_sql}
+ )";
+ $intersect_params[] = $sanitized_f_key;
+ foreach ( $f_strings as $v ) {
+ $intersect_params[] = $v;
+ }
+ if ( '' !== $post_type ) {
+ $intersect_params[] = $post_type;
+ }
+ }
+
+ $value_placeholders = implode( ',', array_fill( 0, count( $string_values ), '%s' ) );
+ $sql = "SELECT filter_value, COUNT(DISTINCT object_id) AS cnt
+ FROM {$table}
+ WHERE filter_key = %s AND filter_value IN ({$value_placeholders}){$post_type_sql}
+ {$intersect_sql}
+ GROUP BY filter_value";
+
+ $params = array_merge( array( $key ), $string_values, $post_type_params, $intersect_params );
+
+ // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
+ $rows = $wpdb->get_results( $wpdb->prepare( $sql, $params ) );
+
+ if ( is_array( $rows ) ) {
+ foreach ( $rows as $row ) {
+ if ( array_key_exists( $row->filter_value, $counts ) ) {
+ $counts[ $row->filter_value ] = (int) $row->cnt;
+ }
+ }
+ }
+
+ wp_cache_set( $cache_key, $counts, self::CACHE_GROUP, self::CACHE_TTL ); // phpcs:ignore WordPressVIPMinimum.Performance.LowExpiryCacheTime.CacheTimeUndetermined -- CACHE_TTL = 300 seconds (VIP minimum)
+
+ return $counts;
+ }
+
+ /**
+ * Builds a cache key for count_for_options() that scopes the cached value to
+ * the current cache epoch + the full argument shape. Any index write bumps
+ * the epoch, so stale entries become unreachable without explicit deletion.
+ *
+ * @param string $filter_key Sanitized filter key.
+ * @param array $string_values Sorted, unique option values.
+ * @param array $active_filters Active filter state (minus self-filter).
+ * @param string $post_type Post-type scope or empty string for all.
+ * @return string
+ */
+ private static function build_counts_cache_key( string $filter_key, array $string_values, array $active_filters, string $post_type = '' ): string {
+ $epoch = self::get_counts_epoch();
+ // Sort values and active filters for stable key regardless of input order.
+ sort( $string_values );
+ ksort( $active_filters );
+ foreach ( $active_filters as $k => $vs ) {
+ if ( is_array( $vs ) ) {
+ $vs = array_values( array_unique( array_map( 'strval', $vs ) ) );
+ sort( $vs );
+ $active_filters[ $k ] = $vs;
+ }
+ }
+ return 'cfo:' . $epoch . ':' . md5(
+ $filter_key . '|' . wp_json_encode( $string_values ) . '|' . wp_json_encode( $active_filters ) . '|pt=' . $post_type
+ );
+ }
+
+ /**
+ * Returns the current counts cache epoch — an incrementing integer used as
+ * part of the cache key so bumping the epoch invalidates every outstanding
+ * cached result without key enumeration.
+ *
+ * @return int
+ */
+ private static function get_counts_epoch(): int {
+ $epoch = wp_cache_get( self::CACHE_EPOCH_KEY, self::CACHE_GROUP );
+ if ( false === $epoch ) {
+ $epoch = 1;
+ wp_cache_set( self::CACHE_EPOCH_KEY, $epoch, self::CACHE_GROUP );
+ }
+ return (int) $epoch;
+ }
+
+ /**
+ * Bumps the counts cache epoch, invalidating all previously-cached
+ * count_for_options() results. Called from reindex_object / remove_object
+ * and by the rebuilder on completion. Object-cache-only (no DB write) so
+ * bumping inside tight loops is safe; with a persistent cache backend the
+ * bump is atomic via wp_cache_incr.
+ *
+ * @return void
+ */
+ public static function bump_counts_cache(): void {
+ $incremented = wp_cache_incr( self::CACHE_EPOCH_KEY, 1, self::CACHE_GROUP );
+ if ( false === $incremented ) {
+ // Non-persistent caches (or no cache yet) — seed then bump.
+ $current = (int) wp_cache_get( self::CACHE_EPOCH_KEY, self::CACHE_GROUP );
+ wp_cache_set( self::CACHE_EPOCH_KEY, $current + 1, self::CACHE_GROUP );
+ }
+ }
+
+ /**
+ * Returns true if the given filter key is registered in FilterRegistry.
+ *
+ * @param string $filter_key The filter key to check (e.g. 'category').
+ * @return bool
+ */
+ public static function is_available( string $filter_key ): bool {
+ return null !== FilterRegistry::get( $filter_key );
+ }
+
+ /**
+ * Creates or upgrades the filter index table via dbDelta.
+ *
+ * Safe to call multiple times — dbDelta is idempotent.
+ *
+ * @return void
+ */
+ public static function install(): void {
+ global $wpdb;
+
+ require_once ABSPATH . 'wp-admin/includes/upgrade.php';
+
+ $table = self::table_name();
+ // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
+ $charset = $wpdb->get_charset_collate();
+ $stored_schema = (string) get_option( self::OPTION_SCHEMA, '0' );
+ $needs_truncate = self::table_exists() && version_compare( $stored_schema, '2', '<' );
+
+ // Note: PRIMARY KEY requires two spaces before the column name — dbDelta quirk.
+ // post_type is VARCHAR(40) to match WP's wp_posts.post_type column width.
+ // Empty string for non-post object_types (users/terms in v2.4+).
+ $sql = "CREATE TABLE {$table} (
+ id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
+ object_id BIGINT UNSIGNED NOT NULL,
+ object_type VARCHAR(20) NOT NULL,
+ post_type VARCHAR(40) NOT NULL DEFAULT '',
+ filter_key VARCHAR(190) NOT NULL,
+ filter_value VARCHAR(190) NOT NULL,
+ indexed_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ PRIMARY KEY (id),
+ KEY filter_key_value (filter_key, filter_value),
+ KEY filter_scope (post_type, filter_key, filter_value),
+ KEY object_lookup (object_type, object_id)
+) {$charset};";
+
+ dbDelta( $sql );
+
+ // On a v1 → v2 upgrade, pre-existing rows have post_type='' (dbDelta's
+ // DEFAULT fills new columns). A per-CPT count query would miss them,
+ // so TRUNCATE and rely on the admin dashboard / WP-CLI rebuild to
+ // reindex with correct post_type values. v2.2 has not shipped yet so
+ // no production data is lost.
+ if ( $needs_truncate ) {
+ // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.DirectDatabaseQuery.SchemaChange, WordPress.DB.PreparedSQL.NotPrepared, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
+ $wpdb->query( $wpdb->prepare( 'TRUNCATE TABLE %i', $table ) );
+ self::bump_counts_cache();
+ }
+
+ // Reset the per-request cache so subsequent calls see the new table.
+ self::$table_exists = null;
+
+ update_option( self::OPTION_SCHEMA, self::SCHEMA_VERSION, false );
+ }
+}
diff --git a/includes/Blocks/Common/Query/FilterIndexCLI.php b/includes/Blocks/Common/Query/FilterIndexCLI.php
new file mode 100644
index 0000000..ed3e60b
--- /dev/null
+++ b/includes/Blocks/Common/Query/FilterIndexCLI.php
@@ -0,0 +1,168 @@
+]
+ * : Posts to process per batch. Default 200, min 50.
+ *
+ * ## EXAMPLES
+ *
+ * wp dsgo query index rebuild
+ * wp dsgo query index rebuild --batch-size=500
+ *
+ * @param array $args Positional arguments (unused).
+ * @param array $assoc_args Named arguments (batch-size).
+ */
+ public function rebuild( $args, $assoc_args ): void {
+ $batch = (int) \WP_CLI\Utils\get_flag_value( $assoc_args, 'batch-size', 200 );
+ $result = FilterIndexRebuilder::rebuild_all( array( 'batch_size' => $batch ) );
+
+ if ( 'error' === ( $result['status'] ?? '' ) ) {
+ \WP_CLI::error( sprintf( 'Rebuild failed (status: %s).', $result['status'] ) );
+ }
+
+ \WP_CLI::success(
+ sprintf(
+ 'Indexed %d objects (%d rows).',
+ (int) $result['processed'],
+ (int) $result['total_rows']
+ )
+ );
+ }
+
+ /**
+ * Rebuild a single filter.
+ *
+ * ## OPTIONS
+ *
+ *
+
+
+
+
+
+
+
+
+
+
Contact Us
+ + + +Begin Your Journey to Extraordinary Living
+ + + +Whether you are searching for your dream home or considering selling your property, our team is ready to provide the exceptional service you deserve.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+1 (310) 555-0100
+
+
+
+
inquiries@luxuryestates.com
+
+
+
+
9876 Wilshire Blvd, Beverly Hills, CA 90210
+
+
Schedule a Consultation
+ + + + +
+
+
+
+
+
+
+
+
+
+
Schedule Your Free Consultation
+ + + +Take the first step toward resolving your legal matter. Contact us today to schedule a confidential consultation with one of our experienced attorneys.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
123 Legal Plaza, Suite 500, Business City, ST 12345
+
+
+
+
(555) 123-4567
+
+
+
+
contact@professionalfirm.com
+
+
+
+
Monday - Friday: 8:30 AM - 6:00 PM
+
+
+
+
Request a Consultation
+ + + + +
+
+
+
+
+
+
+
Get In Touch
+ + + +We would love to hear from you. Send us a message and we will respond as soon as possible.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Our Office
+ + + +123 Business Street
New York, NY 10001
United States
Phone: +1 (555) 123-4567
Email: hello@example.com
+
+
+
+
+
+
+
Get In Touch
+ + + +Contact Us
+ + + +Have a question or want to work together? We would love to hear from you.
+
+
+
+
+
+
+
+
Send Us a Message
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
123 Business Avenue, New York, NY 10001
+
+
+
+
+
+
+1 (555) 123-4567
+
+
+
+
+
+
hello@company.com
+
+
+
+
+
+
Mon - Fri: 9:00 AM - 6:00 PM
+
+
+
+
+
+
+
+
+
+
Let us Talk
+ + + +Have a question or want to work together? We are here to help you bring your ideas to life.
+ + + + + + + + +
+
Send a Message
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Building the Future of Digital Experiences
+We are a team of passionate designers and developers dedicated to creating exceptional digital products. Our mission is to help businesses transform their ideas into reality.
+ + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Our Mission
+ + + +Empowering businesses with innovative solutions.
+
+
+
+
Our Vision
+ + + +Leading the digital transformation revolution.
+
+
+
+
Our Values
+ + + +Integrity, innovation, and client success.
+
+
+
+
Our Team
+ + + +50+ experts across design and development.
+
+
+
+
+
+
+
+
+
+
About Me
+ + + +Designing with Purpose, Creating with Passion
+ + + +With over 10 years of experience in product design, I have helped companies ranging from early-stage startups to Fortune 500 companies create meaningful digital experiences.
+ + + +I believe great design is invisible - it should feel intuitive and delightful without getting in the way. My approach combines user research, strategic thinking, and pixel-perfect execution to deliver results that matter.
+ + + +When not designing, you will find me mentoring aspiring designers, speaking at conferences, or exploring hiking trails with my camera.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Years Experience
0
Projects Delivered
0
Happy Clients
0
Design Awards
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
How We Help You Succeed
+ + + +A comprehensive approach to achieving your goals
+
+
+
+
+
+
+
+
+
+
+
STEP 01
+ + + +Strategic Planning
+ + + +We start by understanding your business goals and creating a comprehensive roadmap for success. Our team analyzes market trends and competitive landscapes.
+ + + + +
+
+
+
+
+
+
+
+
+
STEP 02
+ + + +Design & Development
+ + + +Our expert team brings your vision to life with cutting-edge design and robust development practices that ensure scalability and performance.
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
STEP 03
+ + + +Launch & Growth
+ + + +We ensure a smooth launch and provide ongoing support to help you grow. Our data-driven approach helps optimize performance continuously.
+ + + + +
+
+
Trusted by Leading Brands
+ + + +
+
VOGUE
+ + + +NIKE
+ + + +SPOTIFY
+ + + +AIRBNB
+
+
+
+
+
+
+
+
Current Campaign
+ + + +Help Us Reach Our Goal
+ + + +We are building 10 new schools in rural communities. Every donation brings us closer to making education accessible to 5,000 more children.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Previously worked with
+ + + +
+Google
+ + + +
Spotify
+ + + +Airbnb
+ + + +Stripe
+ + + +Notion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Personal Training
+ + + +One-on-One Coaching
+ + + +Get personalized attention and a customized workout plan designed specifically for your goals, fitness level, and schedule.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Custom workout plans
+
+
+
+
Nutrition guidance
+
+
+
+
Progress tracking
+
+
+
+
Flexible scheduling
+
+
+
TRUSTED BY INNOVATIVE TEAMS WORLDWIDE
+ + + +
+
STRIPE
+ + + +NOTION
+ + + +FIGMA
+ + + +VERCEL
+ + + +LINEAR
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Featured Courses
+ + + +Top Rated This Month
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
★★★★★ 4.9
+Complete Web Development Bootcamp
+ + + +Dr. Angela Yu • 65 hours
+ + + +
+
$89.99
+ + + +$199.99
+
+
+
+
+
+
+
+
+
+
+
★★★★★ 4.8
+Python for Data Science & Machine Learning
+ + + +Jose Portilla • 45 hours
+ + + +
+
$94.99
+ + + +$179.99
+
+
+
+
+
+
+
+
+
+
+
★★★★★ 4.9
+UI/UX Design Masterclass
+ + + +Sarah Chen • 38 hours
+ + + +
+
$79.99
+ + + +$149.99
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Students Enrolled
0
Expert Courses
0
Certified Instructors
0
Satisfaction Rate
+
+
+
+
+
+
+
Event Schedule
+ + + +Three Days of Innovation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Opening Keynote: The Future of Tech
+ + + +James Chen • Main Stage
+9:00 AM
+
+
+
+
+
+
+
AI & Machine Learning Workshop
+ + + +Panel Discussion • Workshop Room A
+11:00 AM
+
+
+
+
+
+
+
Networking Lunch
+ + + +Exhibition Hall
+12:30 PM
+
+
+
+
+
+
+
Welcome Reception & Demo Showcase
+ + + +Startup Demos • Rooftop Terrace
+6:00 PM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cloud Architecture at Scale
+ + + +Sarah Miller • Main Stage
+9:00 AM
+
+
+
+
+
+
+
Startup Pitch Competition
+ + + +10 Startups • Innovation Stage
+2:00 PM
+
+
+
+
+
+
+
VIP Dinner & Awards Ceremony
+ + + +Grand Ballroom
+7:00 PM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cybersecurity in the AI Era
+ + + +Emily Zhang • Main Stage
+9:00 AM
+
+
+
+
+
+
+
Closing Keynote: Building Tomorrow
+ + + +All Speakers • Main Stage
+4:00 PM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
World-Class Speakers
0
Days of Innovation
0
Sessions & Workshops
0
Expected Attendees
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Active Members
0
Expert Trainers
0
Weekly Classes
0
Years Experience
+
+
+
+
+
+
+
Trusted by Growing Companies
+ + + +See the impact we have made together
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Active Users
0
Uptime SLA
0
Integrations
0
Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Lives Changed
0
Countries Reached
0
Volunteers
0
Raised
+
+
+
+
+
+
+
Success Stories
+ + + +Real Impact, Real Stories
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Maria\\\'s Journey to Self-Sufficiency
+ + + +"Thanks to the microloan program, I was able to start my own tailoring business. Now I can provide for my children and send them to school. This organization gave me hope when I had none."
+ + + +— Maria, Guatemala
+
+
+
+
Clean Water for Kibera Village
+ + + +"Before the well was built, we walked 3 miles every day for water. Now our children are healthier and can focus on their education instead of carrying water."
+ + + +— Village Elder, Kenya
+
+
+
+
First in Her Family to Graduate
+ + + +"The scholarship changed everything. I became the first person in my family to finish high school. Now I am studying to become a doctor so I can help my community."
+ + + +— Amara, Nigeria
+
+
+
+
+
+
+
+
+
+
+
About Us
+ + + +A Legacy of Excellence in Luxury Real Estate
+ + + +For over two decades, we have been the trusted advisors for clients seeking extraordinary properties. Our deep expertise in luxury markets, combined with unparalleled discretion and personalized service, sets us apart.
+ + + +We understand that finding the perfect home is about more than square footage and amenities. It is about discovering a residence that reflects your lifestyle, aspirations, and vision for the future.
+ + + +
+
+
+
+
+
+
0
In Sales Volume
0
Properties Sold
+
+
+
+
+
+
+
+
+
+
Visit Us
+ + + +Location & Hours
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Address
+ + + +456 Culinary Lane
Downtown District, City 12345
+
+
+
+
+
+
+
+
+Hours
+ + + +Tue - Thu: 5:00 PM - 10:00 PM
Fri - Sat: 5:00 PM - 11:00 PM
Sun: 4:00 PM - 9:00 PM
Monday: Closed
+
+
+
+
+
+Reservations
+ + + +(555) 987-6543
+
+
+
+
+
Trusted by Industry Leaders
+ + + +
+
+
+
+
+
+
+
+
+
+
+
Chef Favorites
+ + + +Signature Dishes
+ + + +Our most beloved creations, made with the freshest seasonal ingredients.
+
+
+
+
+
+
+
+
+
+
+
+Herb-Crusted Salmon
+ + + +$34
+Wild-caught salmon with lemon herb crust, served with seasonal vegetables and saffron risotto.
+
+
+
+
+
+
+
+
+
+
+Prime Beef Tenderloin
+ + + +$48
+Aged tenderloin with red wine reduction, truffle mashed potatoes, and grilled asparagus.
+
+
+
+
+
+
+
+Lobster Risotto
+ + + +$42
+Maine lobster tail atop creamy Arborio rice with saffron, white wine, and fresh herbs.
+
+
+
+
+
+
+
+
+
+
+
+
+
Our Mission
+ + + +Empowering Communities, One Life at a Time
+ + + +We believe everyone deserves access to clean water, education, healthcare, and economic opportunity. Through sustainable programs and community partnerships, we work to break the cycle of poverty.
+ + + +Our approach focuses on long-term solutions that empower communities to thrive independently. We invest in local leaders, provide training and resources, and measure our impact to ensure every dollar makes a difference.
+ + + + +
+
+
+
+
+
+
+
+
Our Work
+ + + +Selected projects we are proud of
+
+
+
+
+
+
+
+
+
+
+
+
Web Design
+E-commerce Platform
Fashion & Retail
Complete redesign of a fashion e-commerce platform with improved UX.
+
Mobile App
+Fitness Tracker App
Health & Wellness
A comprehensive fitness tracking app with social features and gamification.
+
Branding
+Brand Identity System
Visual Design
Complete brand identity including logo, guidelines, and marketing materials.
+
+
+
+
+
+
+
How It Works
+ + + +Get started in just four simple steps
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
01
+Create Account
+ + + +Sign up for free in under a minute. No credit card required to get started.
+
+
+
+
+
+
+
02
+Configure Settings
+ + + +Customize your workspace with our intuitive setup wizard and preferences.
+
+
+
+
+
+
+
03
+Import Data
+ + + +Easily import your existing data from spreadsheets or other platforms.
+
+
+
+
+
+
+
04
+Launch & Grow
+ + + +You are all set! Start using the platform and watch your business grow.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Featured Products
+ + + +Best Sellers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Footwear
+ + + +Premium Sneakers
+ + + +
+
$149
+ + + +$99
+
+
+
Accessories
+ + + +Classic Watch
+ + + +$249
+
+
+
Bags
+ + + +Leather Backpack
+ + + +$189
+
+
+
Eyewear
+ + + +Designer Sunglasses
+ + + +$129
+
+
+
+
+
+
+
+
Product Showcase
+ + + +See It in Action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Years Experience
0
Cases Resolved
0
Client Satisfaction
0
Expert Partners
+
+
+
+
+
+
+
+
+
Our Expertise
+ + + +We have honed our skills over years of experience to deliver exceptional results in every project we undertake.
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The best way to predict the future is to create it. Innovation distinguishes between a leader and a follower.
+ + + +
+
+
Steve Jobs
+ + + +Co-founder, Apple Inc.
+
+
+
+
+
+
+
+
Explore Our Features
+ + + +Drag to explore the cards or use navigation arrows
+
+
+
+
+
+
+
+
+
+
+
+
We Build Solutions That Last
+ + + +Our team combines creativity with technical expertise to deliver exceptional results that drive real business growth.
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
About Us
+ + + +We Build Digital Experiences That Matter
+ + + +For over a decade, we have been helping businesses transform their digital presence. Our team of experts combines creativity with technical excellence to deliver solutions that drive real results.
+ + + +We believe in building lasting partnerships with our clients, understanding their unique challenges, and crafting tailored solutions that exceed expectations.
+ + + +
+
+
+
+
+
+
+
+
+
+
0
Projects Delivered
0
Team Members
0
Years of Experience
+
+
+
Our Sponsors
+ + + +
+
TECHCORP
+ + + +CLOUDIFY
+ + + +DATAFLOW
+ + + +NEXUSAI
+ + + +SCALABLE
+
+
+
+
+
+
+
+
Our Impact in Numbers
+ + + +Trusted by thousands of businesses worldwide
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Active Users
+
+
+
+
+
+
0
Countries Served
+
+
+
+
+
+
0
Average Rating
+
+
+
+
+
+
0
YoY Growth
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Happy Customers
0
Products
0
Countries
0
Rating
+
+
+
+
Explore Our Services
+ + + +Discover how we can help you achieve your goals
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Beautiful, Responsive Web Design
+ + + +We create stunning websites that work perfectly on all devices. Our design process focuses on user experience and conversion optimization.
+ + + + +
+
+
+
+
+
+
+
+
+
+
Robust Web Development
+ + + +Our development team builds scalable, secure, and high-performance web applications using the latest technologies and best practices.
+ + + + +
+
+
+
+
+
+
+
+
+
+
Digital Marketing Excellence
+ + + +Drive growth with our comprehensive digital marketing strategies. We help you reach your target audience and convert them into loyal customers.
+ + + + +
+
+
+
+
+
+
+
+
+
+
24/7 Customer Support
+ + + +We are always here to help. Our dedicated support team ensures your website runs smoothly and any issues are resolved quickly.
+ + + + +
+
+
+
+
+
+
+
+
+
+
Why Choose Us
+ + + +Built for Teams Who Ship
+ + + +We understand the challenges of modern product development. That is why we built a platform that gets out of your way and lets you focus on what matters.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Uptime SLA
0
Avg Response
0
Active Users
0
Support
+
+
+
+
+
Our Journey
+ + + +Key milestones that shaped who we are today
+ + + +
+
+
+
+
+
+
+
+
+
+
2018
Company Founded
+
Started in a small garage with just two founders and a vision to transform the industry.
+2020
Series A Funding
+
Raised $10M in Series A funding to accelerate product development and expand our team.
+2023
Global Expansion
+
Opened offices in London, Tokyo, and Sydney, reaching customers in over 100 countries.
+
+
+
Trusted by 10,000+ companies worldwide
+ + + +
+
Acme Corp
+ + + +TechFlow
+ + + +Innovate Inc
+ + + +DataStream
+ + + +CloudBase
+
+
+
+
+
+
+
+
+
+
+
Why Clients Choose Us
+ + + +We combine deep expertise with personalized service to deliver exceptional outcomes for every client.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Proven Track Record
+ + + +Over 30 years of successful outcomes for clients across industries.
+
+
+
+
+
+
Personalized Attention
+ + + +Direct access to senior partners who personally handle your matters.
+
+
+
+
+
+
Transparent Communication
+ + + +Clear updates and honest advice throughout your engagement.
+
+
+
+
+
+
Results-Driven Approach
+ + + +Focused strategies designed to achieve your specific objectives.
+
+
+
+
+
+
+
+
+
+
+
+
On This Page
+ + + +Table of Contents
+
Introduction
+ + + +Welcome to our comprehensive guide. This article will walk you through everything you need to know to get started and make the most of our platform. Whether you are a beginner or an experienced user, you will find valuable insights here.
+ + + +We have designed this guide to be easy to follow, with clear explanations and practical examples that you can apply immediately to your projects.
+ + + +Getting Started
+ + + +The first step is to understand the fundamentals. Our platform is built on modern web standards and follows best practices for performance, accessibility, and user experience.
+ + + +To begin, you will need to familiarize yourself with the basic concepts and terminology. This foundation will help you navigate the more advanced features with confidence.
+ + + +Key Features
+ + + +Our platform offers a rich set of features designed to streamline your workflow and enhance your productivity. Here are some of the highlights:
+ + + +-
+
- Intuitive drag-and-drop interface + + + +
- Real-time collaboration tools + + + +
- Extensive customization options + + + +
- Built-in analytics and reporting + + + +
- Seamless third-party integrations +
Best Practices
+ + + +To get the most out of our platform, we recommend following these best practices that have been refined through years of user feedback and research.
+ + + +First, start with a clear plan and objectives. Understanding what you want to achieve will help you make better decisions throughout your project.
+ + + +Second, take advantage of templates and patterns. These pre-built components can save you time and ensure consistency across your work.
+ + + +Conclusion
+ + + +We hope this guide has given you a solid understanding of how to use our platform effectively. Remember, the best way to learn is by doing, so do not be afraid to experiment and explore.
+ + + +If you have any questions or need further assistance, our support team is always here to help. Happy building!
+
+
+
+
+
+
+
+
+
+
Why Choose Us
+ + + +We combine cutting-edge technology with user-centered design to create experiences that delight and convert.
+
+
+
+
+
+
+
+
+
+
+
+
Our Expertise
+ + + +We have honed our skills over years of experience to deliver exceptional results in every project we undertake.
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
By the Numbers
+ + + +See the impact we have made together
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ready to Transform Your Business?
+ + + +Join thousands of companies already using our platform to grow faster.
+
+
+
+
+
+
+
No credit card required • 14-day free trial • Cancel anytime
+
+
+
+
+
+
+
+
+
+
Limited Time Offer!
+ + + +Get 50% off your first year. This exclusive deal ends soon.
+
+
+
00
Days
00
Hours
00
Min
00
Sec
+
+
+
+
+
+
+
+
+
Start a Project
+ + + +Ready to Bring Your Vision to Life?
+ + + +Let us discuss your project and explore how we can help you achieve your goals.
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
hello@creativestudio.com
+
+
+
+
+1 (555) 123-4567
+
+
+
+
123 Design Street, Creative City
+
+
+
+
+
+
+
+
+
+
+
+
Black Friday Sale - 50% Off
+ + + +Don\'t miss out on our biggest sale of the year. Offer ends soon!
+ + + +00
Days
00
Hours
00
Min
00
Sec
+
+
+
+
+
+
No credit card required. Cancel anytime.
+
+
+
+
+
Every Gift Creates Ripples of Change
+ + + +Your donation today will transform lives for generations to come. Together, we can build a world where everyone has the opportunity to thrive.
+ + + +
+
+
+
+
+
+
Start Your Learning Journey Today
+ + + +Join our community of learners and unlock your potential. Get unlimited access to all courses with our subscription plans.
+ + + +
+
+
+
+
+
+
+
+
+
+
Ready to Join the Future?
+ + + +Do not miss the most anticipated tech event of 2026. Limited seats available - secure yours today!
+ + + +
+
+
+
+
+
+
+
Ready to Get Started?
+ + + +Join thousands of teams already using our platform to work smarter.
+ + + +
+
+
+
+
+
+
No credit card required. 14-day free trial.
+
+
+
+
+
Ready to Get Started?
+ + + +Join thousands of satisfied customers who have transformed their business with our solutions.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
Get 15% Off Your First Order
+ + + +Subscribe to our newsletter for exclusive deals, new arrivals, and style inspiration delivered straight to your inbox.
+ + + +
+
+
No spam, unsubscribe anytime. By subscribing you agree to our Privacy Policy.
+
+
+
+
+
+
+
+
+
+
+
+
Stay in the Loop
+ + + +Get the latest updates, tips, and exclusive offers delivered straight to your inbox.
+ + + + +
+
+
+
+
+
Join 10,000+ subscribers
+
+
+
+Ready for an Unforgettable Evening?
+ + + +Reserve your table today and let us create a memorable dining experience for you and your guests.
+ + + +
+
+
+
+
+
Ready to Transform Your Workflow?
+ + + +Join thousands of teams already using our platform to ship better products faster. Start your free trial today.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ready to Launch Your Project?
+ + + +Join thousands of creators who have transformed their ideas into stunning websites. Start building today with our powerful tools.
+ + + +
+
+
+
+
+
+
No credit card required • Free forever plan available
+
+
+
+
+
Ready to Start Your Transformation?
+ + + +Join today and get your first week free. No commitment, no risk. Just results.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
Get Involved
+ + + +Ways to Make a Difference
+ + + +There are many ways to support our mission beyond financial donations. Your time, skills, and voice can make a tremendous impact.
+ + + + +
+
Sign Up to Volunteer
+ + + + +
+
+
+
+
+
+
+
+Get in Touch
+ + + +Let us Work Together
+ + + +Have a project in mind? I would love to hear about it. Drop me a message and let us create something amazing together.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
FAQ
+ + + +Frequently Asked Questions
+ + + +Can\'t find what you\'re looking for? Feel free to contact our support team for personalized assistance.
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
FAQ
+ + + +Frequently Asked Questions
+ + + +Can\'t find what you\'re looking for? Feel free to contact our support team for personalized assistance.
+ + + + +
+
+
+
+
+
+
+
+
+
Frequently Asked Questions
+ + + +Find answers to common questions about our services
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
General Questions
+What services do you offer?
+We offer a comprehensive range of digital services including web design, development, digital marketing, SEO optimization, and ongoing maintenance and support for your website.
+How long does a typical project take?
+Project timelines vary based on complexity. A simple website typically takes 2-4 weeks, while more complex projects with custom functionality may take 6-12 weeks or longer.
+Do you work with clients remotely?
+Yes! We work with clients worldwide through video calls, email, and project management tools. Distance is never an obstacle to delivering exceptional results.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Pricing & Payment
+What are your payment terms?
+We typically require 50% deposit upfront with the remaining balance due upon project completion. For larger projects, we can arrange milestone-based payments.
+Do you offer refunds?
+We offer a satisfaction guarantee. If you are not happy with our work, we will revise it until you are satisfied. Refunds are available within the first week if no substantial work has begun.
+What payment methods do you accept?
+We accept all major credit cards, PayPal, bank transfers, and can accommodate other payment methods upon request for international clients.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Technical Support
+Do you provide ongoing support?
+Yes, we offer various maintenance and support packages to keep your website secure, updated, and running smoothly after launch.
+Will I be able to update my website myself?
+Absolutely! We build on WordPress with user-friendly interfaces. We also provide training so you can confidently manage your content and make updates.
+What if something breaks on my site?
+With our support packages, we monitor your site and address issues quickly. We also maintain regular backups so your data is always protected.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Security & Privacy
+How do you ensure website security?
+We implement industry-standard security measures including SSL certificates, regular updates, secure hosting, firewalls, and malware scanning to protect your site.
+Is my data kept confidential?
+Yes, we take confidentiality seriously. All client data is protected under our privacy policy, and we can sign NDAs for sensitive projects upon request.
+Do you comply with GDPR?
+Yes, we ensure all websites we build are GDPR compliant with proper cookie notices, privacy policies, and data handling procedures in place.
+
+
+
+
+
+
+
+
Frequently Asked Questions
+
+
+
+
+
+
+
+
Frequently Asked Questions
+ + + +Everything you need to know about our platform.
+
+
+
+
+
+
+
+
+
+
FAQ
+ + + +Frequently Asked Questions
+ + + +Find answers to common questions about our products, shipping, and return policies.
+ + + + +
+
+
+
+
+
+
+
+
Frequently Asked Questions
+ + + +Find answers organized by topic
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dive Deeper Into Our Features
+ + + +Explore the powerful capabilities that make our platform the choice of professionals worldwide.
+ + + + +
+
+
+
+
+
+
+
Features
+ + + +Everything You Need
+ + + +Powerful features to help you build better products faster.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Lightning Fast
+ + + +Optimized for speed with lazy loading and efficient code that keeps your site running smoothly.
+
+
+
+
Secure by Default
+ + + +Built with security best practices to keep your data safe and your site protected.
+
+
+
+
Fully Customizable
+ + + +Tailor every aspect to match your brand with extensive customization options.
+
+
+
+
Analytics Built-in
+ + + +Track your performance with built-in analytics and detailed reporting dashboards.
+
+
+
+
Team Collaboration
+ + + +Work together seamlessly with team features, permissions, and real-time collaboration.
+
+
+
+
24/7 Support
+ + + +Get help when you need it with our dedicated support team available around the clock.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Free Shipping
+ + + +Free shipping on all orders over $50. Fast delivery within 3-5 business days.
+
+
+
+
Easy Returns
+ + + +30-day hassle-free returns. Not satisfied? Get a full refund, no questions asked.
+
+
+
+
Secure Payment
+ + + +Your payment information is protected with industry-leading encryption.
+
+
+
+
+
+
+
+
+
+
+
+
Our Classes
+ + + +Train Your Way
+ + + +From high-intensity workouts to mindful yoga, we offer classes for every fitness level and goal.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
HIIT Training
+ + + +High-intensity interval training to maximize calorie burn and boost metabolism.
+ + + +45 min • All Levels
+
+
+
+
Strength Training
+ + + +Build muscle and increase strength with our expert-led weight training sessions.
+ + + +60 min • Intermediate
+
+
+
+
Yoga & Pilates
+ + + +Improve flexibility, balance, and mental clarity with mindful movement practices.
+ + + +60 min • All Levels
+
+
+
+
Group Cycling
+ + + +High-energy indoor cycling with motivating music and inspiring instructors.
+ + + +45 min • All Levels
+
+
+
+
+
+
+
+
+
+
Features
+ + + +Everything You Need to Scale
+ + + +Powerful tools designed to help your team move faster and build better products.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Real-time Analytics
+ + +Hover to learn more
+ +
+
+
+Real-time Analytics
+ + +Track every metric that matters with live dashboards. Get instant insights into user behavior, conversion rates, and performance metrics.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+Team Collaboration
+ + +Hover to learn more
+ +
+
+
+Team Collaboration
+ + +Work together seamlessly with real-time editing, comments, and shared workspaces. Keep everyone aligned and moving fast.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+Automation
+ + +Hover to learn more
+ +
+
+
+Automation
+ + +Automate repetitive tasks and workflows. Set up triggers, actions, and rules that work while you sleep.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
Our Services
+ + + +White-Glove Service at Every Step
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Buyer Representation
+ + +Hover to learn more
+ +
+
+
+Buyer Representation
+ + +Our expert agents guide you through every step of finding and acquiring your perfect property. From initial search to closing, we negotiate on your behalf to secure the best terms.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+Property Valuation
+ + +Hover to learn more
+ +
+
+
+Property Valuation
+ + +Receive accurate, data-driven valuations backed by our deep knowledge of luxury markets. We analyze comparable sales, market trends, and unique property features.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+Global Reach
+ + +Hover to learn more
+ +
+
+
+Global Reach
+ + +Access exclusive listings worldwide through our international network. From New York penthouses to Mediterranean villas, we connect you with extraordinary properties globally.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
Our Focus Areas
+ + + +Where Your Support Goes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Education
+ + + +Building schools and providing scholarships to give children the education they deserve.
+
+
+
+
Clean Water
+ + + +Installing wells and water systems to provide safe drinking water to communities.
+
+
+
+
Healthcare
+ + + +Funding medical clinics and providing essential healthcare services to underserved areas.
+
+
+
+
Economic Empowerment
+ + + +Microloans and vocational training to help families build sustainable livelihoods.
+
+
+
+
+
+
+
+
Everything You Need
+ + + +Powerful features to help you succeed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Lightning Fast
+ + + +Optimized for speed with sub-second load times and efficient resource usage across all devices.
+
+
+
+
+
+
Secure by Default
+ + + +Enterprise-grade security with encryption, regular audits, and compliance with industry standards.
+
+
+
+
+
+
Fully Customizable
+ + + +Tailor every aspect to match your brand with extensive customization options and flexible settings.
+
+
+
+
+
+
Auto Updates
+ + + +Stay current with automatic updates that bring new features and security patches seamlessly.
+
+
+
+
+
+
24/7 Support
+ + + +Round-the-clock expert support to help you whenever you need assistance with any issues.
+
+
+
+
+
+
Analytics Built-in
+ + + +Comprehensive analytics dashboard to track performance and make data-driven decisions.
+
+
+
+
+
+
+
+
Everything You Need
+ + + +Powerful features to help you build better websites, faster.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Lightning Fast
Optimized for performance with lazy loading, minimal CSS, and efficient JavaScript.
Fully Responsive
Every block adapts beautifully to any screen size, from mobile to desktop.
Accessible
Built with WCAG guidelines in mind, ensuring your site is usable by everyone.
Easy to Customize
Adjust colors, spacing, typography, and more using the familiar WordPress interface.
Theme Compatible
Works seamlessly with any WordPress theme that supports the block editor.
Regular Updates
Constantly improved with new features, bug fixes, and WordPress compatibility.
+
+
+
+
+
+
+
Popular Categories
+ + + +Explore Learning Paths
+ + + +Choose from a wide range of categories to find the perfect course for your career goals.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Web Development
+ + + +120+ Courses
+
+
+
+
Data Science
+ + + +85+ Courses
+
+
+
+
Design & UX
+ + + +95+ Courses
+
+
+
+
Business & Marketing
+ + + +200+ Courses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
What We Do
+ + + +Services That Drive Growth
+ + + +From strategy to execution, we help ambitious brands stand out in a crowded marketplace.
+
+
+
+
+
+
+
+
+
0
Projects Completed
0
Industry Awards
+
+
+
+
+
+01
+ + + +Brand Strategy
+ + + +We craft compelling brand identities that resonate with your audience and differentiate you from competitors.
+
+
+
+
+
+02
+ + + +Web Design
+ + + +Beautiful, functional websites that convert visitors into customers and showcase your brand at its best.
+
+
+03
+ + + +Digital Marketing
+ + + +Data-driven campaigns that reach your target audience and deliver measurable business results.
+
+
+
+
+
+
+
+
What I Offer
+ + + +Services
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Product Design
+ + + +End-to-end product design from concept to launch, including user research, wireframing, and high-fidelity prototypes.
+
+
+
+
UI/UX Design
+ + + +Intuitive interfaces and seamless experiences that delight users and achieve business goals.
+
+
+
+
Brand Identity
+ + + +Visual identity systems including logos, color palettes, typography, and brand guidelines.
+
+
+
+
+
+
+
+
Our Practice Areas
+ + + +Comprehensive expertise across key areas to serve your needs.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Business Law
+ + + +Corporate formation, contracts, mergers and acquisitions, and business dispute resolution.
+ + + + +
+
+
+
Real Estate
+ + + +Commercial and residential transactions, zoning, development, and property disputes.
+ + + + +
+
+
+
Litigation
+ + + +Civil litigation, dispute resolution, arbitration, and aggressive courtroom representation.
+ + + + +
+
+
+
Employment Law
+ + + +Workplace compliance, discrimination claims, employment contracts, and HR consulting.
+ + + + +
+
+
+
Estate Planning
+ + + +Wills, trusts, estate administration, and wealth transfer strategies.
+ + + + +
+
+
+
Tax Advisory
+ + + +Tax planning, IRS representation, and strategic tax minimization for individuals and businesses.
+ + + + +
+
+
+
+
+
+
+
Everything You Need to Succeed
+ + + +Powerful features designed to help you work smarter, not harder.
+
+
+
+
+
+
+
+
+Lightning Fast
+ + + +Optimized performance that keeps your team moving fast without slowdowns.
+
+
+
+
+
+
+
+Enterprise Security
+ + + +Bank-level encryption and compliance certifications to protect your data.
+
+
+
+
+
+
+
+Team Collaboration
+ + + +Real-time collaboration tools that keep your entire team in sync.
+
+
+
+
+
+
+
+Advanced Analytics
+ + + +Actionable insights and custom dashboards to track what matters.
+
+
+
+
+
+
+
+Workflow Automation
+ + + +Automate repetitive tasks and focus on what really matters.
+
+
+
+
+Global CDN
+ + + +Lightning-fast delivery from data centers around the world.
+
+
+
+
+
+
+
+
Compare Features
+ + + +Choose the right plan for your needs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The Experience
+ + + +Our Atmosphere
+
+
+
+
+
+
+
+
+
+
Our Work
+ + + +A showcase of our recent projects and creative work
+
+
+
+
+
+
+
+
Trusted By Industry Leaders
+
+
+
+
+
+
+
+
Our Work
+ + + +Featured Projects
+ + + +Explore our portfolio of innovative digital solutions.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Brand Identity
+ + + +Digital Marketing
+
+
Analytics Dashboard
+ + + +Web Application
+
+
E-commerce Platform
+ + + +Online Store
+
+
Mobile App Design
+ + + +iOS & Android
+
+
SaaS Platform
+ + + +Enterprise Software
+
+
Corporate Website
+ + + +Business Solution
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Selected Work
+ + + +Featured Projects
+
+
+
+
+
+
+Luxe Brand Redesign
+ + + +Branding / Web Design
+
+
+
+
+
+TechStart App Launch
+ + + +Digital Marketing / Strategy
+
+
+
+
+
+Eco Fashion Campaign
+ + + +Social Media / Content
+
+
+FinServ Platform
+ + + +UX Design / Development
+
+
+
+
+
+
+
+
+
+
+
+
Featured Listings
+ + + +Exceptional Properties Await
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Portfolio
+ + + +Selected Work
+
+
+
+
+
+
+FinTech Mobile App
+ + + +Product Design / Mobile App
+
+
+
+
+
+SaaS Dashboard Redesign
+ + + +UX Design / Web App
+
+
+
+
+
+E-commerce Experience
+ + + +UI Design / E-commerce
+
+
+Startup Brand Identity
+ + + +Branding / Visual Identity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
info@yourbusiness.com · (555) 123-4567
+ + + + +
+
+
+
+
+
+
+
+
+
+
Buildsomething amazing.
We makewebsitesthat work.
Transform yourcreative vision
Design.Build.Launch.
Everything you need to create stunning websites that convert visitors into customers.
+
+
You need apowerful website
Launch faster with beautiful, conversion-focused designs that adapt to any brand and speak to your audience.
+
+
+
+
Your nextbig ideastarts here.
Our ServicesWhat we do best
We combine strategy, design, and technology to create digital experiences that drive real results for your business.
The Modernapproach
+
+
+
+
+
+
+
+
+We Create
+
+
+
+
+
Award-Winning Creative Studio
+ + + +We Create
Digital Experiences
That Matter
+
+
+
+A full-service creative agency specializing in brand strategy, web design, and digital marketing that drives real results.
+ + + +
+
+
+
+
+
+
+
Strategic growth solutions built for ambitious startups.
We partner with founders and teams to unlock potential, streamline operations, and accelerate sustainable business growth.
+ +
+
+
+
+
+
Build Something Amazing
+ + + +Create stunning websites with powerful blocks designed for modern WordPress.
+ + + + +Elevate Your Space
Thoughtfully designed pieces that transform everyday moments into extraordinary experiences
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Elevate Your Style This Season
+ + + +Discover our curated collection of premium essentials designed for the modern lifestyle. Quality craftsmanship meets contemporary design.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Master New Skills with Expert-Led Courses
+ + + +Join over 100,000 learners worldwide and transform your career with our comprehensive online courses taught by industry professionals.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
500+ Courses
+
+
+
+
Expert Instructors
+
+
+
+
Certificates
+
+
+
+
+
+
+
+
+
+
+
+
TechForward Summit 2026
+ + + +The premier conference for innovators, entrepreneurs, and tech leaders shaping the future of technology.
+ + + +00
Days
00
Hours
00
Min
00
Sec
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The Future of Web Design
+ + + +Join us for the biggest product launch of 2025. Reserve your spot today.
+
+
+
00
Days
00
Hours
00
Min
00
Sec
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Workshops
0
Day Event
0
Attendees
0
Expert Speakers
+
+
+Unleash Your
+
+
+
+
+
Transform Your Body, Transform Your Life
+ + + +Unleash Your
Full Potential
+
+
+
+State-of-the-art equipment, expert trainers, and a supportive community to help you achieve your fitness goals.
+ + + +
+
+
+
+
+
+
+
+
+Discover Your
+
+
+
+
+
Exceptional Properties
+ + + +Discover Your
Dream Residence
+
+
+
+Curating the world\'s most prestigious properties for discerning buyers who demand excellence.
+ + + +
+
+
+
+
+
+
+
+
+Build Better Products
+
+
+
+
+
+
+
+
Build Better Products
Ship Faster
+
+
+
+The all-in-one platform that helps teams collaborate, analyze, and deliver exceptional software experiences.
+ + + +
+
+
+
+
+
+
+
+
+Together We Can
+
+
+
+
+
Making a Difference Since 2010
+ + + +Together We Can
Change Lives
+
+
+
+Join our mission to provide hope, resources, and opportunities to communities in need around the world.
+ + + +
+
+
+
+
+
+
+
+
+Transform Your Vision
+
+
+
+
+
Transform Your Vision
Into Reality
+
+
+
+We help businesses grow with innovative solutions and cutting-edge technology.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Product Designer
+
+
+
+
+
+
+
+
+
Hi, I am Sarah
+ + + +Product Designer
& Creative Director
+
+
+
+I help startups and established brands create beautiful, user-centered digital experiences that drive growth and delight users.
+ + + +
+
+
+
+
+
+
+
+
Connect:
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Trusted Advisors Since 1995
+ + + +Expert Guidance for Your Most Important Decisions
+ + + +We provide strategic counsel to businesses and individuals, helping you navigate complex challenges with confidence and achieve your goals.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
Our Story
+ + + +A Passion for Authentic Flavors
+ + + +Founded by Chef Maria Santos, our restaurant celebrates the rich culinary traditions of the Mediterranean with a modern twist.
+ + + +Every dish tells a story, crafted with locally-sourced ingredients and time-honored techniques passed down through generations. We believe that great food brings people together, creating moments that last a lifetime.
+ + + ++ + + +
+
+
+
+
+
+
+15+
+ + + +Years of Excellence
+
+
+
+
+
+50k+
+ + + +Happy Guests
+
+
+4.9
+ + + +Star Rating
+
+
+
+
+
+Scale Your Business
+
+
+
+
+
+
+
+
Scale Your Business
with Powerful Tools
+
+
+
+The all-in-one platform that helps teams collaborate, automate workflows, and deliver results faster than ever before.
+ + + +
+
+
+
+
+
+
No credit card required. 14-day free trial.
+
+
+
+
+
+
+
+
+
+
+
+
+
Transform Your Digital Experience
+ + + +Elevate your website with stunning visuals, smooth animations, and powerful customization options that adapt to any design vision.
+ + + +
+
+
+
+
+
+
See It In Action
+ + + +Watch how our platform transforms the way you build websites
+ + + + + + + + + + + +No credit card required • Free 14-day trial
+
+
+
+
+
+
+
+
+
+We Create
+
+
+
+
+
Award-Winning Creative Studio
+ + + +We Create
Digital Experiences
That Matter
+
+
+
+A full-service creative agency specializing in brand strategy, web design, and digital marketing that drives real results.
+ + + +
+
+
+
+
+
+
+
+
+
Trusted by Leading Brands
+ + + +
+
VOGUE
+ + + +NIKE
+ + + +SPOTIFY
+ + + +AIRBNB
+
+
+
+
+
+
+
+
+
+
+
+
+
+
What We Do
+ + + +Services That Drive Growth
+ + + +From strategy to execution, we help ambitious brands stand out in a crowded marketplace.
+
+
+
+
+
+
+
+
+
0
Projects Completed
0
Industry Awards
+
+
+
+
+
+01
+ + + +Brand Strategy
+ + + +We craft compelling brand identities that resonate with your audience and differentiate you from competitors.
+
+
+
+
+
+02
+ + + +Web Design
+ + + +Beautiful, functional websites that convert visitors into customers and showcase your brand at its best.
+
+
+03
+ + + +Digital Marketing
+ + + +Data-driven campaigns that reach your target audience and deliver measurable business results.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Selected Work
+ + + +Featured Projects
+
+
+
+
+
+
+Luxe Brand Redesign
+ + + +Branding / Web Design
+
+
+
+
+
+TechStart App Launch
+ + + +Digital Marketing / Strategy
+
+
+
+
+
+Eco Fashion Campaign
+ + + +Social Media / Content
+
+
+FinServ Platform
+ + + +UX Design / Development
+
+
+
+
+
+
+
+
The Team
+ + + +Meet the Creatives
+
+
+
+
+
+
+Alex Rivera
+ + + +Creative Director
+
+
+
+
+
+Jordan Kim
+ + + +Lead Designer
+
+
+
+
+
+Marcus Chen
+ + + +Strategy Director
+
+
+Sophie Taylor
+ + + +Marketing Lead
+
+
+
+
+
+
+
+
Testimonials
+ + + +What Clients Say
+
+
+
+
+
+
+
+
+
+
"They completely transformed our brand. The results exceeded our expectations, and our customers love the new direction."
+ + + +
+
Joey Walsh
+ + + +CEO, Luxe Brands
+
+
+
+
"Working with this team was a game-changer for our startup. They understood our vision and brought it to life beautifully."
+ + + +
+
David Park
+ + + +Founder, TechStart
+
+
+
+
+
+
+
+
+
+
Start a Project
+ + + +Ready to Bring Your Vision to Life?
+ + + +Let us discuss your project and explore how we can help you achieve your goals.
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
hello@creativestudio.com
+
+
+
+
+1 (555) 123-4567
+
+
+
+
123 Design Street, Creative City
+
+
+
+
+
+
+
+
+
+
+
+
+
Elevate Your Style This Season
+ + + +Discover our curated collection of premium essentials designed for the modern lifestyle. Quality craftsmanship meets contemporary design.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Happy Customers
0
Products
0
Countries
0
Rating
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Featured Products
+ + + +Best Sellers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Footwear
+ + + +Premium Sneakers
+ + + +
+
$149
+ + + +$99
+
+
+
Accessories
+ + + +Classic Watch
+ + + +$249
+
+
+
Bags
+ + + +Leather Backpack
+ + + +$189
+
+
+
Eyewear
+ + + +Designer Sunglasses
+ + + +$129
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Free Shipping
+ + + +Free shipping on all orders over $50. Fast delivery within 3-5 business days.
+
+
+
+
Easy Returns
+ + + +30-day hassle-free returns. Not satisfied? Get a full refund, no questions asked.
+
+
+
+
Secure Payment
+ + + +Your payment information is protected with industry-leading encryption.
+
+
+
+
+
+
+
+
Customer Love
+ + + +What Our Customers Say
+
+
+
+
+
+
+
+
+
+
FAQ
+ + + +Frequently Asked Questions
+ + + +Find answers to common questions about our products, shipping, and return policies.
+ + + + +
+
+
+
+
+
+
+
+
Get 15% Off Your First Order
+ + + +Subscribe to our newsletter for exclusive deals, new arrivals, and style inspiration delivered straight to your inbox.
+ + + +
+
+
No spam, unsubscribe anytime. By subscribing you agree to our Privacy Policy.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Master New Skills with Expert-Led Courses
+ + + +Join over 100,000 learners worldwide and transform your career with our comprehensive online courses taught by industry professionals.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
500+ Courses
+
+
+
+
Expert Instructors
+
+
+
+
Certificates
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Students Enrolled
0
Expert Courses
0
Certified Instructors
0
Satisfaction Rate
+
+
+
+
+
+
+
Popular Categories
+ + + +Explore Learning Paths
+ + + +Choose from a wide range of categories to find the perfect course for your career goals.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Web Development
+ + + +120+ Courses
+
+
+
+
Data Science
+ + + +85+ Courses
+
+
+
+
Design & UX
+ + + +95+ Courses
+
+
+
+
Business & Marketing
+ + + +200+ Courses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Featured Courses
+ + + +Top Rated This Month
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
★★★★★ 4.9
+Complete Web Development Bootcamp
+ + + +Dr. Angela Yu • 65 hours
+ + + +
+
$89.99
+ + + +$199.99
+
+
+
+
+
+
+
+
+
+
+
★★★★★ 4.8
+Python for Data Science & Machine Learning
+ + + +Jose Portilla • 45 hours
+ + + +
+
$94.99
+ + + +$179.99
+
+
+
+
+
+
+
+
+
+
+
★★★★★ 4.9
+UI/UX Design Masterclass
+ + + +Sarah Chen • 38 hours
+ + + +
+
$79.99
+ + + +$149.99
+
+
+
+
+
+
+
+
Expert Instructors
+ + + +Learn from Industry Leaders
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dr. Angela Yu
+ + + +Web Development
+
+
Jose Portilla
+ + + +Data Science
+
+
Sarah Chen
+ + + +UI/UX Design
+
+
Michael Roberts
+ + + +Marketing
+
+
+
+
+
+
+
+
Student Success
+ + + +What Our Students Say
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
★★★★★
+ + + +"This platform completely changed my career. I went from knowing nothing about coding to landing my first developer job in just 6 months. The instructors are amazing!"
+ + + +
+
+
Alex Thompson
+ + + +Frontend Developer at Google
+
+
+
+
+
★★★★★
+ + + +"The data science course was incredibly comprehensive. I learned Python, machine learning, and got hands-on experience with real projects. Worth every penny!"
+ + + +
+
+
Emily Rodriguez
+ + + +Data Analyst at Amazon
+
+
+
+
+
★★★★★
+ + + +"As someone who switched careers at 35, these courses gave me the confidence and skills I needed. Now I am a senior UX designer. It is never too late to learn!"
+ + + +
+
+
Marcus Johnson
+ + + +Senior UX Designer at Microsoft
+
+
+
+
+
Start Your Learning Journey Today
+ + + +Join our community of learners and unlock your potential. Get unlimited access to all courses with our subscription plans.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
TechForward Summit 2026
+ + + +The premier conference for innovators, entrepreneurs, and tech leaders shaping the future of technology.
+ + + +00
Days
00
Hours
00
Min
00
Sec
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
World-Class Speakers
0
Days of Innovation
0
Sessions & Workshops
0
Expected Attendees
+
+
+
+
+
+
+
+
+
+
+
Featured Speakers
+ + + +Learn from Industry Leaders
+ + + +Hear from visionaries who are transforming industries and shaping the future of technology.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
James Chen
+ + + +CEO, TechVenture Labs
+ + + +AI & Machine Learning
+
+
+
Sarah Miller
+ + + +VP Engineering, CloudScale
+ + + +Cloud Architecture
+
+
+
Michael Roberts
+ + + +Founder, DataDriven
+ + + +Data Science
+
+
+
Emily Zhang
+ + + +CTO, SecureNet
+ + + +Cybersecurity
+
+
+
+
+
+
+
+
+
+
Event Schedule
+ + + +Three Days of Innovation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Opening Keynote: The Future of Tech
+ + + +James Chen • Main Stage
+9:00 AM
+
+
+
+
+
+
+
AI & Machine Learning Workshop
+ + + +Panel Discussion • Workshop Room A
+11:00 AM
+
+
+
+
+
+
+
Networking Lunch
+ + + +Exhibition Hall
+12:30 PM
+
+
+
+
+
+
+
Welcome Reception & Demo Showcase
+ + + +Startup Demos • Rooftop Terrace
+6:00 PM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cloud Architecture at Scale
+ + + +Sarah Miller • Main Stage
+9:00 AM
+
+
+
+
+
+
+
Startup Pitch Competition
+ + + +10 Startups • Innovation Stage
+2:00 PM
+
+
+
+
+
+
+
VIP Dinner & Awards Ceremony
+ + + +Grand Ballroom
+7:00 PM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cybersecurity in the AI Era
+ + + +Emily Zhang • Main Stage
+9:00 AM
+
+
+
+
+
+
+
Closing Keynote: Building Tomorrow
+ + + +All Speakers • Main Stage
+4:00 PM
+
+
+
+
+
+
+
+
Tickets
+ + + +Secure Your Spot
+ + + +Early bird pricing available for a limited time. Choose the pass that fits your needs.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
General Pass
+ + + +
+
$
+ + + +499
+Early Bird Price
+ + + ++ + + +
+
3-day conference access
+ + + +All keynotes & sessions
+ + + +Networking events
+ + + +Conference materials
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
VIP Pass
+ + + +
+
$
+ + + +899
+Early Bird Price
+ + + ++ + + +
+
Everything in General
+ + + +VIP lounge access
+ + + +Speaker meet & greet
+ + + +VIP dinner & awards
+ + + +Priority seating
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Corporate Pass
+ + + +
+
$
+ + + +3,999
+5 Team Members
+ + + ++ + + +
+
5 VIP passes
+ + + +Dedicated account manager
+ + + +Private meeting room
+ + + +Logo on event materials
+
+
+
Our Sponsors
+ + + +
+
TECHCORP
+ + + +CLOUDIFY
+ + + +DATAFLOW
+ + + +NEXUSAI
+ + + +SCALABLE
+
+
+
+
+
Ready to Join the Future?
+ + + +Do not miss the most anticipated tech event of 2026. Limited seats available - secure yours today!
+ + + +
+
+
+
+
+Unleash Your
+
+
+
+
+
Transform Your Body, Transform Your Life
+ + + +Unleash Your
Full Potential
+
+
+
+State-of-the-art equipment, expert trainers, and a supportive community to help you achieve your fitness goals.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Active Members
0
Expert Trainers
0
Weekly Classes
0
Years Experience
+
+
+
+
+
+
+
+
+
+
+
Our Classes
+ + + +Train Your Way
+ + + +From high-intensity workouts to mindful yoga, we offer classes for every fitness level and goal.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
HIIT Training
+ + + +High-intensity interval training to maximize calorie burn and boost metabolism.
+ + + +45 min • All Levels
+
+
+
+
Strength Training
+ + + +Build muscle and increase strength with our expert-led weight training sessions.
+ + + +60 min • Intermediate
+
+
+
+
Yoga & Pilates
+ + + +Improve flexibility, balance, and mental clarity with mindful movement practices.
+ + + +60 min • All Levels
+
+
+
+
Group Cycling
+ + + +High-energy indoor cycling with motivating music and inspiring instructors.
+ + + +45 min • All Levels
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Personal Training
+ + + +One-on-One Coaching
+ + + +Get personalized attention and a customized workout plan designed specifically for your goals, fitness level, and schedule.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Custom workout plans
+
+
+
+
Nutrition guidance
+
+
+
+
Progress tracking
+
+
+
+
Flexible scheduling
+
+
+
+
+
+
+
+
Membership Plans
+ + + +Choose Your Plan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Basic
+ + + +Perfect for getting started
+ + + +
+
$
+ + + +29
+ + + +/month
++ + + +
+
Gym access (6am-10pm)
+ + + +Basic equipment
+ + + +Locker room access
+ + + +Free WiFi
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Premium
+ + + +Everything you need to succeed
+ + + +
+
$
+ + + +59
+ + + +/month
++ + + +
+
24/7 gym access
+ + + +All equipment & classes
+ + + +1 PT session/month
+ + + +Sauna & spa access
+ + + +Guest passes (2/month)
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Elite
+ + + +The ultimate fitness experience
+ + + +
+
$
+ + + +99
+ + + +/month
++ + + +
+
Everything in Premium
+ + + +4 PT sessions/month
+ + + +Nutrition coaching
+ + + +Recovery treatments
+ + + +Priority booking
+
+
+
+
+
+
+
+
Expert Trainers
+ + + +Meet Our Team
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Alex Rodriguez
+ + + +Head Trainer
+
+
Maya Johnson
+ + + +Yoga & Pilates
+
+
Chris Martinez
+ + + +Strength Coach
+
+
Sarah Kim
+ + + +Cycling & HIIT
+
+
+
+
+
Ready to Start Your Transformation?
+ + + +Join today and get your first week free. No commitment, no risk. Just results.
+ + + +
+
+
+
+
+Discover Your
+
+
+
+
+
Exceptional Properties
+ + + +Discover Your
Dream Residence
+
+
+
+Curating the world\'s most prestigious properties for discerning buyers who demand excellence.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
About Us
+ + + +A Legacy of Excellence in Luxury Real Estate
+ + + +For over two decades, we have been the trusted advisors for clients seeking extraordinary properties. Our deep expertise in luxury markets, combined with unparalleled discretion and personalized service, sets us apart.
+ + + +We understand that finding the perfect home is about more than square footage and amenities. It is about discovering a residence that reflects your lifestyle, aspirations, and vision for the future.
+ + + +
+
+
+
+
+
+
0
In Sales Volume
0
Properties Sold
+
+
+
+
+
+
+
+
+
+
+
+
Featured Listings
+ + + +Exceptional Properties Await
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Our Services
+ + + +White-Glove Service at Every Step
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Buyer Representation
+ + +Hover to learn more
+ +
+
+
+Buyer Representation
+ + +Our expert agents guide you through every step of finding and acquiring your perfect property. From initial search to closing, we negotiate on your behalf to secure the best terms.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+Property Valuation
+ + +Hover to learn more
+ +
+
+
+Property Valuation
+ + +Receive accurate, data-driven valuations backed by our deep knowledge of luxury markets. We analyze comparable sales, market trends, and unique property features.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+Global Reach
+ + +Hover to learn more
+ +
+
+
+Global Reach
+ + +Access exclusive listings worldwide through our international network. From New York penthouses to Mediterranean villas, we connect you with extraordinary properties globally.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
Testimonials
+ + + +What Our Clients Say
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"The team made finding our dream home an absolute pleasure. Their knowledge of the luxury market is unmatched, and they found us a property that exceeded all our expectations."
+ + + +
+
+
Michael Richardson
+ + + +Beverly Hills Buyer
+
+
+
+
+
"Selling our estate was a seamless experience. They positioned our property perfectly in the market and attracted qualified buyers from around the world. Truly exceptional service."
+ + + +
+
+
Sarah Chen
+ + + +Bel Air Seller
+
+
+
+
+
"As international buyers, we relied heavily on their expertise. They navigated complex legal requirements and found us a stunning oceanfront property that serves as our perfect retreat."
+ + + +
+
+
David Laurent
+ + + +International Buyer
+
+
+
+
+
+
+
+
+
+
+
Contact Us
+ + + +Begin Your Journey to Extraordinary Living
+ + + +Whether you are searching for your dream home or considering selling your property, our team is ready to provide the exceptional service you deserve.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+1 (310) 555-0100
+
+
+
+
inquiries@luxuryestates.com
+
+
+
+
9876 Wilshire Blvd, Beverly Hills, CA 90210
+
+
Schedule a Consultation
+ + + + +
+
+
+Build Better Products
+
+
+
+
+
+
+
+
Build Better Products
Ship Faster
+
+
+
+The all-in-one platform that helps teams collaborate, analyze, and deliver exceptional software experiences.
+ + + +
+
+
+
+
+
+
+
+
TRUSTED BY INNOVATIVE TEAMS WORLDWIDE
+ + + +
+
STRIPE
+ + + +NOTION
+ + + +FIGMA
+ + + +VERCEL
+ + + +LINEAR
+
+
+
+
+
+
+
+
Features
+ + + +Everything You Need to Scale
+ + + +Powerful tools designed to help your team move faster and build better products.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Real-time Analytics
+ + +Hover to learn more
+ +
+
+
+Real-time Analytics
+ + +Track every metric that matters with live dashboards. Get instant insights into user behavior, conversion rates, and performance metrics.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+Team Collaboration
+ + +Hover to learn more
+ +
+
+
+Team Collaboration
+ + +Work together seamlessly with real-time editing, comments, and shared workspaces. Keep everyone aligned and moving fast.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+Automation
+ + +Hover to learn more
+ +
+
+
+Automation
+ + +Automate repetitive tasks and workflows. Set up triggers, actions, and rules that work while you sleep.
+ + +Learn more →
+ +
+
+
+
+
+
+
+
+
+
+
Why Choose Us
+ + + +Built for Teams Who Ship
+ + + +We understand the challenges of modern product development. That is why we built a platform that gets out of your way and lets you focus on what matters.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Uptime SLA
0
Avg Response
0
Active Users
0
Support
+
+
+
+
+
+
+
+
Product Showcase
+ + + +See It in Action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Pricing
+ + + +Simple, Transparent Pricing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Starter
+ + + +
+
$
+ + + +0
+ + + +/month
++ + + +
+
Up to 3 team members
+ + + +Basic analytics
+ + + +1GB storage
+ + + +Community support
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Pro
+ + + +
+
$
+ + + +29
+ + + +/month
++ + + +
+
Unlimited team members
+ + + +Advanced analytics
+ + + +100GB storage
+ + + +Priority support
+ + + +API access
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Enterprise
+ + + +
+
Custom
++ + + +
+
Everything in Pro
+ + + +Custom integrations
+ + + +Unlimited storage
+ + + +Dedicated support
+ + + +SLA guarantee
+
+
+
Ready to Transform Your Workflow?
+ + + +Join thousands of teams already using our platform to ship better products faster. Start your free trial today.
+ + + +
+
+
+
+
+
+
+
+
+Together We Can
+
+
+
+
+
Making a Difference Since 2010
+ + + +Together We Can
Change Lives
+
+
+
+Join our mission to provide hope, resources, and opportunities to communities in need around the world.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Lives Changed
0
Countries Reached
0
Volunteers
0
Raised
+
+
+
+
+
+
+
+
+
Our Mission
+ + + +Empowering Communities, One Life at a Time
+ + + +We believe everyone deserves access to clean water, education, healthcare, and economic opportunity. Through sustainable programs and community partnerships, we work to break the cycle of poverty.
+ + + +Our approach focuses on long-term solutions that empower communities to thrive independently. We invest in local leaders, provide training and resources, and measure our impact to ensure every dollar makes a difference.
+ + + + +
+
+
+
+
+
+
+
+
Our Focus Areas
+ + + +Where Your Support Goes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Education
+ + + +Building schools and providing scholarships to give children the education they deserve.
+
+
+
+
Clean Water
+ + + +Installing wells and water systems to provide safe drinking water to communities.
+
+
+
+
Healthcare
+ + + +Funding medical clinics and providing essential healthcare services to underserved areas.
+
+
+
+
Economic Empowerment
+ + + +Microloans and vocational training to help families build sustainable livelihoods.
+
+
+
+
+
+
+
+
Current Campaign
+ + + +Help Us Reach Our Goal
+ + + +We are building 10 new schools in rural communities. Every donation brings us closer to making education accessible to 5,000 more children.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Success Stories
+ + + +Real Impact, Real Stories
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Maria\'s Journey to Self-Sufficiency
+ + + +"Thanks to the microloan program, I was able to start my own tailoring business. Now I can provide for my children and send them to school. This organization gave me hope when I had none."
+ + + +— Maria, Guatemala
+
+
+
+
Clean Water for Kibera Village
+ + + +"Before the well was built, we walked 3 miles every day for water. Now our children are healthier and can focus on their education instead of carrying water."
+ + + +— Village Elder, Kenya
+
+
+
+
First in Her Family to Graduate
+ + + +"The scholarship changed everything. I became the first person in my family to finish high school. Now I am studying to become a doctor so I can help my community."
+ + + +— Amara, Nigeria
+
+
+
+
+
+
+
+
+
+
Get Involved
+ + + +Ways to Make a Difference
+ + + +There are many ways to support our mission beyond financial donations. Your time, skills, and voice can make a tremendous impact.
+ + + + +
+
Sign Up to Volunteer
+ + + + +
+
+
+
+
Every Gift Creates Ripples of Change
+ + + +Your donation today will transform lives for generations to come. Together, we can build a world where everyone has the opportunity to thrive.
+ + + +
+
+
+
+
+
+
+
+
+
+
+Product Designer
+
+
+
+
+
+
+
+
+
Hi, I am Sarah
+ + + +Product Designer
& Creative Director
+
+
+
+I help startups and established brands create beautiful, user-centered digital experiences that drive growth and delight users.
+ + + +
+
+
+
+
+
+
+
+
Connect:
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
Previously worked with
+ + + +
+Google
+ + + +
Spotify
+ + + +Airbnb
+ + + +Stripe
+ + + +Notion
+
+
+
+
+
+
+
+
+
+
About Me
+ + + +Designing with Purpose, Creating with Passion
+ + + +With over 10 years of experience in product design, I have helped companies ranging from early-stage startups to Fortune 500 companies create meaningful digital experiences.
+ + + +I believe great design is invisible - it should feel intuitive and delightful without getting in the way. My approach combines user research, strategic thinking, and pixel-perfect execution to deliver results that matter.
+ + + +When not designing, you will find me mentoring aspiring designers, speaking at conferences, or exploring hiking trails with my camera.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Years Experience
0
Projects Delivered
0
Happy Clients
0
Design Awards
+
+
+
+
+
+
+
What I Offer
+ + + +Services
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Product Design
+ + + +End-to-end product design from concept to launch, including user research, wireframing, and high-fidelity prototypes.
+
+
+
+
UI/UX Design
+ + + +Intuitive interfaces and seamless experiences that delight users and achieve business goals.
+
+
+
+
Brand Identity
+ + + +Visual identity systems including logos, color palettes, typography, and brand guidelines.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Portfolio
+ + + +Selected Work
+
+
+
+
+
+
+FinTech Mobile App
+ + + +Product Design / Mobile App
+
+
+
+
+
+SaaS Dashboard Redesign
+ + + +UX Design / Web App
+
+
+
+
+
+E-commerce Experience
+ + + +UI Design / E-commerce
+
+
+Startup Brand Identity
+ + + +Branding / Visual Identity
+
+
+
+
+
+
+
+
Kind Words
+ + + +What Clients Say
+
+
+
+
+
+
+
+"Sarah has an incredible ability to understand complex problems and translate them into elegant, user-friendly solutions. She transformed our product completely."
+ + + +
+
+
Jason Miller
+ + + +CEO, TechVenture
+
+
+
+"Working with Sarah was a dream. She is not just a designer but a true partner who cares deeply about the success of your product. Highly recommended!"
+ + + +
+
+
Lisa Chen
+ + + +Product Lead, InnovateCo
+
+
+
+
+
+
+
+
+Get in Touch
+ + + +Let us Work Together
+ + + +Have a project in mind? I would love to hear about it. Drop me a message and let us create something amazing together.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Trusted Advisors Since 1995
+ + + +Expert Guidance for Your Most Important Decisions
+ + + +We provide strategic counsel to businesses and individuals, helping you navigate complex challenges with confidence and achieve your goals.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Years Experience
0
Cases Resolved
0
Client Satisfaction
0
Expert Partners
+
+
+
+
+
+
+
Our Practice Areas
+ + + +Comprehensive expertise across key areas to serve your needs.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Business Law
+ + + +Corporate formation, contracts, mergers and acquisitions, and business dispute resolution.
+ + + + +
+
+
+
Real Estate
+ + + +Commercial and residential transactions, zoning, development, and property disputes.
+ + + + +
+
+
+
Litigation
+ + + +Civil litigation, dispute resolution, arbitration, and aggressive courtroom representation.
+ + + + +
+
+
+
Employment Law
+ + + +Workplace compliance, discrimination claims, employment contracts, and HR consulting.
+ + + + +
+
+
+
Estate Planning
+ + + +Wills, trusts, estate administration, and wealth transfer strategies.
+ + + + +
+
+
+
Tax Advisory
+ + + +Tax planning, IRS representation, and strategic tax minimization for individuals and businesses.
+ + + + +
+
+
+
+
+
+
+
+
+
+
Why Clients Choose Us
+ + + +We combine deep expertise with personalized service to deliver exceptional outcomes for every client.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Proven Track Record
+ + + +Over 30 years of successful outcomes for clients across industries.
+
+
+
+
+
+
Personalized Attention
+ + + +Direct access to senior partners who personally handle your matters.
+
+
+
+
+
+
Transparent Communication
+ + + +Clear updates and honest advice throughout your engagement.
+
+
+
+
+
+
Results-Driven Approach
+ + + +Focused strategies designed to achieve your specific objectives.
+
+
+
+
+
+
+
+
+
Our Leadership Team
+ + + +Experienced professionals dedicated to your success.
+
+
+
+
+
+
+
+
+
+
+
+
Robert Mitchell
+ + + +Managing Partner
+ + + +Harvard Law, 25+ years in corporate law and complex litigation.
+
+
Sarah Williams
+ + + +Senior Partner, Real Estate
+ + + +Yale Law, specializing in commercial real estate and development.
+
+
Michael Chen
+ + + +Senior Partner, Tax Advisory
+ + + +Stanford Law, CPA with expertise in tax strategy and IRS matters.
+
+
+
+
+
+
+
+
What Our Clients Say
+
+
+
+
+
+
+
+
+
"They handled our company merger with exceptional skill and attention to detail. Their guidance was invaluable throughout the entire process."
+ + + +
+
+
Thomas Anderson
+ + + +CEO, Anderson Industries
+
+
+
"Professional, responsive, and truly invested in our success. They have been our trusted advisors for over a decade now."
+ + + +
+
+
Patricia Reynolds
+ + + +Managing Director, Reynolds Group
+
+
+
+
+
+
+
+
Frequently Asked Questions
+
+
+
+
+
+
+
+
+
+
+
Schedule Your Free Consultation
+ + + +Take the first step toward resolving your legal matter. Contact us today to schedule a confidential consultation with one of our experienced attorneys.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
123 Legal Plaza, Suite 500, Business City, ST 12345
+
+
+
+
(555) 123-4567
+
+
+
+
contact@professionalfirm.com
+
+
+
+
Monday - Friday: 8:30 AM - 6:00 PM
+
+
+
+
Request a Consultation
+ + + + +
+
+Where Every Meal
+
+
+
+
+Est. 2010 - Farm to Table Dining
+ + + +Where Every Meal
Becomes a Memory
+
+
+
+Experience the finest seasonal ingredients crafted with passion and served with warmth in the heart of downtown.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
Our Story
+ + + +A Passion for Authentic Flavors
+ + + +Founded by Chef Maria Santos, our restaurant celebrates the rich culinary traditions of the Mediterranean with a modern twist.
+ + + +Every dish tells a story, crafted with locally-sourced ingredients and time-honored techniques passed down through generations. We believe that great food brings people together, creating moments that last a lifetime.
+ + + ++ + + +
+
+
+
+
+
+
+15+
+ + + +Years of Excellence
+
+
+
+
+
+50k+
+ + + +Happy Guests
+
+
+4.9
+ + + +Star Rating
+
+
+
+
+
+
+
+
+
+
+
Chef Favorites
+ + + +Signature Dishes
+ + + +Our most beloved creations, made with the freshest seasonal ingredients.
+
+
+
+
+
+
+
+
+
+
+
+Herb-Crusted Salmon
+ + + +$34
+Wild-caught salmon with lemon herb crust, served with seasonal vegetables and saffron risotto.
+
+
+
+
+
+
+
+
+
+
+Prime Beef Tenderloin
+ + + +$48
+Aged tenderloin with red wine reduction, truffle mashed potatoes, and grilled asparagus.
+
+
+
+
+
+
+
+Lobster Risotto
+ + + +$42
+Maine lobster tail atop creamy Arborio rice with saffron, white wine, and fresh herbs.
+
+
+
+
+
+
+
+
+
+
+
The Experience
+ + + +Our Atmosphere
+
+
+
+
+
+
+
+
+
Reviews
+ + + +What Our Guests Say
+
+
+
+
+
+
+★★★★★
+ + + +"An unforgettable dining experience! The lobster risotto was pure perfection. Will definitely be back."
+ + + +- Michael R., via Google
+
+
+
+
+
+★★★★★
+ + + +"We celebrated our anniversary here and it was magical. The service was impeccable and the food was outstanding."
+ + + +- Sarah T., via Yelp
+
+
+★★★★★
+ + + +"Best restaurant in the city, hands down. The chef truly understands how to bring out the best in each ingredient."
+ + + +- James L., via TripAdvisor
+
+
+
+
+
+
+
+
+
+
Visit Us
+ + + +Location & Hours
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Address
+ + + +456 Culinary Lane
Downtown District, City 12345
+
+
+
+
+
+
+
+
+Hours
+ + + +Tue - Thu: 5:00 PM - 10:00 PM
Fri - Sat: 5:00 PM - 11:00 PM
Sun: 4:00 PM - 9:00 PM
Monday: Closed
+
+
+
+
+
+Reservations
+ + + +(555) 987-6543
+
+
+
+
+
+Ready for an Unforgettable Evening?
+ + + +Reserve your table today and let us create a memorable dining experience for you and your guests.
+ + + +
+
+
+
+
+
+
+
+Scale Your Business
+
+
+
+
+
+
+
+
Scale Your Business
with Powerful Tools
+
+
+
+The all-in-one platform that helps teams collaborate, automate workflows, and deliver results faster than ever before.
+ + + +
+
+
+
+
+
+
No credit card required. 14-day free trial.
+
+
+
Trusted by 10,000+ companies worldwide
+ + + +
+
Acme Corp
+ + + +TechFlow
+ + + +Innovate Inc
+ + + +DataStream
+ + + +CloudBase
+
+
+
+
+
+
+
+
Everything You Need to Succeed
+ + + +Powerful features designed to help you work smarter, not harder.
+
+
+
+
+
+
+
+
+Lightning Fast
+ + + +Optimized performance that keeps your team moving fast without slowdowns.
+
+
+
+
+
+
+
+Enterprise Security
+ + + +Bank-level encryption and compliance certifications to protect your data.
+
+
+
+
+
+
+
+Team Collaboration
+ + + +Real-time collaboration tools that keep your entire team in sync.
+
+
+
+
+
+
+
+Advanced Analytics
+ + + +Actionable insights and custom dashboards to track what matters.
+
+
+
+
+
+
+
+Workflow Automation
+ + + +Automate repetitive tasks and focus on what really matters.
+
+
+
+
+Global CDN
+ + + +Lightning-fast delivery from data centers around the world.
+
+
+
+
+
+
+
+
Trusted by Growing Companies
+ + + +See the impact we have made together
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0
Active Users
0
Uptime SLA
0
Integrations
0
Support
+
+
+
+
+
+
+
What Our Customers Say
+ + + +Join thousands of satisfied customers who have transformed their workflow.
+
+
+
+
+
+
+
+★★★★★
+ + + +"This platform completely transformed how our team collaborates. We have seen a 40% increase in productivity since switching."
+ + + +
+
+
Sarah Chen
+ + + +VP of Operations, TechCorp
+
+
+
+
+
+
+★★★★★
+ + + +"The automation features alone have saved us countless hours every week. Best investment we have made this year."
+ + + +
+
+
Marcus Johnson
+ + + +CEO, StartupFlow
+
+
+
+★★★★★
+ + + +"Outstanding customer support and a product that just works. Our team adopted it instantly with zero learning curve."
+ + + +
+
+
Emily Rodriguez
+ + + +Director, Digital Agency
+
+
+
+
+
+
+
+
Simple, Transparent Pricing
+ + + +Choose the plan that fits your needs. Upgrade or downgrade anytime.
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
Starter
+ + + +Perfect for individuals and small teams getting started.
+ + + +$19/month
+ + + ++ + + +
-
+
- Up to 5 team members + + + +
- 10GB storage + + + +
- Basic analytics + + + +
- Email support +
+
+
+
+ + + +
Professional
+ + + +For growing teams that need more power and flexibility.
+ + + +$49/month
+ + + ++ + + +
-
+
- Up to 20 team members + + + +
- 100GB storage + + + +
- Advanced analytics + + + +
- Priority support + + + +
- Custom integrations +
+
+ + + +
Enterprise
+ + + +For large organizations with advanced needs and custom requirements.
+ + + +$149/month
+ + + ++ + + +
-
+
- Unlimited team members + + + +
- Unlimited storage + + + +
- Custom analytics + + + +
- 24/7 dedicated support + + + +
- SLA guarantee +
+
+
+
+
+
+
+
Frequently Asked Questions
+ + + +Everything you need to know about our platform.
+
+
+
+
+
+
Ready to Get Started?
+ + + +Join thousands of teams already using our platform to work smarter.
+ + + +
+
+
+
+
+
+
No credit card required. 14-day free trial.
+
+
+
+
+
+
+
+',
+);
diff --git a/patterns/modal/modal-video-cta.php b/patterns/modal/modal-video-cta.php
new file mode 100644
index 0000000..d93c842
--- /dev/null
+++ b/patterns/modal/modal-video-cta.php
@@ -0,0 +1,73 @@
+ __( 'Video CTA Modal', 'airo-wp' ),
+ 'categories' => array( 'airo-wp-modal' ),
+ 'viewportWidth' => 1200,
+ 'content' => '
+
+
+
+
+
+
Click the button below to trigger the modal:
+ + + + +
+
+
+
+
+
+
+',
+);
diff --git a/patterns/pricing/pricing-cards.php b/patterns/pricing/pricing-cards.php
new file mode 100644
index 0000000..3d55870
--- /dev/null
+++ b/patterns/pricing/pricing-cards.php
@@ -0,0 +1,47 @@
+ __( 'Pricing Cards', 'airo-wp' ),
+ 'categories' => array( 'airo-wp-pricing' ),
+ 'viewportWidth' => 1200,
+ 'content' => '
+
+
+
+
+
+
+
+
Simple, Transparent Pricing
+ + + +Choose the plan that fits your needs. Upgrade or downgrade anytime.
+
+
+
+
+
+
+
Starter
$9/month
Perfect for individuals and small projects getting started.
+
+
Most Popular
+
+
+
+Professional
$29/month
For growing teams that need more power and flexibility.
+
+
Enterprise
$99/month
For large organizations with advanced needs and support.
+
+
+
+
+
+
+
+
+
Choose Your Plan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Basic
+ + + +$19/mo
+ + + + +
+
Pro
+ + + +$49/mo
+ + + + +
+
+
+
+
+
+
+
+
+
Basic
+ + + +$15/mo
+ + + +Save $48/year
+ + + + +
+
Pro
+ + + +$39/mo
+ + + +Save $120/year
+ + + + +
+
+
+
+
+
+
+
Tickets
+ + + +Secure Your Spot
+ + + +Early bird pricing available for a limited time. Choose the pass that fits your needs.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
General Pass
+ + + +
+
$
+ + + +499
+Early Bird Price
+ + + ++ + + +
+
3-day conference access
+ + + +All keynotes & sessions
+ + + +Networking events
+ + + +Conference materials
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
VIP Pass
+ + + +
+
$
+ + + +899
+Early Bird Price
+ + + ++ + + +
+
Everything in General
+ + + +VIP lounge access
+ + + +Speaker meet & greet
+ + + +VIP dinner & awards
+ + + +Priority seating
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Corporate Pass
+ + + +
+
$
+ + + +3,999
+5 Team Members
+ + + ++ + + +
+
5 VIP passes
+ + + +Dedicated account manager
+ + + +Private meeting room
+ + + +Logo on event materials
+
+
+
+
+
+
+
+
Membership Plans
+ + + +Choose Your Plan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Basic
+ + + +Perfect for getting started
+ + + +
+
$
+ + + +29
+ + + +/month
++ + + +
+
Gym access (6am-10pm)
+ + + +Basic equipment
+ + + +Locker room access
+ + + +Free WiFi
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Premium
+ + + +Everything you need to succeed
+ + + +
+
$
+ + + +59
+ + + +/month
++ + + +
+
24/7 gym access
+ + + +All equipment & classes
+ + + +1 PT session/month
+ + + +Sauna & spa access
+ + + +Guest passes (2/month)
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Elite
+ + + +The ultimate fitness experience
+ + + +
+
$
+ + + +99
+ + + +/month
++ + + +
+
Everything in Premium
+ + + +4 PT sessions/month
+ + + +Nutrition coaching
+ + + +Recovery treatments
+ + + +Priority booking
+
+
+
+
+
+
+
+
Pricing
+ + + +Simple, Transparent Pricing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Starter
+ + + +
+
$
+ + + +0
+ + + +/month
++ + + +
+
Up to 3 team members
+ + + +Basic analytics
+ + + +1GB storage
+ + + +Community support
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Pro
+ + + +
+
$
+ + + +29
+ + + +/month
++ + + +
+
Unlimited team members
+ + + +Advanced analytics
+ + + +100GB storage
+ + + +Priority support
+ + + +API access
+
+
+
+
+
+
+ + + +
+
+
+
+
+
Enterprise
+ + + +
+
Custom
++ + + +
+
Everything in Pro
+ + + +Custom integrations
+ + + +Unlimited storage
+ + + +Dedicated support
+ + + +SLA guarantee
+
+
+
+
+
+
+
+
Simple, Transparent Pricing
+ + + +Choose the plan that fits your needs. Upgrade or downgrade anytime.
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
Starter
+ + + +Perfect for individuals and small teams getting started.
+ + + +$19/month
+ + + ++ + + +
-
+
- Up to 5 team members + + + +
- 10GB storage + + + +
- Basic analytics + + + +
- Email support +
+
+
+
+ + + +
Professional
+ + + +For growing teams that need more power and flexibility.
+ + + +$49/month
+ + + ++ + + +
-
+
- Up to 20 team members + + + +
- 100GB storage + + + +
- Advanced analytics + + + +
- Priority support + + + +
- Custom integrations +
+
+ + + +
Enterprise
+ + + +For large organizations with advanced needs and custom requirements.
+ + + +$149/month
+ + + ++ + + +
-
+
- Unlimited team members + + + +
- Unlimited storage + + + +
- Custom analytics + + + +
- 24/7 dedicated support + + + +
- SLA guarantee +
+
+
+
+
+
+
+
Pricing
+ + + +Choose Your Plan
+ + + +Save 20% with annual billing. All plans include a 14-day free trial.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + +
Starter
+ + + +
+
$19
+ + + +/month
+Perfect for individuals and small projects.
+ + + ++ + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + + + +
Professional
+ + + +
+
$49
+ + + +/month
+For growing teams that need more power.
+ + + ++ + + + + + + + +
+
+
+
+
+
+ + + + + + + + +
Enterprise
+ + + +
+
$99
+ + + +/month
+For large organizations with custom needs.
+ + + ++ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + +
Starter
+ + + +
+
$15
+ + + +/month
+ + +Billed annually at $180/year
+ + + ++ + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + + + +
Professional
+ + + +
+
$39
+ + + +/month
+ + +Billed annually at $468/year
+ + + ++ + + + + + + + +
+
+
+
+
+
+ + + + + + + + +
Enterprise
+ + + +
+
$79
+ + + +/month
+ + +Billed annually at $948/year
+ + + ++ + + + + + + + +
+
+
+
+
+
+
+
What We Offer
+ + + +Our Services
+ + + +Comprehensive solutions tailored to help your business grow and succeed in the digital landscape.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Web Development
+ + + +Custom websites and web applications built with modern technologies for optimal performance.
+ + + + +
+
+
+
UI/UX Design
+ + + +Beautiful, intuitive interfaces designed with user experience at the forefront.
+ + + + +
+
+
+
Digital Marketing
+ + + +Data-driven strategies to increase your online presence and drive conversions.
+ + + + +
+
+
+
+
+
+
+
The Team
+ + + +Meet the Creatives
+
+
+
+
+
+
+Alex Rivera
+ + + +Creative Director
+
+
+
+
+
+Jordan Kim
+ + + +Lead Designer
+
+
+
+
+
+Marcus Chen
+ + + +Strategy Director
+
+
+Sophie Taylor
+ + + +Marketing Lead
+
+
+
+
+
+
+
+
Get to Know Us
+ + + +Hover over our team members to learn more
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Chris Anderson
+ + +Product Manager
+ +
+
+
+Chris brings 10 years of product experience from leading tech companies. When not building products, you can find him hiking or playing guitar.
+ + + + +
+
+
+
+
+
+
+Maria Santos
+ + +Lead Developer
+ +
+
+
+Maria is a React and WordPress expert who loves building accessible interfaces. She contributes to open source and mentors junior developers.
+ + + + +
+
+
+
+
+
+
+James Wright
+ + +UX Designer
+ +
+
+
+James creates intuitive user experiences backed by research. He is passionate about accessibility and inclusive design practices.
+ + + + +
+
+
+
+
+
+
+
Meet Our Team
+ + + +The talented people behind our success
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
John Smith
+ + + +CEO & Founder
+ + + + +
+
+
Sarah Johnson
+ + + +CTO
+ + + + +
+
+
Mike Chen
+ + + +Lead Designer
+ + + + +
+
+
Emily Davis
+ + + +Marketing Lead
+ + + + +
+
+
+
+
+
+
+
Meet Our Team
+ + + +The talented people behind our success
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Alex Morgan
CEO & Founder
Visionary leader with 15+ years in tech startups.
Jordan Lee
CTO
Full-stack architect passionate about performance.
Sam Rivera
Design Lead
Award-winning designer focused on user experience.
Taylor Kim
Marketing Director
Growth strategist driving brand awareness.
+
+
+
+
+
+
+
Leadership Team
+ + + +Click on a team member to learn more about them
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Expert Instructors
+ + + +Learn from Industry Leaders
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dr. Angela Yu
+ + + +Web Development
+
+
Jose Portilla
+ + + +Data Science
+
+
Sarah Chen
+ + + +UI/UX Design
+
+
Michael Roberts
+ + + +Marketing
+
+
+
+
+
+
+
+
Our Leadership Team
+ + + +Experienced professionals dedicated to your success.
+
+
+
+
+
+
+
+
+
+
+
+
Robert Mitchell
+ + + +Managing Partner
+ + + +Harvard Law, 25+ years in corporate law and complex litigation.
+
+
Sarah Williams
+ + + +Senior Partner, Real Estate
+ + + +Yale Law, specializing in commercial real estate and development.
+
+
Michael Chen
+ + + +Senior Partner, Tax Advisory
+ + + +Stanford Law, CPA with expertise in tax strategy and IRS matters.
+
+
+
+
+
+
+
+
+
+
+
+
Featured Speakers
+ + + +Learn from Industry Leaders
+ + + +Hear from visionaries who are transforming industries and shaping the future of technology.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
James Chen
+ + + +CEO, TechVenture Labs
+ + + +AI & Machine Learning
+
+
+
Sarah Miller
+ + + +VP Engineering, CloudScale
+ + + +Cloud Architecture
+
+
+
Michael Roberts
+ + + +Founder, DataDriven
+ + + +Data Science
+
+
+
Emily Zhang
+ + + +CTO, SecureNet
+ + + +Cybersecurity
+
+
+
+
+
+
+
+
+
+
Expert Trainers
+ + + +Meet Our Team
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Alex Rodriguez
+ + + +Head Trainer
+
+
Maya Johnson
+ + + +Yoga & Pilates
+
+
Chris Martinez
+ + + +Strength Coach
+
+
Sarah Kim
+ + + +Cycling & HIIT
+
+
+
+
+
+
+
+
Testimonials
+ + + +What Our Clients Say
+ + + +Real feedback from real customers who have transformed their business.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"Working with this team was a game-changer. They delivered beyond our expectations and helped us achieve a 200% increase in conversions."
+ + + +
+
+
Sarah Johnson
+ + + +CEO, TechStart Inc.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"The attention to detail and commitment to excellence is unmatched. They truly understand our business needs and deliver solutions that work."
+ + + +
+
+
Michael Chen
+ + + +Founder, GrowthLab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"From concept to launch, the experience was seamless. Their team is responsive, creative, and delivers on time, every time."
+ + + +
+
+
David Martinez
+ + + +CTO, InnovateCo
+
+
+
+
+
+
+
+
Testimonials
+ + + +What Clients Say
+
+
+
+
+
+
+
+
+
+
"They completely transformed our brand. The results exceeded our expectations, and our customers love the new direction."
+ + + +
+
Joey Walsh
+ + + +CEO, Luxe Brands
+
+
+
+
"Working with this team was a game-changer for our startup. They understood our vision and brought it to life beautifully."
+ + + +
+
David Park
+ + + +Founder, TechStart
+
+
+
+
+
+
+
+
Kind Words
+ + + +What Clients Say
+
+
+
+
+
+
+
+"Sarah has an incredible ability to understand complex problems and translate them into elegant, user-friendly solutions. She transformed our product completely."
+ + + +
+
+
Jason Miller
+ + + +CEO, TechVenture
+
+
+
+"Working with Sarah was a dream. She is not just a designer but a true partner who cares deeply about the success of your product. Highly recommended!"
+ + + +
+
+
Lisa Chen
+ + + +Product Lead, InnovateCo
+
+
+
+
+
+
+
+
What Our Customers Say
+ + + +Join thousands of satisfied customers who have transformed their workflow.
+
+
+
+
+
+
+
+★★★★★
+ + + +"This platform completely transformed how our team collaborates. We have seen a 40% increase in productivity since switching."
+ + + +
+
+
Sarah Chen
+ + + +VP of Operations, TechCorp
+
+
+
+
+
+
+★★★★★
+ + + +"The automation features alone have saved us countless hours every week. Best investment we have made this year."
+ + + +
+
+
Marcus Johnson
+ + + +CEO, StartupFlow
+
+
+
+★★★★★
+ + + +"Outstanding customer support and a product that just works. Our team adopted it instantly with zero learning curve."
+ + + +
+
+
Emily Rodriguez
+ + + +Director, Digital Agency
+
+
+
+
+
+
+
+
Trusted by Industry Leaders
+
+
+
+
+
+
+
+
+
+
+
+
+
+James Wilson
+ + + +CTO, StartupHub
+"The performance gains we have seen since switching to airo-wp are remarkable. Our Core Web Vitals scores improved significantly."
+ + + +
+
+★★★★★
+
+
+
+
+
+
+
+
+
+
+
+
+Lisa Thompson
+ + + +Marketing Director, BrandCo
+"The patterns saved us weeks of design work. We launched our new site in record time with professional-looking sections."
+ + + +
+
+★★★★★
+
+
+
+
+
+
+
+
+
+
+
+
+David Park
+ + + +Agency Owner, WebCraft
+"Our team loves how easy it is to customize. The blocks work perfectly with our existing theme and match our brand guidelines."
+ + + +
+
+★★★★★
+
+
+
+
+
+
+
+
+
+Amanda Foster
+ + + +Designer, CreativeStudio
+"Finally, a block library that understands design! The attention to spacing, typography, and visual hierarchy is exceptional."
+ + + +
+
+★★★★★
+
+
+
+
+
+
+
+
Reviews
+ + + +What Our Guests Say
+
+
+
+
+
+
+★★★★★
+ + + +"An unforgettable dining experience! The lobster risotto was pure perfection. Will definitely be back."
+ + + +- Michael R., via Google
+
+
+
+
+
+★★★★★
+ + + +"We celebrated our anniversary here and it was magical. The service was impeccable and the food was outstanding."
+ + + +- Sarah T., via Yelp
+
+
+★★★★★
+ + + +"Best restaurant in the city, hands down. The chef truly understands how to bring out the best in each ingredient."
+ + + +- James L., via TripAdvisor
+
+
+
+
+
+
+
+
Testimonials
+ + + +What Our Clients Say
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"The team made finding our dream home an absolute pleasure. Their knowledge of the luxury market is unmatched, and they found us a property that exceeded all our expectations."
+ + + +
+
+
Michael Richardson
+ + + +Beverly Hills Buyer
+
+
+
+
+
"Selling our estate was a seamless experience. They positioned our property perfectly in the market and attracted qualified buyers from around the world. Truly exceptional service."
+ + + +
+
+
Sarah Chen
+ + + +Bel Air Seller
+
+
+
+
+
"As international buyers, we relied heavily on their expertise. They navigated complex legal requirements and found us a stunning oceanfront property that serves as our perfect retreat."
+ + + +
+
+
David Laurent
+ + + +International Buyer
+
+
+
+
+
+
+
+
What Our Clients Say
+
+
+
+
+
+
+
+
+
"They handled our company merger with exceptional skill and attention to detail. Their guidance was invaluable throughout the entire process."
+ + + +
+
+
Thomas Anderson
+ + + +CEO, Anderson Industries
+
+
+
"Professional, responsive, and truly invested in our success. They have been our trusted advisors for over a decade now."
+ + + +
+
+
Patricia Reynolds
+ + + +Managing Director, Reynolds Group
+
+
+
+
+
+
+
+
What Our Customers Say
+ + + +Real reviews from real customers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"This product has completely transformed how we work. The interface is intuitive and the features are exactly what we needed. Highly recommended!"
+ + + +
+
+
Amanda Peters
+ + + +Marketing Director
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"The customer support is outstanding. Every time I had a question, they responded quickly and resolved my issues efficiently. Great experience overall."
+ + + +
+
+
David Kim
+ + + +Software Engineer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"We have seen a 40% increase in productivity since implementing this solution. The ROI has been incredible and the team loves using it daily."
+ + + +
+
+
Sarah Mitchell
+ + + +Operations Manager
+
+
+
+
+
+
+
+
What Our Customers Say
+ + + +Join thousands of satisfied users building amazing websites
+
+
+
+
+
+
+
+
+
+
+
+
+
+"
+ + + +airo-wp has completely transformed how we build websites. The blocks are incredibly flexible and the performance is outstanding. Our development time has been cut in half!
+ + + +
+
+
+
+Sarah Johnson
+ + + +Lead Developer, TechCorp
+
+
+
+"
+ + + +The accessibility features are top-notch. As someone who focuses on inclusive design, I appreciate how every component follows WCAG guidelines out of the box.
+ + + +
+
+
+
+Michael Chen
+ + + +UX Designer, AccessibleWeb
+
+
+
+"
+ + + +I have tried many block libraries, but airo-wp stands out for its attention to detail and performance. The slider and accordion blocks are particularly impressive!
+ + + +
+
+
+
+Emily Rodriguez
+ + + +Freelance Web Developer
+
+
+
+
+
+
+
+
Customer Love
+ + + +What Our Customers Say
+
+
+
+
+
+
+
+
Student Success
+ + + +What Our Students Say
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
★★★★★
+ + + +"This platform completely changed my career. I went from knowing nothing about coding to landing my first developer job in just 6 months. The instructors are amazing!"
+ + + +
+
+
Alex Thompson
+ + + +Frontend Developer at Google
+
+
+
+
+
★★★★★
+ + + +"The data science course was incredibly comprehensive. I learned Python, machine learning, and got hands-on experience with real projects. Worth every penny!"
+ + + +
+
+
Emily Rodriguez
+ + + +Data Analyst at Amazon
+
+
+
+
+
★★★★★
+ + + +"As someone who switched careers at 35, these courses gave me the confidence and skills I needed. Now I am a senior UX designer. It is never too late to learn!"
+ + + +
+
+
Marcus Johnson
+ + + +Senior UX Designer at Microsoft
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Working with this team transformed our business. Their innovative approach and dedication to excellence helped us achieve results we never thought possible.
+ + + +
+
+
Robert Chen
+ + + +CEO, TechStart Inc.
+
+
+
+ );
+}
diff --git a/src/blocks/accordion-item/editor.scss b/src/blocks/accordion-item/editor.scss
new file mode 100644
index 0000000..1337e6e
--- /dev/null
+++ b/src/blocks/accordion-item/editor.scss
@@ -0,0 +1,89 @@
+/**
+ * Accordion Item Block - Editor Styles
+ * Import frontend styles + editor-specific overrides
+ */
+
+// Import all frontend styles so they appear in editor
+@use './style.scss' as *;
+
+// Editor-specific overrides and enhancements
+.editor-styles-wrapper,
+.block-editor-block-list__layout {
+
+ .airo-wp-accordion-item {
+ // Editor-specific spacing between items
+ &:not(:last-child) {
+ margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
+ }
+
+ // Panel behavior in editor - interactive like frontend
+ .airo-wp-accordion-item__panel {
+ // Respect open/closed state in editor
+ // But disable animation for instant toggle
+ transition: none !important;
+
+ // Add visual indicator in editor
+ .airo-wp-accordion-item__content {
+ // Subtle border in editor to show content area
+ border-left: 2px solid var(--wp--preset--color--primary, rgba(37, 99, 235, 0.2));
+ margin-left: var(--wp--preset--spacing--40, 1.5rem);
+ padding-left: var(--wp--preset--spacing--30, 1rem);
+ }
+ }
+
+ // Editor visual feedback when selected
+ &.is-selected {
+
+ > .airo-wp-accordion-item__header {
+
+ .airo-wp-accordion-item__trigger {
+ outline: 2px solid var(--wp--admin-theme-color, #007cba);
+ outline-offset: 2px;
+ box-shadow: 0 0 0 4px rgba(0, 124, 186, 0.1);
+ }
+ }
+ }
+
+ // Make trigger interactive in editor
+ .airo-wp-accordion-item__trigger {
+ // Allow trigger to be clickable
+ cursor: pointer;
+
+ // Title is editable via RichText
+ .airo-wp-accordion-item__title {
+ cursor: text;
+ }
+
+ // Show hover effects in editor
+ &:hover {
+ background-color: var(--airo-wp-accordion-hover-bg, var(--wp--preset--color--base-2, rgba(0, 0, 0, 0.04)));
+ }
+ }
+
+ // Visual feedback for open/closed state in editor
+ &.airo-wp-accordion-item--open {
+ // Panel is visible when open
+ .airo-wp-accordion-item__panel {
+ display: block;
+ }
+ }
+
+ &.airo-wp-accordion-item--closed {
+ // Panel is hidden when closed
+ .airo-wp-accordion-item__panel {
+ display: none;
+ }
+ }
+ }
+}
+
+// Block preview (inserter)
+.block-editor-block-preview__content {
+
+ .airo-wp-accordion-item {
+
+ .airo-wp-accordion-item__panel {
+ display: block !important;
+ }
+ }
+}
diff --git a/src/blocks/accordion-item/index.js b/src/blocks/accordion-item/index.js
new file mode 100644
index 0000000..9904f6d
--- /dev/null
+++ b/src/blocks/accordion-item/index.js
@@ -0,0 +1,31 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import Save from './save';
+import metadata from './block.json';
+import { ICON_COLOR } from '../shared/constants';
+
+// Import styles
+import './editor.scss';
+import './style.scss';
+
+registerBlockType(metadata.name, {
+ ...metadata,
+ icon: {
+ src: (
+
+ ),
+ foreground: ICON_COLOR,
+ },
+ edit: Edit,
+ save: Save,
+});
diff --git a/src/blocks/accordion-item/save.js b/src/blocks/accordion-item/save.js
new file mode 100644
index 0000000..aa71edc
--- /dev/null
+++ b/src/blocks/accordion-item/save.js
@@ -0,0 +1,126 @@
+import {
+ useBlockProps,
+ useInnerBlocksProps,
+ RichText,
+} from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+// Icon SVGs - same as edit.js
+const ChevronIcon = () => (
+
+);
+
+const PlusMinusIcon = ({ isOpen }) => (
+
+);
+
+const CaretIcon = () => (
+
+);
+
+export default function AccordionItemSave({ attributes, context }) {
+ const { title, isOpen, uniqueId } = attributes;
+
+ // Get context from parent accordion (same as edit.js)
+ const iconStyle = context?.['airo-wp/accordion/iconStyle'] || 'chevron';
+ const iconPosition =
+ context?.['airo-wp/accordion/iconPosition'] || 'right';
+
+ // Same classes as edit.js - MUST MATCH
+ const itemClasses = classnames('airo-wp-accordion-item', {
+ 'airo-wp-accordion-item--open': isOpen,
+ 'airo-wp-accordion-item--closed': !isOpen,
+ });
+
+ const blockProps = useBlockProps.save({
+ className: itemClasses,
+ 'data-initially-open': isOpen,
+ });
+
+ const innerBlocksProps = useInnerBlocksProps.save({
+ className: 'airo-wp-accordion-item__content',
+ });
+
+ // Render icon (same logic as edit.js)
+ const renderIcon = () => {
+ if (iconStyle === 'none') {
+ return null;
+ }
+
+ let IconComponent;
+ switch (iconStyle) {
+ case 'plus-minus':
+ IconComponent = () =>
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/blocks/accordion-item/style.scss b/src/blocks/accordion-item/style.scss
new file mode 100644
index 0000000..c24b85a
--- /dev/null
+++ b/src/blocks/accordion-item/style.scss
@@ -0,0 +1,221 @@
+/**
+ * Accordion Item Block - Frontend Styles
+ * Enhanced UI/UX with smooth animations and better visual feedback
+ */
+
+.airo-wp-accordion-item {
+ // Spacing between accordion items
+ margin: 0;
+ padding: 0;
+ position: relative;
+
+ // Smooth transition for all state changes
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+ // Header container
+ .airo-wp-accordion-item__header {
+ margin: 0;
+ position: relative;
+ }
+
+ // Trigger button - Enhanced UX
+ .airo-wp-accordion-item__trigger {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ // Increased padding for better touch targets (min 44px height)
+ padding: var(--wp--preset--spacing--40, 1.25rem) var(--wp--preset--spacing--40, 1.5rem);
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ text-align: left;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: 600;
+ line-height: 1.6;
+ color: inherit;
+ // Smooth transitions with better easing
+ transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+ border-radius: 0;
+ position: relative;
+
+ // Subtle hover effect
+ &:hover {
+ // Use parent accordion's hover colors if set, otherwise default
+ background-color: var(--airo-wp-accordion-hover-bg, var(--wp--preset--color--base-2, rgba(0, 0, 0, 0.04)));
+ color: var(--airo-wp-accordion-hover-text, inherit);
+
+ // Icon scale on hover
+ .airo-wp-accordion-item__icon {
+ transform: scale(1.1);
+ color: var(--airo-wp-accordion-hover-text, var(--wp--preset--color--contrast, currentColor));
+ }
+ }
+
+ &:focus,
+ &:focus-visible {
+ outline: none;
+ }
+
+ // Active state (pressed)
+ &:active {
+ transform: scale(0.99);
+ background-color: var(--wp--preset--color--base-2, rgba(0, 0, 0, 0.08));
+ }
+
+ // Icon positioning
+ &.airo-wp-accordion-item__trigger--icon-left {
+ flex-direction: row;
+
+ .airo-wp-accordion-item__icon {
+ margin-right: var(--wp--preset--spacing--30, 0.75rem);
+ order: -1;
+ }
+ }
+
+ &.airo-wp-accordion-item__trigger--icon-right {
+ flex-direction: row;
+
+ .airo-wp-accordion-item__icon {
+ margin-left: var(--wp--preset--spacing--30, 0.75rem);
+ order: 1;
+ }
+ }
+ }
+
+ // Title text
+ .airo-wp-accordion-item__title {
+ flex: 1;
+ // Better text rendering
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ // Icon - Enhanced animations
+ .airo-wp-accordion-item__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.5rem;
+ height: 1.5rem;
+ // Smooth icon transitions with better easing
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ flex-shrink: 0;
+ opacity: 0.7;
+
+ svg {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ // Open state - Enhanced visual feedback with custom colors
+ &.airo-wp-accordion-item--open {
+ // Use parent accordion's open colors if set, otherwise default
+ background-color: var(--airo-wp-accordion-open-bg, var(--wp--preset--color--base-2, rgba(0, 0, 0, 0.02)));
+ color: var(--airo-wp-accordion-open-text, inherit);
+
+ // Optional: subtle shadow for depth
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+ .airo-wp-accordion-item__trigger {
+ // Apply open colors to trigger
+ background-color: var(--airo-wp-accordion-open-bg, transparent);
+ color: var(--airo-wp-accordion-open-text, inherit);
+
+ &:hover {
+ // Hover state when open - use hover colors (which default to open colors)
+ background-color: var(--airo-wp-accordion-hover-bg, var(--wp--preset--color--base-2, rgba(0, 0, 0, 0.03)));
+ color: var(--airo-wp-accordion-hover-text, inherit);
+ }
+ }
+
+ // Rotate and enhance icon when open
+ .airo-wp-accordion-item__icon {
+ transform: rotate(180deg);
+ opacity: 1;
+ color: var(--airo-wp-accordion-open-text, var(--wp--preset--color--contrast, currentColor));
+ }
+
+ // Ensure panel is visible when open
+ .airo-wp-accordion-item__panel {
+ opacity: 1;
+ }
+ }
+
+ // Content panel - Smoother animations
+ .airo-wp-accordion-item__panel {
+ overflow: hidden;
+ // Enhanced transition with better easing
+ transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+
+ // Hidden state (via frontend.js)
+ &[hidden] {
+ display: none;
+ }
+
+ // Content wrapper with improved spacing
+ .airo-wp-accordion-item__content {
+ padding: 0 var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--40, 1.5rem);
+
+ // Add subtle top spacing
+ padding-top: var(--wp--preset--spacing--20, 0.5rem);
+
+ // Remove top margin from first child
+ > *:first-child {
+ margin-top: 0;
+ }
+
+ // Remove bottom margin from last child
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ // Closed state
+ &.airo-wp-accordion-item--closed {
+ background-color: transparent;
+ box-shadow: none;
+
+ .airo-wp-accordion-item__panel {
+ opacity: 0;
+ }
+ }
+}
+
+// Mobile optimizations
+@media (max-width: 768px) {
+
+ .airo-wp-accordion-item {
+
+ .airo-wp-accordion-item__trigger {
+ // Ensure minimum touch target size
+ min-height: 44px;
+ padding: var(--wp--preset--spacing--40, 1rem);
+ }
+
+ .airo-wp-accordion-item__panel .airo-wp-accordion-item__content {
+ padding-left: var(--wp--preset--spacing--40, 1rem);
+ padding-right: var(--wp--preset--spacing--40, 1rem);
+ }
+ }
+}
+
+// Print styles - show all content
+@media print {
+
+ .airo-wp-accordion-item {
+
+ .airo-wp-accordion-item__panel {
+ display: block !important;
+ height: auto !important;
+ }
+
+ .airo-wp-accordion-item__icon {
+ display: none;
+ }
+ }
+}
diff --git a/src/blocks/accordion/block.json b/src/blocks/accordion/block.json
new file mode 100644
index 0000000..14221d3
--- /dev/null
+++ b/src/blocks/accordion/block.json
@@ -0,0 +1,209 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "airo-wp/accordion",
+ "version": "1.0.0",
+ "title": "Accordion",
+ "category": "airo-wp",
+ "description": "Create accessible accordion sections with customizable icons and behavior for FAQs and content organization.",
+ "keywords": [
+ "accordion",
+ "faq",
+ "collapsible",
+ "toggle",
+ "expand"
+ ],
+ "textdomain": "airo-wp",
+ "icon": "menu-alt",
+ "attributes": {
+ "allowMultipleOpen": {
+ "type": "boolean",
+ "default": false
+ },
+ "iconStyle": {
+ "type": "string",
+ "default": "chevron",
+ "enum": [
+ "chevron",
+ "plus-minus",
+ "caret",
+ "none"
+ ]
+ },
+ "iconPosition": {
+ "type": "string",
+ "default": "right",
+ "enum": [
+ "left",
+ "right"
+ ]
+ },
+ "borderBetween": {
+ "type": "boolean",
+ "default": true
+ },
+ "borderBetweenColor": {
+ "type": "string",
+ "default": ""
+ },
+ "itemGap": {
+ "type": "string",
+ "default": "0.5rem"
+ },
+ "openBackgroundColor": {
+ "type": "string",
+ "default": ""
+ },
+ "openTextColor": {
+ "type": "string",
+ "default": ""
+ },
+ "hoverBackgroundColor": {
+ "type": "string",
+ "default": ""
+ },
+ "hoverTextColor": {
+ "type": "string",
+ "default": ""
+ }
+ },
+ "schemaMetadata": {
+ "attributeDescriptions": {
+ "allowMultipleOpen": "Allow multiple accordion items to be expanded simultaneously",
+ "iconStyle": "Visual style for the expand/collapse indicator icon",
+ "iconPosition": "Position of the expand/collapse icon relative to the title",
+ "borderBetween": "Show a horizontal border between accordion items",
+ "borderBetweenColor": "Color of the border between accordion items",
+ "itemGap": "Vertical spacing between accordion items (CSS value)",
+ "openBackgroundColor": "Background color for expanded accordion items",
+ "openTextColor": "Text color for expanded accordion items",
+ "hoverBackgroundColor": "Background color when hovering over an accordion item",
+ "hoverTextColor": "Text color when hovering over an accordion item"
+ },
+ "htmlMappings": {
+ "dataAttributes": {
+ "allowMultipleOpen": "allow-multiple",
+ "iconStyle": "icon-style"
+ },
+ "cssModifiers": {
+ "allowMultipleOpen": {
+ "true": "airo-wp-accordion--multiple",
+ "false": ""
+ },
+ "iconPosition": "airo-wp-accordion--icon-{value}",
+ "borderBetween": {
+ "true": "airo-wp-accordion--border-between",
+ "false": ""
+ }
+ },
+ "cssVariables": {
+ "itemGap": "--airo-wp-accordion-gap",
+ "openBackgroundColor": "--airo-wp-accordion-open-bg",
+ "openTextColor": "--airo-wp-accordion-open-text",
+ "hoverBackgroundColor": "--airo-wp-accordion-hover-bg",
+ "hoverTextColor": "--airo-wp-accordion-hover-text"
+ }
+ }
+ },
+ "providesContext": {
+ "airo-wp/accordion/allowMultipleOpen": "allowMultipleOpen",
+ "airo-wp/accordion/iconStyle": "iconStyle",
+ "airo-wp/accordion/iconPosition": "iconPosition",
+ "airo-wp/accordion/borderBetweenColor": "borderBetweenColor",
+ "airo-wp/accordion/openBackgroundColor": "openBackgroundColor",
+ "airo-wp/accordion/openTextColor": "openTextColor",
+ "airo-wp/accordion/hoverBackgroundColor": "hoverBackgroundColor",
+ "airo-wp/accordion/hoverTextColor": "hoverTextColor"
+ },
+ "supports": {
+ "anchor": true,
+ "align": [
+ "wide",
+ "full"
+ ],
+ "html": false,
+ "inserter": true,
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "blockGap": true,
+ "__experimentalDefaultControls": {
+ "padding": true,
+ "blockGap": true
+ }
+ },
+ "color": {
+ "background": true,
+ "text": true,
+ "link": true,
+ "__experimentalDefaultControls": {
+ "background": true,
+ "text": true
+ }
+ },
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true,
+ "lineHeight": true,
+ "fontWeight": true
+ },
+ "__experimentalFontFamily": true,
+ "__experimentalFontWeight": true
+ },
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true,
+ "__experimentalDefaultControls": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ }
+ }
+ },
+ "example": {
+ "attributes": {
+ "allowMultipleOpen": false
+ },
+ "innerBlocks": [
+ {
+ "name": "airo-wp/accordion-item",
+ "attributes": {
+ "title": "What is an accordion?",
+ "isOpen": true
+ },
+ "innerBlocks": [
+ {
+ "name": "core/paragraph",
+ "attributes": {
+ "content": "An accordion is a vertically stacked list of items that can be expanded or collapsed to show or hide content."
+ }
+ }
+ ]
+ },
+ {
+ "name": "airo-wp/accordion-item",
+ "attributes": {
+ "title": "How do I use this block?",
+ "isOpen": false
+ },
+ "innerBlocks": [
+ {
+ "name": "core/paragraph",
+ "attributes": {
+ "content": "Add accordion items and customize the title. You can add any content inside each item using the block editor."
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "viewScript": "file:./view.js",
+ "editorScript": "file:./index.js",
+ "editorStyle": "file:./index.css",
+ "style": "file:./index.css"
+}
diff --git a/src/blocks/accordion/components/AccordionPlaceholder.js b/src/blocks/accordion/components/AccordionPlaceholder.js
new file mode 100644
index 0000000..de42e5c
--- /dev/null
+++ b/src/blocks/accordion/components/AccordionPlaceholder.js
@@ -0,0 +1,27 @@
+/**
+ * Accordion Placeholder
+ *
+ * Thin wrapper around the shared DsgoBlockPlaceholder primitive that supplies
+ * the accordion-specific copy and starter templates.
+ */
+
+import { __ } from '@wordpress/i18n';
+import DsgoBlockPlaceholder from '../../../components/shared/DsgoBlockPlaceholder';
+import accordionTemplates from '../templates';
+
+export default function AccordionPlaceholder({ clientId, setAttributes }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ },
+ migrate(attributes) {
+ return attributes;
+ },
+};
+
+export default [v1];
diff --git a/src/blocks/accordion/edit.js b/src/blocks/accordion/edit.js
new file mode 100644
index 0000000..13f8306
--- /dev/null
+++ b/src/blocks/accordion/edit.js
@@ -0,0 +1,423 @@
+import { __ } from '@wordpress/i18n';
+import {
+ useBlockProps,
+ useInnerBlocksProps,
+ InspectorControls,
+ store as blockEditorStore,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import {
+ ToggleControl,
+ SelectControl,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { DsgoInspectorPanel } from '../../components/shared';
+import { useSelect } from '@wordpress/data';
+import classnames from 'classnames';
+import {
+ encodeColorValue,
+ decodeColorValue,
+} from '../../utils/encode-color-value';
+import { convertColorToCSSVar } from '../../utils/convert-preset-to-css-var';
+import AccordionPlaceholder from './components/AccordionPlaceholder';
+
+export default function AccordionEdit({ attributes, setAttributes, clientId }) {
+ const {
+ allowMultipleOpen,
+ iconStyle,
+ iconPosition,
+ borderBetween,
+ borderBetweenColor,
+ itemGap,
+ openBackgroundColor,
+ openTextColor,
+ hoverBackgroundColor,
+ hoverTextColor,
+ } = attributes;
+
+ // Get theme color palette and gradient settings
+ const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+ const hasInnerBlocks = useSelect(
+ (select) =>
+ select(blockEditorStore).getBlock(clientId)?.innerBlocks?.length >
+ 0,
+ [clientId]
+ );
+
+ // Smart default: hover mirrors open unless explicitly set
+ const effectiveHoverBg = hoverBackgroundColor || openBackgroundColor;
+ const effectiveHoverText = hoverTextColor || openTextColor;
+
+ // Declaratively calculate classes based on attributes
+ const accordionClasses = classnames('airo-wp-accordion', {
+ 'airo-wp-accordion--multiple': allowMultipleOpen,
+ 'airo-wp-accordion--icon-left': iconPosition === 'left',
+ 'airo-wp-accordion--icon-right': iconPosition === 'right',
+ 'airo-wp-accordion--no-icon': iconStyle === 'none',
+ 'airo-wp-accordion--border-between': borderBetween,
+ });
+
+ // Apply colors and gap as CSS custom properties that will cascade to accordion items
+ const customStyles = {
+ '--airo-wp-accordion-open-bg': convertColorToCSSVar(openBackgroundColor),
+ '--airo-wp-accordion-open-text': convertColorToCSSVar(openTextColor),
+ '--airo-wp-accordion-hover-bg': convertColorToCSSVar(effectiveHoverBg),
+ '--airo-wp-accordion-hover-text': convertColorToCSSVar(effectiveHoverText),
+ '--airo-wp-accordion-gap': itemGap,
+ ...(borderBetweenColor && {
+ '--airo-wp-accordion-border-color':
+ convertColorToCSSVar(borderBetweenColor),
+ }),
+ };
+
+ // Block wrapper props
+ const blockProps = useBlockProps({
+ className: accordionClasses,
+ style: customStyles,
+ });
+
+ // Inner blocks configuration - ONLY allow accordion-item children. The
+ // initial seeding is handled by AccordionPlaceholder so the user always
+ // picks a starter layout instead of landing on a generic two-item template.
+ const innerBlocksProps = useInnerBlocksProps(
+ {
+ className: 'airo-wp-accordion__items',
+ },
+ {
+ allowedBlocks: ['airo-wp/accordion-item'],
+ orientation: 'vertical',
+ }
+ );
+
+ if (!hasInnerBlocks) {
+ return (
+
+
+ );
+ }
+
+ return (
+ <>
+ + {__( + 'Colors applied to all accordion items when open.', + 'airo-wp' + )} +
+ ++ {hoverBackgroundColor || hoverTextColor + ? __( + 'Custom hover colors set. Clear to use open state colors.', + 'airo-wp' + ) + : __( + 'Hover colors mirror open state by default. Set custom colors to override.', + 'airo-wp' + )} +
+
+
+
+
+ );
+}
diff --git a/src/blocks/accordion/editor.scss b/src/blocks/accordion/editor.scss
new file mode 100644
index 0000000..c9fa5ea
--- /dev/null
+++ b/src/blocks/accordion/editor.scss
@@ -0,0 +1,86 @@
+/**
+ * Accordion Block - Editor Styles
+ * Import frontend styles + editor-specific overrides
+ */
+
+// Import all frontend styles so they appear in editor
+@use './style.scss' as *;
+
+// Editor-specific overrides and enhancements
+.editor-styles-wrapper,
+.block-editor-block-list__layout {
+
+ .airo-wp-accordion {
+ // Editor visual aids for container
+ position: relative;
+ width: 100%; // CRITICAL: Must be duplicated from style.scss for editor/frontend parity
+
+ // Add subtle border in editor to show container bounds
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px dashed rgba(0, 124, 186, 0.2);
+ pointer-events: none;
+ border-radius: var(--airo-wp-accordion-border-radius);
+ }
+
+ // When selected, show more prominent border
+ &.is-selected {
+
+ &::before {
+ border-color: var(--wp--admin-theme-color, #007cba);
+ border-style: solid;
+ border-width: 2px;
+ }
+ }
+
+ // Visual aids for settings
+ &.airo-wp-accordion--border-between {
+ // Already has borders, less prominent container border
+ &::before {
+ opacity: 0.5;
+ }
+ }
+
+ &.airo-wp-accordion--multiple {
+ // Visual indicator for multiple mode
+ &::after {
+ content: 'Multiple panels can open';
+ position: absolute;
+ top: -1.5rem;
+ left: 0;
+ font-size: 0.75rem;
+ color: var(--wp--preset--color--primary, #007cba);
+ background: rgba(0, 124, 186, 0.1);
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ pointer-events: none;
+ }
+ }
+
+ // Better spacing for inner blocks in editor
+ .airo-wp-accordion__items {
+
+ > .block-editor-inner-blocks > .block-editor-block-list__layout {
+ // Remove default WordPress inner blocks spacing
+ padding: 0;
+ }
+ }
+ }
+}
+
+// Block preview (inserter/pattern library)
+.block-editor-block-preview__content {
+
+ .airo-wp-accordion {
+ // Remove visual aids in preview
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+}
diff --git a/src/blocks/accordion/index.js b/src/blocks/accordion/index.js
new file mode 100644
index 0000000..8cc910b
--- /dev/null
+++ b/src/blocks/accordion/index.js
@@ -0,0 +1,36 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import Save from './save';
+import deprecated from './deprecated';
+import metadata from './block.json';
+import { ICON_COLOR } from '../shared/constants';
+
+// Import styles
+import './editor.scss';
+import './style.scss';
+
+registerBlockType(metadata.name, {
+ ...metadata,
+ deprecated,
+ icon: {
+ src: (
+
+ ),
+ foreground: ICON_COLOR,
+ },
+ edit: Edit,
+ save: Save,
+});
diff --git a/src/blocks/accordion/save.js b/src/blocks/accordion/save.js
new file mode 100644
index 0000000..5fd3185
--- /dev/null
+++ b/src/blocks/accordion/save.js
@@ -0,0 +1,62 @@
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+import { convertColorToCSSVar } from '../../utils/convert-preset-to-css-var';
+
+export default function AccordionSave({ attributes }) {
+ const {
+ allowMultipleOpen,
+ iconStyle,
+ iconPosition,
+ borderBetween,
+ borderBetweenColor,
+ itemGap,
+ openBackgroundColor,
+ openTextColor,
+ hoverBackgroundColor,
+ hoverTextColor,
+ } = attributes;
+
+ // Smart default: hover mirrors open unless explicitly set
+ const effectiveHoverBg = hoverBackgroundColor || openBackgroundColor;
+ const effectiveHoverText = hoverTextColor || openTextColor;
+
+ // Same classes as edit.js - MUST MATCH EXACTLY
+ const accordionClasses = classnames('airo-wp-accordion', {
+ 'airo-wp-accordion--multiple': allowMultipleOpen,
+ 'airo-wp-accordion--icon-left': iconPosition === 'left',
+ 'airo-wp-accordion--icon-right': iconPosition === 'right',
+ 'airo-wp-accordion--no-icon': iconStyle === 'none',
+ 'airo-wp-accordion--border-between': borderBetween,
+ });
+
+ // Apply colors and gap as CSS custom properties that will cascade to accordion items
+ const customStyles = {
+ '--airo-wp-accordion-open-bg': convertColorToCSSVar(openBackgroundColor),
+ '--airo-wp-accordion-open-text': convertColorToCSSVar(openTextColor),
+ '--airo-wp-accordion-hover-bg': convertColorToCSSVar(effectiveHoverBg),
+ '--airo-wp-accordion-hover-text': convertColorToCSSVar(effectiveHoverText),
+ '--airo-wp-accordion-gap': itemGap,
+ ...(borderBetweenColor && {
+ '--airo-wp-accordion-border-color':
+ convertColorToCSSVar(borderBetweenColor),
+ }),
+ };
+
+ // Use .save() variant for save function
+ const blockProps = useBlockProps.save({
+ className: accordionClasses,
+ style: customStyles,
+ 'data-allow-multiple': allowMultipleOpen,
+ 'data-icon-style': iconStyle,
+ });
+
+ const innerBlocksProps = useInnerBlocksProps.save({
+ className: 'airo-wp-accordion__items',
+ });
+
+ return (
+
+
+
+ );
+}
diff --git a/src/blocks/accordion/style.scss b/src/blocks/accordion/style.scss
new file mode 100644
index 0000000..a4baa95
--- /dev/null
+++ b/src/blocks/accordion/style.scss
@@ -0,0 +1,139 @@
+/**
+ * Accordion Block - Frontend Styles
+ * Professional, polished accordion with consistent airo-wp styling
+ */
+
+.airo-wp-accordion {
+ // CSS Custom Properties for easy theming
+ --airo-wp-accordion-gap: var(--wp--preset--spacing--20, 0.5rem);
+ --airo-wp-accordion-border-color: var(--wp--preset--color--contrast, rgba(0, 0, 0, 0.1));
+ --airo-wp-accordion-border-radius: 8px;
+ --airo-wp-accordion-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+ // Reset any default styles
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ width: 100%; // Fill container width
+
+ // Optional: subtle border around entire accordion
+ border-radius: var(--airo-wp-accordion-border-radius);
+ overflow: hidden;
+
+ /**
+ * Skip Link (Accessibility)
+ * Visually hidden until focused - allows keyboard users to skip accordion
+ */
+ .airo-wp-accordion__skip-link {
+ position: absolute;
+ left: -9999px;
+ top: auto;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+
+ &:focus {
+ position: relative;
+ left: auto;
+ width: auto;
+ height: auto;
+ padding: 0.5rem 1rem;
+ margin-bottom: 0.5rem;
+ background: var(--wp--preset--color--accent-2, #2563eb);
+ color: var(--wp--preset--color--base, #fff);
+ text-decoration: none;
+ border-radius: 4px;
+ font-weight: 600;
+ display: inline-block;
+ }
+ }
+
+ // Container for accordion items
+ .airo-wp-accordion__items {
+ display: flex;
+ flex-direction: column;
+ gap: var(--airo-wp-accordion-gap);
+ }
+
+ // Border between items - refined styling
+ &.airo-wp-accordion--border-between {
+
+ .airo-wp-accordion__items {
+ gap: 0;
+ }
+
+ .airo-wp-accordion-item:not(:last-child) {
+ border-bottom: 1px solid var(--airo-wp-accordion-border-color);
+ }
+
+ // First item rounded top
+ .airo-wp-accordion-item:first-child {
+ border-top-left-radius: var(--airo-wp-accordion-border-radius);
+ border-top-right-radius: var(--airo-wp-accordion-border-radius);
+ overflow: hidden;
+ }
+
+ // Last item rounded bottom
+ .airo-wp-accordion-item:last-child {
+ border-bottom-left-radius: var(--airo-wp-accordion-border-radius);
+ border-bottom-right-radius: var(--airo-wp-accordion-border-radius);
+ overflow: hidden;
+ }
+ }
+
+ // Icon positioning variants
+ &.airo-wp-accordion--icon-left {
+ // Custom styles if needed
+ }
+
+ &.airo-wp-accordion--icon-right {
+ // Custom styles if needed
+ }
+
+ &.airo-wp-accordion--no-icon {
+
+ .airo-wp-accordion-item__icon {
+ display: none;
+ }
+ }
+
+ // Multiple open mode indicator
+ &.airo-wp-accordion--multiple {
+ // Optional: visual indicator for multiple mode
+ }
+
+ // Full width alignment support
+ &.alignwide,
+ &.alignfull {
+ width: 100%;
+ }
+
+ // Card style variant (optional enhancement)
+ &.is-style-card {
+ border: 1px solid var(--airo-wp-accordion-border-color);
+ box-shadow: var(--airo-wp-accordion-shadow);
+ border-radius: var(--airo-wp-accordion-border-radius);
+ padding: var(--wp--preset--spacing--20, 0.5rem);
+ background: var(--wp--preset--color--base, #fff);
+ }
+
+ // Minimal style variant
+ &.is-style-minimal {
+ --airo-wp-accordion-border-color: transparent;
+ --airo-wp-accordion-shadow: none;
+
+ .airo-wp-accordion-item {
+ background-color: transparent;
+ }
+ }
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+
+ .airo-wp-accordion {
+ --airo-wp-accordion-border-color: rgba(255, 255, 255, 0.1);
+ --airo-wp-accordion-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ }
+}
diff --git a/src/blocks/accordion/templates.js b/src/blocks/accordion/templates.js
new file mode 100644
index 0000000..ed9db6c
--- /dev/null
+++ b/src/blocks/accordion/templates.js
@@ -0,0 +1,226 @@
+/**
+ * Accordion Templates
+ *
+ * Starter layouts shown by AccordionPlaceholder when the block is first
+ * inserted. Every template ends with at least one accordion-item so the user
+ * never lands in a silent-empty state after picking a tile.
+ */
+
+import { __ } from '@wordpress/i18n';
+
+const accordionTemplates = [
+ {
+ name: 'blank',
+ title: __('Blank', 'airo-wp'),
+ description: __('Two empty items to fill in', 'airo-wp'),
+ icon: 'welcome-add-page',
+ attributes: {},
+ innerBlocks: [
+ [
+ 'airo-wp/accordion-item',
+ { title: __('Accordion Item 1', 'airo-wp') },
+ ],
+ [
+ 'airo-wp/accordion-item',
+ { title: __('Accordion Item 2', 'airo-wp') },
+ ],
+ ],
+ },
+ {
+ name: 'faq',
+ title: __('FAQ', 'airo-wp'),
+ description: __(
+ 'Frequently asked questions with short answers',
+ 'airo-wp'
+ ),
+ icon: 'editor-help',
+ attributes: {
+ iconStyle: 'plus-minus',
+ iconPosition: 'right',
+ },
+ innerBlocks: [
+ [
+ 'airo-wp/accordion-item',
+ {
+ title: __('What is included with my plan?', 'airo-wp'),
+ },
+ [
+ [
+ 'core/paragraph',
+ {
+ content: __(
+ 'Every plan includes the full block library, regular updates, and access to support. Upgrade at any time to unlock advanced layouts.',
+ 'airo-wp'
+ ),
+ },
+ ],
+ ],
+ ],
+ [
+ 'airo-wp/accordion-item',
+ {
+ title: __(
+ 'How do I cancel my subscription?',
+ 'airo-wp'
+ ),
+ },
+ [
+ [
+ 'core/paragraph',
+ {
+ content: __(
+ 'You can cancel anytime from your account dashboard. Your access continues until the end of the billing period.',
+ 'airo-wp'
+ ),
+ },
+ ],
+ ],
+ ],
+ [
+ 'airo-wp/accordion-item',
+ {
+ title: __('Do you offer refunds?', 'airo-wp'),
+ },
+ [
+ [
+ 'core/paragraph',
+ {
+ content: __(
+ 'We offer a 30-day money-back guarantee. Just reach out to support and we will process your refund.',
+ 'airo-wp'
+ ),
+ },
+ ],
+ ],
+ ],
+ ],
+ },
+ {
+ name: 'content',
+ title: __('Content', 'airo-wp'),
+ description: __(
+ 'Rich content sections with headings and media',
+ 'airo-wp'
+ ),
+ icon: 'editor-alignleft',
+ attributes: {
+ iconStyle: 'chevron',
+ iconPosition: 'right',
+ borderBetween: false,
+ },
+ innerBlocks: [
+ [
+ 'airo-wp/accordion-item',
+ {
+ title: __('Overview', 'airo-wp'),
+ isOpen: true,
+ },
+ [
+ [
+ 'core/heading',
+ {
+ level: 3,
+ content: __('Section heading', 'airo-wp'),
+ },
+ ],
+ [
+ 'core/paragraph',
+ {
+ content: __(
+ 'Use this section to explain a concept in depth. Add any blocks you need — paragraphs, images, columns, or buttons all work inside an accordion item.',
+ 'airo-wp'
+ ),
+ },
+ ],
+ ],
+ ],
+ [
+ 'airo-wp/accordion-item',
+ {
+ title: __('Details', 'airo-wp'),
+ },
+ [
+ [
+ 'core/paragraph',
+ {
+ content: __(
+ 'Drop in supporting details, examples, or step-by-step instructions.',
+ 'airo-wp'
+ ),
+ },
+ ],
+ ],
+ ],
+ ],
+ },
+ {
+ name: 'icon-list',
+ title: __('Icon List', 'airo-wp'),
+ description: __(
+ 'Compact list with icons and short blurbs',
+ 'airo-wp'
+ ),
+ icon: 'list-view',
+ attributes: {
+ iconStyle: 'caret',
+ iconPosition: 'left',
+ borderBetween: false,
+ itemGap: '0.25rem',
+ },
+ innerBlocks: [
+ [
+ 'airo-wp/accordion-item',
+ {
+ title: __('Lightning fast', 'airo-wp'),
+ },
+ [
+ [
+ 'core/paragraph',
+ {
+ content: __(
+ 'Optimized assets and minimal markup keep page loads quick.',
+ 'airo-wp'
+ ),
+ },
+ ],
+ ],
+ ],
+ [
+ 'airo-wp/accordion-item',
+ {
+ title: __('Accessible by default', 'airo-wp'),
+ },
+ [
+ [
+ 'core/paragraph',
+ {
+ content: __(
+ 'ARIA roles and keyboard navigation are wired up automatically.',
+ 'airo-wp'
+ ),
+ },
+ ],
+ ],
+ ],
+ [
+ 'airo-wp/accordion-item',
+ {
+ title: __('Designed to extend', 'airo-wp'),
+ },
+ [
+ [
+ 'core/paragraph',
+ {
+ content: __(
+ 'Style with theme.json or override individual items in the editor.',
+ 'airo-wp'
+ ),
+ },
+ ],
+ ],
+ ],
+ ],
+ },
+];
+
+export default accordionTemplates;
diff --git a/src/blocks/accordion/view.js b/src/blocks/accordion/view.js
new file mode 100644
index 0000000..05771ba
--- /dev/null
+++ b/src/blocks/accordion/view.js
@@ -0,0 +1,265 @@
+/**
+ * Accordion Block - Frontend JavaScript
+ * Enhanced UX with smooth animations and scroll-to-view
+ * Following WordPress best practices - NO layout manipulation
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+ initAccordions();
+});
+document.addEventListener('airo-wp-content-loaded', initAccordions);
+
+// Check for reduced motion preference
+const prefersReducedMotion = window.matchMedia(
+ '(prefers-reduced-motion: reduce)'
+).matches;
+
+// Animation duration (matches CSS transition)
+const ANIMATION_DURATION = prefersReducedMotion ? 0 : 350;
+
+function initAccordions() {
+ const accordions = document.querySelectorAll('.airo-wp-accordion');
+
+ accordions.forEach((accordion) => {
+ // Prevent duplicate initialization
+ if (accordion.hasAttribute('data-airo-wp-initialized')) {
+ return;
+ }
+ accordion.setAttribute('data-airo-wp-initialized', 'true');
+
+ const allowMultiple =
+ accordion.getAttribute('data-allow-multiple') === 'true';
+ const items = accordion.querySelectorAll('.airo-wp-accordion-item');
+
+ // Add skip link for keyboard accessibility
+ const skipLink = document.createElement('a');
+ skipLink.href = '#end-of-accordion';
+ skipLink.className = 'airo-wp-accordion__skip-link';
+ skipLink.textContent = 'Skip accordion';
+ skipLink.addEventListener('click', (e) => {
+ e.preventDefault();
+ // Focus on the element after the accordion
+ const nextElement = accordion.nextElementSibling;
+ if (nextElement && nextElement.tabIndex >= 0) {
+ nextElement.focus();
+ } else {
+ // If no next focusable element, focus the last item
+ items[items.length - 1]
+ ?.querySelector('.airo-wp-accordion-item__trigger')
+ ?.focus();
+ }
+ });
+ accordion.insertBefore(skipLink, accordion.firstChild);
+
+ items.forEach((item) => {
+ const trigger = item.querySelector('.airo-wp-accordion-item__trigger');
+ const panel = item.querySelector('.airo-wp-accordion-item__panel');
+
+ if (!trigger || !panel) {
+ return;
+ }
+
+ // Set initial state based on data attribute
+ const initiallyOpen =
+ item.getAttribute('data-initially-open') === 'true';
+ if (initiallyOpen) {
+ openPanel(item, panel, false); // No animation on initial load
+ } else {
+ closePanel(item, panel, false); // No animation on initial load
+ }
+
+ // Click handler
+ trigger.addEventListener('click', (e) => {
+ e.preventDefault();
+ const isOpen = item.classList.contains(
+ 'airo-wp-accordion-item--open'
+ );
+
+ if (isOpen) {
+ // Close this panel
+ closePanel(item, panel, true);
+ } else {
+ // If single mode, close all other panels first
+ if (!allowMultiple) {
+ closeAllPanels(accordion);
+ }
+ // Open this panel with smooth scroll
+ openPanel(item, panel, true, true);
+ }
+ });
+
+ // Keyboard accessibility - Arrow key navigation
+ trigger.addEventListener('keydown', (e) => {
+ // Enter or Space - toggle
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ trigger.click();
+ }
+
+ // Arrow Up - focus previous item
+ if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ const prevItem = getPreviousItem(item, items);
+ if (prevItem) {
+ prevItem
+ .querySelector('.airo-wp-accordion-item__trigger')
+ ?.focus();
+ }
+ }
+
+ // Arrow Down - focus next item
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ const nextItem = getNextItem(item, items);
+ if (nextItem) {
+ nextItem
+ .querySelector('.airo-wp-accordion-item__trigger')
+ ?.focus();
+ }
+ }
+
+ // Home - focus first item
+ if (e.key === 'Home') {
+ e.preventDefault();
+ items[0]
+ ?.querySelector('.airo-wp-accordion-item__trigger')
+ ?.focus();
+ }
+
+ // End - focus last item
+ if (e.key === 'End') {
+ e.preventDefault();
+ items[items.length - 1]
+ ?.querySelector('.airo-wp-accordion-item__trigger')
+ ?.focus();
+ }
+ });
+ });
+ });
+}
+
+function openPanel(item, panel, animate = true, scrollIntoView = false) {
+ // Update classes
+ item.classList.remove('airo-wp-accordion-item--closed');
+ item.classList.add('airo-wp-accordion-item--open');
+
+ // Update ARIA
+ const trigger = item.querySelector('.airo-wp-accordion-item__trigger');
+ if (trigger) {
+ trigger.setAttribute('aria-expanded', 'true');
+ }
+
+ // Show panel
+ panel.hidden = false;
+
+ // Get the natural height
+ const content = panel.querySelector('.airo-wp-accordion-item__content');
+ const contentHeight = content ? content.scrollHeight : panel.scrollHeight;
+
+ if (!animate || prefersReducedMotion) {
+ // No animation - set height immediately
+ panel.style.height = '';
+ return;
+ }
+
+ // Animate height
+ panel.style.height = '0px';
+ // eslint-disable-next-line no-undef
+ requestAnimationFrame(() => {
+ panel.style.height = `${contentHeight}px`;
+
+ // Smooth scroll into view after opening
+ if (scrollIntoView) {
+ setTimeout(() => {
+ scrollItemIntoView(item);
+ }, ANIMATION_DURATION / 2); // Scroll halfway through animation
+ }
+
+ // Remove inline height after animation completes
+ setTimeout(() => {
+ panel.style.height = '';
+ }, ANIMATION_DURATION);
+ });
+}
+
+function closePanel(item, panel, animate = true) {
+ // Get current height for animation
+ const currentHeight = panel.scrollHeight;
+
+ // Update classes
+ item.classList.remove('airo-wp-accordion-item--open');
+ item.classList.add('airo-wp-accordion-item--closed');
+
+ // Update ARIA
+ const trigger = item.querySelector('.airo-wp-accordion-item__trigger');
+ if (trigger) {
+ trigger.setAttribute('aria-expanded', 'false');
+ }
+
+ if (!animate || prefersReducedMotion) {
+ // No animation - hide immediately
+ panel.hidden = true;
+ panel.style.height = '';
+ return;
+ }
+
+ // Set height explicitly for animation
+ panel.style.height = `${currentHeight}px`;
+
+ // Force reflow
+ // eslint-disable-next-line no-undef
+ requestAnimationFrame(() => {
+ panel.style.height = '0px';
+
+ // Hide after animation completes
+ setTimeout(() => {
+ panel.hidden = true;
+ panel.style.height = '';
+ }, ANIMATION_DURATION);
+ });
+}
+
+function closeAllPanels(accordion) {
+ const items = accordion.querySelectorAll('.airo-wp-accordion-item');
+
+ items.forEach((item) => {
+ const panel = item.querySelector('.airo-wp-accordion-item__panel');
+ if (panel && item.classList.contains('airo-wp-accordion-item--open')) {
+ closePanel(item, panel, true);
+ }
+ });
+}
+
+// Smooth scroll to show opened accordion item
+function scrollItemIntoView(item) {
+ const itemRect = item.getBoundingClientRect();
+ const viewportHeight = window.innerHeight;
+ const headerOffset = 100; // Account for fixed headers
+
+ // Check if item is not fully visible
+ if (itemRect.top < headerOffset || itemRect.bottom > viewportHeight) {
+ const scrollOptions = {
+ behavior: prefersReducedMotion ? 'auto' : 'smooth',
+ block: 'nearest',
+ inline: 'nearest',
+ };
+
+ // Scroll with offset for better visibility
+ item.scrollIntoView(scrollOptions);
+ }
+}
+
+// Keyboard navigation helpers
+function getPreviousItem(currentItem, allItems) {
+ const itemsArray = Array.from(allItems);
+ const currentIndex = itemsArray.indexOf(currentItem);
+ return currentIndex > 0 ? itemsArray[currentIndex - 1] : null;
+}
+
+function getNextItem(currentItem, allItems) {
+ const itemsArray = Array.from(allItems);
+ const currentIndex = itemsArray.indexOf(currentItem);
+ return currentIndex < itemsArray.length - 1
+ ? itemsArray[currentIndex + 1]
+ : null;
+}
diff --git a/src/blocks/advanced-heading/block.json b/src/blocks/advanced-heading/block.json
new file mode 100644
index 0000000..9fd138a
--- /dev/null
+++ b/src/blocks/advanced-heading/block.json
@@ -0,0 +1,110 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "airo-wp/advanced-heading",
+ "version": "1.0.0",
+ "title": "Advanced Heading",
+ "category": "airo-wp",
+ "description": "Create headings with multiple font styles — mix fonts, weights, and colors within a single heading for advanced typographic designs.",
+ "keywords": [
+ "heading",
+ "title",
+ "typography",
+ "multi-font",
+ "advanced"
+ ],
+ "textdomain": "airo-wp",
+ "icon": "heading",
+ "attributes": {
+ "level": {
+ "type": "number",
+ "default": 2,
+ "enum": [
+ 1,
+ 2,
+ 3,
+ 4,
+ 5,
+ 6
+ ]
+ },
+ "textAlign": {
+ "type": "string"
+ }
+ },
+ "providesContext": {
+ "airo-wp/advancedHeading/level": "level"
+ },
+ "supports": {
+ "anchor": true,
+ "html": false,
+ "inserter": true,
+ "align": [
+ "left",
+ "center",
+ "right",
+ "wide",
+ "full"
+ ],
+ "color": {
+ "text": true,
+ "background": true,
+ "gradients": true,
+ "__experimentalDefaultControls": {
+ "text": true,
+ "background": false
+ }
+ },
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "blockGap": true,
+ "__experimentalDefaultControls": {
+ "margin": true,
+ "blockGap": true
+ }
+ },
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true,
+ "lineHeight": true,
+ "fontFamily": true,
+ "fontWeight": true,
+ "fontStyle": true,
+ "textTransform": true,
+ "textDecoration": true,
+ "letterSpacing": true
+ },
+ "__experimentalFontFamily": true,
+ "__experimentalFontWeight": true,
+ "__experimentalFontStyle": true,
+ "__experimentalTextTransform": true,
+ "__experimentalTextDecoration": true,
+ "__experimentalLetterSpacing": true
+ }
+ },
+ "example": {
+ "attributes": {
+ "level": 2
+ },
+ "innerBlocks": [
+ {
+ "name": "airo-wp/heading-segment",
+ "attributes": {
+ "content": "Design"
+ }
+ },
+ {
+ "name": "airo-wp/heading-segment",
+ "attributes": {
+ "content": "SetGo"
+ }
+ }
+ ]
+ },
+ "editorScript": "file:./index.js",
+ "editorStyle": "file:./index.css",
+ "style": "file:./index.css"
+}
diff --git a/src/blocks/advanced-heading/edit.js b/src/blocks/advanced-heading/edit.js
new file mode 100644
index 0000000..2fda70c
--- /dev/null
+++ b/src/blocks/advanced-heading/edit.js
@@ -0,0 +1,135 @@
+/**
+ * Advanced Heading Block - Edit Component
+ *
+ * Renders a heading element containing inner blocks (heading segments)
+ * that each support independent typography controls.
+ *
+ * @since 2.0.0
+ */
+
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+import {
+ useBlockProps,
+ useInnerBlocksProps,
+ InspectorControls,
+ BlockControls,
+ AlignmentToolbar,
+} from '@wordpress/block-editor';
+import {
+ PanelBody,
+ ToolbarGroup,
+ ToolbarDropdownMenu,
+} from '@wordpress/components';
+import { heading as headingIcon } from '@wordpress/icons';
+import { convertPresetToCSSVar } from '../../utils/convert-preset-to-css-var';
+
+const ALLOWED_BLOCKS = ['airo-wp/heading-segment'];
+const TEMPLATE = [
+ [
+ 'airo-wp/heading-segment',
+ {
+ content: __('Bold', 'airo-wp'),
+ style: { typography: { fontWeight: '700' } },
+ },
+ ],
+ ['airo-wp/heading-segment', { content: __('Heading', 'airo-wp') }],
+];
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+
+/**
+ * Advanced Heading Edit Component
+ *
+ * @param {Object} props - Component props
+ * @param {Object} props.attributes - Block attributes
+ * @param {Function} props.setAttributes - Function to update attributes
+ * @return {JSX.Element} Advanced Heading block edit component
+ */
+export default function AdvancedHeadingEdit({ attributes, setAttributes }) {
+ const { level = 2, textAlign } = attributes;
+ const validLevel = HEADING_LEVELS.includes(level) ? level : 2;
+ const TagName = `h${validLevel}`;
+
+ const blockGap = convertPresetToCSSVar(attributes.style?.spacing?.blockGap);
+
+ const blockProps = useBlockProps({
+ className: classnames('airo-wp-advanced-heading', {
+ [`has-text-align-${textAlign}`]: textAlign,
+ }),
+ });
+
+ const innerBlocksProps = useInnerBlocksProps(
+ {
+ className: 'airo-wp-advanced-heading__inner',
+ style: blockGap ? { '--airo-wp-segment-gap': blockGap } : undefined,
+ },
+ {
+ allowedBlocks: ALLOWED_BLOCKS,
+ template: TEMPLATE,
+ orientation: 'horizontal',
+ }
+ );
+
+ return (
+ <>
+ {/* ========================================
+ BLOCK TOOLBAR
+ ======================================== */}
+ + {__('Heading Level', 'airo-wp')} +
+
+ {HEADING_LEVELS.map((targetLevel) => (
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/blocks/advanced-heading/editor.scss b/src/blocks/advanced-heading/editor.scss
new file mode 100644
index 0000000..6e1df96
--- /dev/null
+++ b/src/blocks/advanced-heading/editor.scss
@@ -0,0 +1,72 @@
+/**
+ * Advanced Heading Block Editor Styles
+ */
+
+.airo-wp-advanced-heading {
+
+ .airo-wp-advanced-heading__inner {
+ margin: 0;
+ padding: 0;
+ }
+
+ // Gap between heading segments — matches frontend style.scss
+ .airo-wp-heading-segment + .airo-wp-heading-segment {
+ margin-inline-start: var(--airo-wp-segment-gap, 0);
+ }
+}
+
+// Heading level picker in the inspector
+.airo-wp-advanced-heading__level-label {
+ margin-bottom: 8px;
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ color: var(--wp-components-color-foreground-inverted, #757575);
+}
+
+.airo-wp-advanced-heading__level-buttons {
+ display: flex;
+ gap: 4px;
+ margin-bottom: 16px;
+}
+
+.airo-wp-advanced-heading__level-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 36px;
+ height: 36px;
+ padding: 0 8px;
+ border: 1px solid var(--wp-components-color-accent-inverted, #ddd);
+ border-radius: 4px;
+ background: var(--wp-components-color-background, #fff);
+ color: var(--wp-components-color-foreground, #1e1e1e);
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.12s ease;
+
+ &:hover {
+ background: var(--wp-components-color-gray-100, #f0f0f0);
+ border-color: var(--wp-components-color-gray-400, #999);
+ }
+
+ &.is-active {
+ background: var(--wp-components-color-foreground, #1e1e1e);
+ border-color: var(--wp-components-color-foreground, #1e1e1e);
+ color: var(--wp-components-color-background, #fff);
+ }
+}
+
+// Text alignment support in editor
+.airo-wp-advanced-heading.has-text-align-left .airo-wp-advanced-heading__inner {
+ text-align: left;
+}
+
+.airo-wp-advanced-heading.has-text-align-center .airo-wp-advanced-heading__inner {
+ text-align: center;
+}
+
+.airo-wp-advanced-heading.has-text-align-right .airo-wp-advanced-heading__inner {
+ text-align: right;
+}
diff --git a/src/blocks/advanced-heading/index.js b/src/blocks/advanced-heading/index.js
new file mode 100644
index 0000000..a817821
--- /dev/null
+++ b/src/blocks/advanced-heading/index.js
@@ -0,0 +1,46 @@
+/**
+ * Advanced Heading Block - Registration
+ *
+ * A heading block that supports multiple font segments,
+ * allowing different typography for each part of the heading.
+ *
+ * @since 2.0.0
+ */
+
+import { registerBlockType } from '@wordpress/blocks';
+
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import { ICON_COLOR } from '../shared/constants';
+
+import './editor.scss';
+import './style.scss';
+
+/**
+ * Register Advanced Heading Block
+ */
+registerBlockType(metadata.name, {
+ ...metadata,
+ icon: {
+ src: (
+
+ ),
+ foreground: ICON_COLOR,
+ },
+ edit,
+ save,
+});
diff --git a/src/blocks/advanced-heading/save.js b/src/blocks/advanced-heading/save.js
new file mode 100644
index 0000000..2d0d878
--- /dev/null
+++ b/src/blocks/advanced-heading/save.js
@@ -0,0 +1,46 @@
+/**
+ * Advanced Heading Block - Save Function
+ *
+ * Renders the heading element with inner block content.
+ * Each heading segment saves its own typography styles.
+ *
+ * @since 2.0.0
+ */
+
+import classnames from 'classnames';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { convertPresetToCSSVar } from '../../utils/convert-preset-to-css-var';
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+
+/**
+ * Advanced Heading Save Function
+ *
+ * @param {Object} props - Component props
+ * @param {Object} props.attributes - Block attributes
+ * @return {JSX.Element} Saved advanced heading block markup
+ */
+export default function AdvancedHeadingSave({ attributes }) {
+ const { level = 2, textAlign } = attributes;
+ const validLevel = HEADING_LEVELS.includes(level) ? level : 2;
+ const TagName = `h${validLevel}`;
+
+ const blockGap = convertPresetToCSSVar(attributes.style?.spacing?.blockGap);
+
+ const blockProps = useBlockProps.save({
+ className: classnames('airo-wp-advanced-heading', {
+ [`has-text-align-${textAlign}`]: textAlign,
+ }),
+ });
+
+ const innerBlocksProps = useInnerBlocksProps.save({
+ className: 'airo-wp-advanced-heading__inner',
+ style: blockGap ? { '--airo-wp-segment-gap': blockGap } : undefined,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/src/blocks/advanced-heading/style.scss b/src/blocks/advanced-heading/style.scss
new file mode 100644
index 0000000..1968235
--- /dev/null
+++ b/src/blocks/advanced-heading/style.scss
@@ -0,0 +1,31 @@
+/**
+ * Advanced Heading Block Frontend Styles
+ */
+
+.airo-wp-advanced-heading {
+ // Reset margin on the heading element itself — spacing
+ // is handled by WordPress Block Supports on the wrapper
+ .airo-wp-advanced-heading__inner {
+ margin: 0;
+ padding: 0;
+ }
+
+ // Gap between heading segments — defaults to 0 so segments run
+ // together as one heading; editor block-gap control can override
+ .airo-wp-heading-segment + .airo-wp-heading-segment {
+ margin-inline-start: var(--airo-wp-segment-gap, 0);
+ }
+}
+
+// Text alignment support
+.airo-wp-advanced-heading.has-text-align-left .airo-wp-advanced-heading__inner {
+ text-align: left;
+}
+
+.airo-wp-advanced-heading.has-text-align-center .airo-wp-advanced-heading__inner {
+ text-align: center;
+}
+
+.airo-wp-advanced-heading.has-text-align-right .airo-wp-advanced-heading__inner {
+ text-align: right;
+}
diff --git a/src/blocks/blobs/block.json b/src/blocks/blobs/block.json
new file mode 100644
index 0000000..16eb979
--- /dev/null
+++ b/src/blocks/blobs/block.json
@@ -0,0 +1,166 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "airo-wp/blobs",
+ "version": "1.0.0",
+ "title": "Blobs",
+ "category": "airo-wp",
+ "description": "Create random, unique, and organic-looking blob shapes. Customize with gradients, overlays, and images. Animate with smooth morphing effects.",
+ "keywords": [
+ "blob",
+ "shape",
+ "organic",
+ "morph",
+ "animate",
+ "gradient"
+ ],
+ "textdomain": "airo-wp",
+ "icon": "art",
+ "attributes": {
+ "align": {
+ "type": "string"
+ },
+ "blobShape": {
+ "type": "string",
+ "default": "shape-1",
+ "enum": [
+ "shape-1",
+ "shape-2",
+ "shape-3",
+ "shape-4",
+ "shape-5",
+ "shape-6"
+ ]
+ },
+ "blobAnimation": {
+ "type": "string",
+ "default": "none",
+ "enum": [
+ "morph-1",
+ "morph-2",
+ "float",
+ "pulse",
+ "spin",
+ "none"
+ ]
+ },
+ "animationDuration": {
+ "type": "string",
+ "default": "8s"
+ },
+ "animationEasing": {
+ "type": "string",
+ "default": "ease-in-out",
+ "enum": [
+ "linear",
+ "ease",
+ "ease-in",
+ "ease-out",
+ "ease-in-out"
+ ]
+ },
+ "size": {
+ "type": "string",
+ "default": "300px"
+ },
+ "height": {
+ "type": "string",
+ "default": ""
+ },
+ "maxWidth": {
+ "type": "string"
+ },
+ "enableOverlay": {
+ "type": "boolean",
+ "default": false
+ },
+ "overlayColor": {
+ "type": "string",
+ "default": ""
+ },
+ "overlayOpacity": {
+ "type": "number",
+ "default": 80
+ }
+ },
+ "supports": {
+ "anchor": true,
+ "align": [
+ "left",
+ "center",
+ "right",
+ "wide",
+ "full"
+ ],
+ "html": false,
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "__experimentalDefaultControls": {
+ "margin": true,
+ "padding": true
+ }
+ },
+ "color": {
+ "background": true,
+ "text": true,
+ "gradients": true,
+ "__experimentalDefaultControls": {
+ "background": true,
+ "text": true
+ }
+ },
+ "background": {
+ "backgroundImage": true,
+ "backgroundSize": true,
+ "backgroundPosition": true,
+ "__experimentalDefaultControls": {
+ "backgroundImage": true
+ }
+ },
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true
+ },
+ "__experimentalFontFamily": true,
+ "__experimentalFontWeight": true,
+ "__experimentalWritingMode": true
+ },
+ "__experimentalBorder": {
+ "radius": false,
+ "__experimentalDefaultControls": {
+ "radius": false
+ }
+ }
+ },
+ "example": {
+ "attributes": {
+ "blobAnimation": "morph-1",
+ "size": "300px",
+ "backgroundColor": "accent-2"
+ },
+ "innerBlocks": [
+ {
+ "name": "core/heading",
+ "attributes": {
+ "level": 2,
+ "content": "Blob Shape",
+ "textAlign": "center"
+ }
+ },
+ {
+ "name": "core/paragraph",
+ "attributes": {
+ "content": "Organic animated shapes",
+ "align": "center"
+ }
+ }
+ ]
+ },
+ "editorScript": "file:./index.js",
+ "viewScript": "file:./view.js",
+ "editorStyle": "file:./index.css",
+ "style": "file:./index.css"
+}
diff --git a/src/blocks/blobs/deprecated.js b/src/blocks/blobs/deprecated.js
new file mode 100644
index 0000000..c07460a
--- /dev/null
+++ b/src/blocks/blobs/deprecated.js
@@ -0,0 +1,457 @@
+/**
+ * Blobs Block - Deprecated Versions
+ *
+ * Handles backwards compatibility for old blob block markup
+ *
+ * @since 1.0.0
+ */
+
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+import {
+ convertPresetToCSSVar,
+ convertColorToCSSVar,
+} from '../../utils/convert-preset-to-css-var';
+import { getOwnOpeningTag } from '../../utils/get-own-opening-tag';
+import { getDeprecatedBlockHTML } from '../../utils/deprecated-block-html';
+
+/**
+ * Shared supports for all deprecated versions.
+ * Uses __experimentalBorder (the historical name) instead of border.
+ */
+const sharedSupports = {
+ anchor: true,
+ align: ['left', 'center', 'right', 'wide', 'full'],
+ html: false,
+ spacing: {
+ margin: true,
+ padding: true,
+ __experimentalDefaultControls: {
+ margin: true,
+ padding: true,
+ },
+ },
+ color: {
+ background: true,
+ text: true,
+ gradients: true,
+ __experimentalDefaultControls: {
+ background: true,
+ text: true,
+ },
+ },
+ background: {
+ backgroundImage: true,
+ backgroundSize: true,
+ backgroundPosition: true,
+ __experimentalDefaultControls: {
+ backgroundImage: true,
+ },
+ },
+ typography: {
+ fontSize: true,
+ lineHeight: true,
+ writingMode: true,
+ fontFamily: true,
+ fontWeight: true,
+ __experimentalDefaultControls: {
+ fontSize: true,
+ },
+ },
+ __experimentalBorder: {
+ radius: false,
+ __experimentalDefaultControls: {
+ radius: false,
+ },
+ },
+};
+
+/**
+ * Version 3: Before the native, kit-controllable max-width control
+ *
+ * Blobs used to receive its max-width from the generic `max-width` extension
+ * (src/extensions/max-width), which stored a `dsgoMaxWidth` attribute and, on
+ * save, added the `airo-wp-has-max-width` class plus an inline
+ * `max-width;margin-left:auto;margin-right:auto` to the wrapper. Blobs now owns
+ * a native `maxWidth` attribute that emits the class + a kit-controllable
+ * `--airo-wp-blob-max-width` custom property instead (the raw max-width / centering
+ * margins moved to the stylesheet), and is excluded from the generic extension.
+ *
+ * This deprecation detects the old extension markup (wrapper carries
+ * `airo-wp-has-max-width` with a RAW inline `max-width:` — distinct from the new
+ * `--airo-wp-blob-max-width:` var) and migrates `dsgoMaxWidth` → `maxWidth` so
+ * existing content upgrades silently instead of showing a recovery warning.
+ * Blobs without a max-width are unaffected (they never carried the class) and
+ * validate directly against the current save().
+ */
+const v3 = {
+ supports: sharedSupports,
+ attributes: {
+ align: {
+ type: 'string',
+ },
+ blobShape: {
+ type: 'string',
+ default: 'shape-1',
+ },
+ blobAnimation: {
+ type: 'string',
+ default: 'none',
+ },
+ animationDuration: {
+ type: 'string',
+ default: '8s',
+ },
+ animationEasing: {
+ type: 'string',
+ default: 'ease-in-out',
+ },
+ size: {
+ type: 'string',
+ default: '300px',
+ },
+ height: {
+ type: 'string',
+ default: '',
+ },
+ enableOverlay: {
+ type: 'boolean',
+ default: false,
+ },
+ overlayColor: {
+ type: 'string',
+ default: '',
+ },
+ overlayOpacity: {
+ type: 'number',
+ default: 80,
+ },
+ // Legacy attribute injected by the generic max-width extension.
+ dsgoMaxWidth: {
+ type: 'string',
+ default: '',
+ },
+ },
+ isEligible(attributes, innerBlocks, extra) {
+ const innerHTML = getDeprecatedBlockHTML(extra);
+ // Scope the check to the Blobs wrapper's OWN opening tag. Blobs accepts
+ // arbitrary nested blocks, and the generic max-width extension still
+ // stamps the same `airo-wp-has-max-width` class + a raw inline `max-width:`
+ // onto any non-excluded nested child — so scanning the whole subtree
+ // could false-match a valid *native* Blobs block that merely contains
+ // such a child. Old extension markup put the raw max-width on the wrapper
+ // root; the new native format writes `--airo-wp-blob-max-width` there
+ // instead (excluded by the `[^-]` guard).
+ const openingTag = getOwnOpeningTag(innerHTML, 'airo-wp-blobs-wrapper');
+ if (!openingTag) {
+ return false;
+ }
+ return (
+ openingTag.includes('airo-wp-has-max-width') &&
+ /(?:^|[^-])max-width:/.test(openingTag)
+ );
+ },
+ save({ attributes }) {
+ const {
+ blobShape,
+ blobAnimation,
+ animationDuration,
+ animationEasing,
+ size,
+ height,
+ enableOverlay,
+ overlayColor,
+ overlayOpacity,
+ dsgoMaxWidth,
+ align,
+ } = attributes;
+
+ const blobClasses = classnames('airo-wp-blobs', {
+ [`airo-wp-blobs--${blobShape}`]: blobShape,
+ [`airo-wp-blobs--${blobAnimation}`]:
+ blobAnimation && blobAnimation !== 'none',
+ });
+
+ const customStyles = {
+ '--airo-wp-blob-size': size,
+ ...(height ? { '--airo-wp-blob-height': height } : {}),
+ '--airo-wp-blob-animation-duration': animationDuration,
+ '--airo-wp-blob-animation-easing': animationEasing,
+ };
+
+ // Reproduce the generic extension's align-aware centering margins.
+ let marginLeft = 'auto';
+ let marginRight = 'auto';
+ if (align === 'left') {
+ marginLeft = '0';
+ } else if (align === 'right') {
+ marginRight = '0';
+ }
+
+ const blockProps = useBlockProps.save({
+ className: classnames('airo-wp-blobs-wrapper', {
+ 'airo-wp-has-max-width': !!dsgoMaxWidth,
+ }),
+ ...(dsgoMaxWidth && {
+ style: {
+ maxWidth: dsgoMaxWidth,
+ marginLeft,
+ marginRight,
+ },
+ }),
+ });
+
+ const innerBlocksProps = useInnerBlocksProps.save({
+ className: 'airo-wp-blobs__content',
+ });
+
+ return (
+
+
+ );
+ },
+ migrate(attributes) {
+ // Move the extension value onto the native attribute and drop the
+ // legacy key so the current save() owns the markup.
+ const { dsgoMaxWidth, ...rest } = attributes;
+ if (dsgoMaxWidth) {
+ return { ...rest, maxWidth: dsgoMaxWidth };
+ }
+ return rest;
+ },
+};
+
+// Version 1: Original structure without wrapper
+const v1 = {
+ supports: sharedSupports,
+ attributes: {
+ blobShape: {
+ type: 'string',
+ default: 'shape-1',
+ },
+ blobAnimation: {
+ type: 'string',
+ default: 'none',
+ },
+ animationDuration: {
+ type: 'string',
+ default: '8s',
+ },
+ animationEasing: {
+ type: 'string',
+ default: 'ease-in-out',
+ },
+ size: {
+ type: 'string',
+ default: '300px',
+ },
+ enableOverlay: {
+ type: 'boolean',
+ default: false,
+ },
+ overlayColor: {
+ type: 'string',
+ default: '#000000',
+ },
+ overlayOpacity: {
+ type: 'number',
+ default: 50,
+ },
+ },
+ isEligible(attributes, innerBlocks, extra) {
+ const innerHTML = getDeprecatedBlockHTML(extra);
+ // v1 blocks have no wrapper div - the airo-wp-blobs class is directly on the block wrapper
+ return innerHTML && !innerHTML.includes('airo-wp-blobs-wrapper');
+ },
+ save: ({ attributes }) => {
+ const {
+ blobShape,
+ blobAnimation,
+ animationDuration,
+ animationEasing,
+ size,
+ enableOverlay,
+ overlayColor,
+ overlayOpacity,
+ } = attributes;
+
+ const blobClasses = classnames('airo-wp-blobs', {
+ [`airo-wp-blobs--${blobShape}`]: blobShape,
+ [`airo-wp-blobs--${blobAnimation}`]:
+ blobAnimation && blobAnimation !== 'none',
+ });
+
+ const customStyles = {
+ '--airo-wp-blob-size': size,
+ '--airo-wp-blob-animation-duration': animationDuration,
+ '--airo-wp-blob-animation-easing': animationEasing,
+ };
+
+ const blockProps = useBlockProps.save({
+ className: blobClasses,
+ style: customStyles,
+ 'data-blob-animation': blobAnimation,
+ });
+
+ const innerBlocksProps = useInnerBlocksProps.save({
+ className: 'airo-wp-blobs__content',
+ });
+
+ return (
+
+ {enableOverlay && (
+
+ )}
+
+
+
+
+
+ {enableOverlay && (
+
+ )}
+
+ );
+ },
+ migrate(attributes) {
+ return attributes;
+ },
+};
+
+// Version 2: With wrapper but without align attribute
+const v2 = {
+ supports: sharedSupports,
+ attributes: {
+ blobShape: {
+ type: 'string',
+ default: 'shape-1',
+ },
+ blobAnimation: {
+ type: 'string',
+ default: 'none',
+ },
+ animationDuration: {
+ type: 'string',
+ default: '8s',
+ },
+ animationEasing: {
+ type: 'string',
+ default: 'ease-in-out',
+ },
+ size: {
+ type: 'string',
+ default: '300px',
+ },
+ enableOverlay: {
+ type: 'boolean',
+ default: false,
+ },
+ overlayColor: {
+ type: 'string',
+ default: '',
+ },
+ overlayOpacity: {
+ type: 'number',
+ default: 80,
+ },
+ },
+ // No isEligible: v2's save() output is byte-identical to the current save()
+ // whenever `height` and `maxWidth` are unset (both are omitted from the
+ // markup in that case), so a v2-era block simply parses as VALID today and
+ // never needs migrating. It stays in the array because a v2 block that DID
+ // set an overlay colour still differs (convertPresetToCSSVar vs the current
+ // convertColorToCSSVar) and reaches this version by save-matching.
+ //
+ // The old guard was `innerHTML.includes('airo-wp-blobs-wrapper') &&
+ // attributes.align === undefined`. The current save() still emits that
+ // wrapper class, and `align` has no default so it is absent from the comment
+ // on any block the author never aligned — i.e. the guard matched current
+ // content. It then migrated it through a schema that predates `height` /
+ // `maxWidth`, silently dropping both.
+ save({ attributes }) {
+ const {
+ blobShape,
+ blobAnimation,
+ animationDuration,
+ animationEasing,
+ size,
+ enableOverlay,
+ overlayColor,
+ overlayOpacity,
+ } = attributes;
+
+ const blobClasses = classnames('airo-wp-blobs', {
+ [`airo-wp-blobs--${blobShape}`]: blobShape,
+ [`airo-wp-blobs--${blobAnimation}`]:
+ blobAnimation && blobAnimation !== 'none',
+ });
+
+ const customStyles = {
+ '--airo-wp-blob-size': size,
+ '--airo-wp-blob-animation-duration': animationDuration,
+ '--airo-wp-blob-animation-easing': animationEasing,
+ };
+
+ const blockProps = useBlockProps.save({
+ className: 'airo-wp-blobs-wrapper',
+ });
+
+ const innerBlocksProps = useInnerBlocksProps.save({
+ className: 'airo-wp-blobs__content',
+ });
+
+ return (
+
+
+
+
+
+ );
+ },
+ migrate(oldAttributes) {
+ // Migrate to new version with align attribute
+ return {
+ ...oldAttributes,
+ align: undefined, // WordPress will use default from supports
+ };
+ },
+};
+
+export default [v3, v2, v1];
diff --git a/src/blocks/blobs/edit.js b/src/blocks/blobs/edit.js
new file mode 100644
index 0000000..59b4eb4
--- /dev/null
+++ b/src/blocks/blobs/edit.js
@@ -0,0 +1,589 @@
+/**
+ * Blobs Block - Editor Component
+ *
+ * @since 1.0.0
+ */
+
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+import {
+ useBlockProps,
+ useInnerBlocksProps,
+ InspectorControls,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import {
+ SelectControl,
+ RangeControl,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { DsgoInspectorPanel } from '../../components/shared';
+import classnames from 'classnames';
+import {
+ encodeColorValue,
+ decodeColorValue,
+} from '../../utils/encode-color-value';
+import { convertColorToCSSVar } from '../../utils/convert-preset-to-css-var';
+import { hasExplicitString } from '../../utils/has-explicit-value';
+
+export default function BlobsEdit({ attributes, setAttributes, clientId }) {
+ const wrapperRef = useRef(null);
+ const {
+ blobShape,
+ blobAnimation,
+ animationDuration,
+ animationEasing,
+ size,
+ height,
+ maxWidth,
+ enableOverlay,
+ overlayColor,
+ overlayOpacity,
+ } = attributes;
+
+ // Derive unit-specific min/max for the blob size control
+ const sizeUnit = size ? size.replace(/[\d.]+/, '') : 'px';
+ const sizeConstraints = {
+ px: { min: 50, max: 800 },
+ '%': { min: 20, max: 200 },
+ vw: { min: 10, max: 100 },
+ vh: { min: 10, max: 100 },
+ };
+ const { min: sizeMin, max: sizeMax } =
+ sizeConstraints[sizeUnit] || sizeConstraints.px;
+
+ // Derive unit-specific min/max for the blob height control
+ const heightUnit = height ? height.replace(/[\d.]+/, '') : 'px';
+ const { min: heightMin, max: heightMax } =
+ sizeConstraints[heightUnit] || sizeConstraints.px;
+
+ // Get theme color palette and gradient settings
+ const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+ // Calculate classes
+ const blobClasses = classnames('airo-wp-blobs', {
+ [`airo-wp-blobs--${blobShape}`]: blobShape,
+ [`airo-wp-blobs--${blobAnimation}`]:
+ blobAnimation && blobAnimation !== 'none',
+ });
+
+ // Apply animation settings as CSS custom properties
+ const customStyles = {
+ '--airo-wp-blob-size': size,
+ ...(height ? { '--airo-wp-blob-height': height } : {}),
+ '--airo-wp-blob-animation-duration': animationDuration,
+ '--airo-wp-blob-animation-easing': animationEasing,
+ };
+
+ // Optional max-width constraint on the wrapper - MUST MATCH save.js.
+ // Only add the class + kit-controllable custom property when the author
+ // sets an explicit maxWidth; the stylesheet owns the actual max-width and
+ // centering margins.
+ const hasMaxWidth = hasExplicitString(maxWidth);
+
+ // Get block props with our wrapper class
+ const blockProps = useBlockProps({
+ className: classnames('airo-wp-blobs-wrapper', {
+ 'airo-wp-has-max-width': hasMaxWidth,
+ }),
+ ref: wrapperRef,
+ ...(hasMaxWidth && {
+ style: { '--airo-wp-blob-max-width': maxWidth },
+ }),
+ });
+
+ // Transfer background styles from wrapper to blob in editor
+ useEffect(() => {
+ if (!wrapperRef.current) {
+ return;
+ }
+
+ const wrapper = wrapperRef.current;
+ const blob = wrapper.querySelector('.airo-wp-blobs');
+ if (!blob) {
+ return;
+ }
+
+ // WordPress sets inline styles on the wrapper
+ // We need to read inline styles directly because our CSS has `background: none !important;`
+ const inlineStyle = wrapper.style;
+
+ // Transfer background image
+ if (
+ inlineStyle.backgroundImage &&
+ inlineStyle.backgroundImage !== 'none'
+ ) {
+ blob.style.setProperty(
+ 'background-image',
+ inlineStyle.backgroundImage
+ );
+ } else {
+ blob.style.removeProperty('background-image');
+ }
+
+ // Transfer background size
+ if (
+ inlineStyle.backgroundSize &&
+ inlineStyle.backgroundSize !== 'auto'
+ ) {
+ blob.style.setProperty(
+ 'background-size',
+ inlineStyle.backgroundSize
+ );
+ }
+
+ // Transfer background position
+ if (inlineStyle.backgroundPosition) {
+ blob.style.setProperty(
+ 'background-position',
+ inlineStyle.backgroundPosition
+ );
+ }
+
+ // Transfer background repeat
+ if (
+ inlineStyle.backgroundRepeat &&
+ inlineStyle.backgroundRepeat !== 'repeat'
+ ) {
+ blob.style.setProperty(
+ 'background-repeat',
+ inlineStyle.backgroundRepeat
+ );
+ }
+
+ // Transfer background attachment
+ if (
+ inlineStyle.backgroundAttachment &&
+ inlineStyle.backgroundAttachment !== 'scroll'
+ ) {
+ blob.style.setProperty(
+ 'background-attachment',
+ inlineStyle.backgroundAttachment
+ );
+ }
+
+ // Transfer WordPress background color classes from wrapper to blob
+ // so WordPress's own CSS applies the color to the blob shape directly
+ const bgClasses = Array.from(wrapper.classList).filter(
+ (c) =>
+ c.match(/^has-.*-background-color$/) || c === 'has-background'
+ );
+ bgClasses.forEach((cls) => {
+ wrapper.classList.remove(cls);
+ blob.classList.add(cls);
+ });
+
+ // Transfer inline background color (custom non-preset colors)
+ if (inlineStyle.backgroundColor) {
+ blob.style.setProperty(
+ 'background-color',
+ inlineStyle.backgroundColor
+ );
+ } else if (bgClasses.length === 0) {
+ // Apply default color if no user color is set
+ const defaultColor =
+ window
+ .getComputedStyle(document.documentElement)
+ .getPropertyValue('--wp--preset--color--accent-2') ||
+ '#2563eb';
+ blob.style.setProperty('background-color', defaultColor.trim());
+ }
+ }); // Run on every render to catch style changes
+
+ // Inner blocks for content inside blob
+ const innerBlocksProps = useInnerBlocksProps(
+ {
+ className: 'airo-wp-blobs__content',
+ },
+ {
+ template: [
+ [
+ 'core/heading',
+ {
+ level: 2,
+ placeholder: __('Add title…', 'airo-wp'),
+ textAlign: 'center',
+ },
+ ],
+ [
+ 'core/paragraph',
+ {
+ placeholder: __('Add description…', 'airo-wp'),
+ align: 'center',
+ },
+ ],
+ ],
+ }
+ );
+
+ return (
+ <>
+
+ {enableOverlay && (
+
+ )}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/blocks/blobs/editor.scss b/src/blocks/blobs/editor.scss
new file mode 100644
index 0000000..cbdda09
--- /dev/null
+++ b/src/blocks/blobs/editor.scss
@@ -0,0 +1,74 @@
+/**
+ * Blobs Block - Editor Styles
+ *
+ * Editor-specific styles - main styles in style.scss
+ * Keep minimal to ensure editor matches frontend
+ *
+ * @since 1.0.0
+ */
+
+// Editor: Wrapper styling
+.editor-styles-wrapper .airo-wp-blobs-wrapper {
+ // Ensure wrapper behavior matches frontend
+ display: block;
+ width: 100%;
+ // Make wrapper transparent so backgrounds show on blob
+ // Repeat class for higher specificity (0,3,0) to beat WordPress's
+ // color utility classes like .has-{slug}-background-color which also use !important
+ &.airo-wp-blobs-wrapper {
+ background: none !important;
+ background-color: transparent !important;
+ }
+
+ // CRITICAL: Alignment classes on wrapper should apply to inner blob (must match style.scss)
+ &.aligncenter > .airo-wp-blobs {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ &.alignleft > .airo-wp-blobs {
+ margin-right: auto;
+ }
+
+ &.alignright > .airo-wp-blobs {
+ margin-left: auto;
+ }
+
+ // Native max-width constraint (must match style.scss). Mirrors the
+ // frontend kit-controllable var chain so the editor preview matches.
+ &.airo-wp-has-max-width {
+ max-width: var(--airo-wp-blob-max-width, var(--wp--custom--airo-wp--blobs--max-width, 100%));
+ margin-left: auto;
+ margin-right: auto;
+
+ // Align-aware anchoring — must match style.scss.
+ &.alignleft,
+ &.has-text-align-left {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ &.alignright,
+ &.has-text-align-right {
+ margin-left: auto;
+ margin-right: 0;
+ }
+ }
+}
+
+// Editor: Enable blob animations for WYSIWYG editing
+.editor-styles-wrapper .airo-wp-blobs {
+ // Animations work the same in editor as frontend
+ // No special overrides needed - style.scss handles everything
+
+ // Optional: Add subtle border for better visibility in editor
+ &__shape {
+ outline: 1px dashed rgba(0, 0, 0, 0.1);
+ outline-offset: -1px;
+
+ // Remove outline on hover
+ &:hover {
+ outline-color: transparent;
+ }
+ }
+}
diff --git a/src/blocks/blobs/index.js b/src/blocks/blobs/index.js
new file mode 100644
index 0000000..6c7cb8c
--- /dev/null
+++ b/src/blocks/blobs/index.js
@@ -0,0 +1,40 @@
+/**
+ * Blobs Block
+ *
+ * Create random, unique, and organic-looking blob shapes with animations.
+ *
+ * @since 1.0.0
+ */
+
+import { registerBlockType } from '@wordpress/blocks';
+import './style.scss';
+import Edit from './edit';
+import Save from './save';
+import deprecated from './deprecated';
+import metadata from './block.json';
+import { ICON_COLOR } from '../shared/constants';
+
+/**
+ * Custom icon for Blobs block
+ */
+const icon = (
+
+);
+
+/**
+ * Register the Blobs block
+ */
+registerBlockType(metadata.name, {
+ icon: {
+ src: icon,
+ foreground: ICON_COLOR,
+ },
+ edit: Edit,
+ save: Save,
+ deprecated,
+});
diff --git a/src/blocks/blobs/save.js b/src/blocks/blobs/save.js
new file mode 100644
index 0000000..4c6c03f
--- /dev/null
+++ b/src/blocks/blobs/save.js
@@ -0,0 +1,85 @@
+/**
+ * Blobs Block - Save Component
+ *
+ * @since 1.0.0
+ */
+
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+import { convertColorToCSSVar } from '../../utils/convert-preset-to-css-var';
+import { hasExplicitString } from '../../utils/has-explicit-value';
+
+export default function BlobsSave({ attributes }) {
+ const {
+ blobShape,
+ blobAnimation,
+ animationDuration,
+ animationEasing,
+ size,
+ height,
+ maxWidth,
+ enableOverlay,
+ overlayColor,
+ overlayOpacity,
+ } = attributes;
+
+ // Same classes as edit.js - MUST MATCH
+ const blobClasses = classnames('airo-wp-blobs', {
+ [`airo-wp-blobs--${blobShape}`]: blobShape,
+ [`airo-wp-blobs--${blobAnimation}`]:
+ blobAnimation && blobAnimation !== 'none',
+ });
+
+ // Apply animation settings as CSS custom properties - MUST MATCH edit.js
+ const customStyles = {
+ '--airo-wp-blob-size': size,
+ ...(height ? { '--airo-wp-blob-height': height } : {}),
+ '--airo-wp-blob-animation-duration': animationDuration,
+ '--airo-wp-blob-animation-easing': animationEasing,
+ };
+
+ // Optional max-width constraint on the wrapper - MUST MATCH edit.js.
+ // Emitted as a kit-controllable CSS custom property so themes/kits can
+ // retheme via --airo-wp-blob-max-width or the blobs max-width token; the raw
+ // max-width and centering margins live in the stylesheet, not inline. The
+ // class + var are only added when the author sets an explicit maxWidth, so
+ // unset blobs serialize byte-identically to the pre-maxWidth output.
+ const hasMaxWidth = hasExplicitString(maxWidth);
+
+ // Get block props with our wrapper class
+ const blockProps = useBlockProps.save({
+ className: classnames('airo-wp-blobs-wrapper', {
+ 'airo-wp-has-max-width': hasMaxWidth,
+ }),
+ ...(hasMaxWidth && {
+ style: { '--airo-wp-blob-max-width': maxWidth },
+ }),
+ });
+
+ const innerBlocksProps = useInnerBlocksProps.save({
+ className: 'airo-wp-blobs__content',
+ });
+
+ return (
+
+ {enableOverlay && (
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/src/blocks/blobs/style.scss b/src/blocks/blobs/style.scss
new file mode 100644
index 0000000..d6aae1e
--- /dev/null
+++ b/src/blocks/blobs/style.scss
@@ -0,0 +1,294 @@
+/**
+ * Blobs Block - Frontend Styles
+ *
+ * Organic blob shapes with CSS border-radius morphing animations
+ *
+ * @since 1.0.0
+ */
+
+// Outer wrapper - takes full width and receives WordPress classes/styles
+.airo-wp-blobs-wrapper {
+ display: block;
+ width: 100%;
+ // WordPress applies backgrounds here, but we want them on the blob
+ // So we make wrapper transparent and JavaScript transfers styles to inner blob
+ // Repeated class for higher specificity (0,2,0) to beat WordPress's
+ // color utility classes like .has-{slug}-background-color which also use !important
+ &.airo-wp-blobs-wrapper {
+ background: none !important;
+ background-color: transparent !important;
+ }
+
+ // Alignment classes on wrapper should apply to inner blob
+ &.aligncenter > .airo-wp-blobs {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ &.alignleft > .airo-wp-blobs {
+ margin-right: auto;
+ }
+
+ &.alignright > .airo-wp-blobs {
+ margin-left: auto;
+ }
+
+ // Native, kit-controllable max-width constraint. The class + inline
+ // --airo-wp-blob-max-width are only emitted when the author sets an explicit
+ // maxWidth; the actual max-width and centering margins live here so themes
+ // and Style Kits can retheme the value. Resolution order:
+ // 1. --airo-wp-blob-max-width — inline author value / Style Kit CSS hook.
+ // 2. --wp--custom--airo-wp--blobs--max-width — theme.json token.
+ // 3. 100% — literal fallback (no constraint).
+ &.airo-wp-has-max-width {
+ max-width: var(--airo-wp-blob-max-width, var(--wp--custom--airo-wp--blobs--max-width, 100%));
+ margin-left: auto;
+ margin-right: auto;
+
+ // Anchor the constrained box to the block's alignment instead of always
+ // centering, preserving the behavior of the generic max-width extension
+ // this replaces. Keyed on the align classes WordPress puts on the
+ // wrapper (alignleft/alignright) and core's text-align classes
+ // (has-text-align-*), so either control anchors the box. The extra class
+ // raises specificity above the centering rule, so no !important needed.
+ &.alignleft,
+ &.has-text-align-left {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ &.alignright,
+ &.has-text-align-right {
+ margin-left: auto;
+ margin-right: 0;
+ }
+ }
+}
+
+.airo-wp-blobs {
+ // CSS Custom Properties (set from block attributes)
+ --airo-wp-blob-size: 300px;
+ --airo-wp-blob-animation-duration: 8s;
+ --airo-wp-blob-animation-easing: ease-in-out;
+
+ // Container with blob shape
+ position: relative;
+ width: var(--airo-wp-blob-size);
+ height: var(--airo-wp-blob-height, var(--airo-wp-blob-size));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+
+ // Default background color (applied via JavaScript if no user color is set)
+ // Don't set here - would override user's inline background-color styles
+
+ // Shape variants - EXTREMELY different organic blob shapes
+ &--shape-1 {
+ // Classic blob - balanced and organic
+ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+ }
+
+ &--shape-2 {
+ // Amoeba - very irregular, super elongated
+ border-radius: 15% 85% 85% 15% / 80% 20% 80% 20%;
+ }
+
+ &--shape-3 {
+ // Pebble - almost perfect circle
+ border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
+ }
+
+ &--shape-4 {
+ // Splash - EXTREME asymmetry
+ border-radius: 10% 90% 20% 80% / 90% 10% 85% 15%;
+ }
+
+ &--shape-5 {
+ // Drop - sharp teardrop with point at bottom
+ border-radius: 50% 50% 0% 100% / 60% 60% 0% 100%;
+ }
+
+ &--shape-6 {
+ // Cloud - very irregular soft blob
+ border-radius: 75% 25% 65% 35% / 35% 65% 25% 75%;
+ }
+
+ // Background overlay (for images)
+ &__overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ // Blob shape container
+ &__shape {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ // Content inside blob
+ .airo-wp-blobs__content {
+ position: relative;
+ z-index: 2;
+ padding: var(--wp--preset--spacing--medium, 1.5rem);
+ text-align: center;
+ width: 100%;
+
+ // Ensure proper spacing for block elements
+ > * + * {
+ margin-top: var(--wp--preset--spacing--small, 1rem);
+ }
+ }
+ }
+
+ // Animation variants (applied to outer container)
+ &--morph-1 {
+ animation: airo-wp-blob-morph-1 var(--airo-wp-blob-animation-duration) var(--airo-wp-blob-animation-easing) infinite;
+ }
+
+ &--morph-2 {
+ animation: airo-wp-blob-morph-2 var(--airo-wp-blob-animation-duration) var(--airo-wp-blob-animation-easing) infinite;
+ }
+
+ &--float {
+ animation: airo-wp-blob-float var(--airo-wp-blob-animation-duration) var(--airo-wp-blob-animation-easing) infinite;
+ }
+
+ &--pulse {
+ animation: airo-wp-blob-pulse var(--airo-wp-blob-animation-duration) var(--airo-wp-blob-animation-easing) infinite;
+ }
+
+ &--spin {
+ animation: airo-wp-blob-spin var(--airo-wp-blob-animation-duration) linear infinite;
+ }
+}
+
+// Keyframe Animations
+
+// Morph 1: Organic shape morphing through 3 states
+@keyframes airo-wp-blob-morph-1 {
+
+ 0%, 100% {
+ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+ }
+
+ 33% {
+ border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+ }
+
+ 66% {
+ border-radius: 50% 40% 20% 80% / 25% 70% 30% 75%;
+ }
+}
+
+// Morph 2: Different morphing pattern
+@keyframes airo-wp-blob-morph-2 {
+
+ 0%, 100% {
+ border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
+ }
+
+ 25% {
+ border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
+ }
+
+ 50% {
+ border-radius: 50% 50% 30% 70% / 50% 50% 50% 50%;
+ }
+
+ 75% {
+ border-radius: 30% 70% 70% 30% / 60% 40% 60% 40%;
+ }
+}
+
+// Float: Gentle floating motion (no rotation)
+@keyframes airo-wp-blob-float {
+
+ 0%, 100% {
+ transform: translateY(0);
+ }
+
+ 50% {
+ transform: translateY(-15px);
+ }
+}
+
+// Pulse: Scale in and out with slight rotation
+@keyframes airo-wp-blob-pulse {
+
+ 0%, 100% {
+ transform: scale(1) rotate(0deg);
+ }
+
+ 50% {
+ transform: scale(1.1) rotate(5deg);
+ }
+}
+
+// Spin: Continuous rotation with slight scale
+@keyframes airo-wp-blob-spin {
+
+ 0% {
+ transform: rotate(0deg) scale(1);
+ }
+
+ 50% {
+ transform: rotate(180deg) scale(1.05);
+ }
+
+ 100% {
+ transform: rotate(360deg) scale(1);
+ }
+}
+
+// Accessibility: Reduce motion for users who prefer it
+@media (prefers-reduced-motion: reduce) {
+
+ .airo-wp-blobs {
+
+ &--morph-1,
+ &--morph-2,
+ &--float,
+ &--pulse,
+ &--spin {
+ animation: none;
+ }
+ }
+}
+
+// Responsive: Adjust size on mobile
+@media (max-width: 768px) {
+
+ .airo-wp-blobs {
+
+ &__shape {
+ // Scale down on mobile if using fixed pixel values
+ max-width: 100%;
+ max-height: 100vw;
+ }
+ }
+}
+
+// Print styles: Remove animations
+@media print {
+
+ .airo-wp-blobs {
+
+ &--morph-1,
+ &--morph-2,
+ &--float,
+ &--pulse,
+ &--spin {
+ animation: none;
+ transform: none;
+ }
+ }
+}
diff --git a/src/blocks/blobs/test/deprecated.test.js b/src/blocks/blobs/test/deprecated.test.js
new file mode 100644
index 0000000..fe2dd11
--- /dev/null
+++ b/src/blocks/blobs/test/deprecated.test.js
@@ -0,0 +1,192 @@
+/**
+ * Blobs Block - Native max-width control + migration tests
+ *
+ * Verifies:
+ * - a blob WITHOUT maxWidth serializes exactly as before (no
+ * `airo-wp-has-max-width` class, no `--airo-wp-blob-max-width` var) and re-parses
+ * valid against the current save() without any migration;
+ * - a blob WITH maxWidth emits the `airo-wp-has-max-width` class and the
+ * kit-controllable `--airo-wp-blob-max-width` custom property (not a raw inline
+ * max-width);
+ * - OLD content that got its max-width from the generic max-width extension
+ * (a `dsgoMaxWidth` attribute + `airo-wp-has-max-width` class + raw inline
+ * `max-width;margin-left:auto;margin-right:auto`) migrates silently to the
+ * native `maxWidth` via the v3 deprecation instead of showing WordPress's
+ * "Attempt Recovery" warning.
+ */
+
+import {
+ registerBlockType,
+ setCategories,
+ parse,
+ createBlock,
+ serialize,
+ getBlockContent,
+ // eslint-disable-next-line import/no-unresolved
+} from '@wordpress/block-editor/node_modules/@wordpress/blocks';
+import metadata from '../block.json';
+import save from '../save';
+import deprecated from '../deprecated';
+
+setCategories([{ slug: 'airo-wp', title: 'airo-wp' }]);
+
+registerBlockType(metadata.name, { ...metadata, save, deprecated });
+
+// deprecated.js exports newest-first: [v3, v2, v1].
+const [v3Deprecation] = deprecated;
+
+describe('blobs save() - native max-width', () => {
+ test('a blob without maxWidth omits the class and the var', () => {
+ const markup = serialize(
+ createBlock(metadata.name, {
+ size: '300px',
+ })
+ );
+ expect(markup).toContain('airo-wp-blobs-wrapper');
+ expect(markup).not.toContain('airo-wp-has-max-width');
+ expect(markup).not.toContain('--airo-wp-blob-max-width');
+ });
+
+ test('a blob with maxWidth adds the class and the kit-controllable var', () => {
+ const markup = serialize(
+ createBlock(metadata.name, {
+ size: '80%',
+ maxWidth: '800px',
+ })
+ );
+ expect(markup).toContain('airo-wp-has-max-width');
+ expect(markup).toContain('--airo-wp-blob-max-width:800px');
+ // The raw max-width / centering margins live in the stylesheet, so they
+ // must NOT be written inline on the wrapper.
+ expect(markup).not.toMatch(/(?:^|[^-])max-width:/);
+ expect(markup).not.toContain('margin-left:auto');
+ });
+
+ test('a left/right-aligned blob with maxWidth keeps its align class alongside airo-wp-has-max-width', () => {
+ // The align-aware anchoring is CSS-only (style.scss keys margins off the
+ // alignleft/alignright classes WordPress adds to the wrapper). This guards
+ // that both classes are present on the same element so the anchoring hook
+ // can apply — i.e. a left/right-aligned + max-width blob is not silently
+ // re-centered.
+ const left = serialize(
+ createBlock(metadata.name, { align: 'left', maxWidth: '800px' })
+ );
+ expect(left).toContain('alignleft');
+ expect(left).toContain('airo-wp-has-max-width');
+
+ const right = serialize(
+ createBlock(metadata.name, { align: 'right', maxWidth: '800px' })
+ );
+ expect(right).toContain('alignright');
+ expect(right).toContain('airo-wp-has-max-width');
+ });
+
+ test('a maxWidth-unset blob re-parses valid with no migration', () => {
+ const markup = serialize(
+ createBlock(metadata.name, {
+ size: '400px',
+ blobShape: 'shape-2',
+ blobAnimation: 'morph-1',
+ })
+ );
+ const [block] = parse(markup);
+ expect(block.name).toBe('airo-wp/blobs');
+ expect(block.isValid).toBe(true);
+ expect(block.attributes.maxWidth).toBeUndefined();
+ });
+});
+
+describe('blobs deprecations - v3 native max-width migration', () => {
+ // Derive byte-exact OLD (extension-era) markup from the current canonical
+ // output: the extension stored `dsgoMaxWidth` (not `maxWidth`) and wrote a
+ // raw inline max-width + centering margins instead of the var.
+ const canonical = serialize(
+ createBlock(metadata.name, {
+ align: 'center',
+ size: '80%',
+ maxWidth: '800px',
+ })
+ );
+ const OLD_MARKUP = canonical
+ .replace('"maxWidth":"800px"', '"dsgoMaxWidth":"800px"')
+ .replace(
+ '--airo-wp-blob-max-width:800px',
+ 'max-width:800px;margin-left:auto;margin-right:auto'
+ );
+
+ test('derived old markup differs from canonical as expected', () => {
+ expect(OLD_MARKUP).toContain('airo-wp-has-max-width');
+ expect(OLD_MARKUP).toContain('"dsgoMaxWidth":"800px"');
+ expect(OLD_MARKUP).toMatch(/(?:^|[^-])max-width:800px/);
+ expect(OLD_MARKUP).not.toContain('--airo-wp-blob-max-width');
+ });
+
+ test('old extension blob migrates silently to native maxWidth', () => {
+ const [block] = parse(OLD_MARKUP);
+
+ expect(console).toHaveInformed();
+ expect(block.name).toBe('airo-wp/blobs');
+ expect(block.isValid).toBe(true);
+ expect(block.attributes.maxWidth).toBe('800px');
+ expect(block.attributes.dsgoMaxWidth).toBeUndefined();
+ // Re-serialized with the current save(): class + kit var, no raw inline.
+ const content = getBlockContent(block);
+ expect(content).toContain('airo-wp-has-max-width');
+ expect(content).toContain('--airo-wp-blob-max-width:800px');
+ expect(content).not.toMatch(/(?:^|[^-])max-width:/);
+ });
+
+ test('v3 isEligible flags old extension markup', () => {
+ expect(
+ v3Deprecation.isEligible({}, [], {
+ blockNode: { innerHTML: OLD_MARKUP },
+ })
+ ).toBe(true);
+ });
+
+ test('v3 isEligible ignores current native markup', () => {
+ expect(
+ v3Deprecation.isEligible({}, [], {
+ blockNode: { innerHTML: canonical },
+ })
+ ).toBe(false);
+ });
+
+ test('v3 isEligible ignores a plain (no max-width) blob', () => {
+ const plain = serialize(createBlock(metadata.name, { size: '300px' }));
+ expect(
+ v3Deprecation.isEligible({}, [], {
+ blockNode: { innerHTML: plain },
+ })
+ ).toBe(false);
+ });
+
+ test('v3 isEligible ignores a native blob whose NESTED child uses the generic max-width extension', () => {
+ // Regression: a valid native Blobs block (own maxWidth via
+ // --airo-wp-blob-max-width on the wrapper root) containing a nested child
+ // that the still-active generic extension stamped with the same
+ // airo-wp-has-max-width class + a raw inline max-width. The old-format
+ // signature lives only on the nested child, not the wrapper's own
+ // opening tag, so it must NOT be flagged (else its maxWidth would be
+ // silently dropped and the block marked invalid).
+ const nestedHTML =
+ '
+ {enableOverlay && (
+
+ )}
+
+
+
+
+ ' +
+ '
';
+ expect(
+ v3Deprecation.isEligible({}, [], {
+ blockNode: { innerHTML: nestedHTML },
+ })
+ ).toBe(false);
+ });
+
+ test('v3 migrate maps dsgoMaxWidth onto maxWidth and drops the legacy key', () => {
+ expect(
+ v3Deprecation.migrate({ dsgoMaxWidth: '800px', size: '80%' })
+ ).toEqual({ maxWidth: '800px', size: '80%' });
+ expect(
+ v3Deprecation.migrate({ dsgoMaxWidth: '', size: '80%' })
+ ).toEqual({ size: '80%' });
+ });
+});
diff --git a/src/blocks/blobs/view.js b/src/blocks/blobs/view.js
new file mode 100644
index 0000000..e119454
--- /dev/null
+++ b/src/blocks/blobs/view.js
@@ -0,0 +1,162 @@
+/**
+ * Blobs Block - Frontend JavaScript
+ *
+ * Handles accessibility and animation initialization
+ *
+ * @since 1.0.0
+ */
+
+/**
+ * Transfer background styles from wrapper to blob
+ */
+function transferBackgroundStyles() {
+ const wrappers = document.querySelectorAll('.airo-wp-blobs-wrapper');
+
+ wrappers.forEach((wrapper) => {
+ const blob = wrapper.querySelector('.airo-wp-blobs');
+ if (!blob) {
+ return;
+ }
+
+ // WordPress sets inline styles on the wrapper
+ // We need to read inline styles directly because our CSS has `background: none !important;`
+ // which overrides them in getComputedStyle()
+ const inlineStyle = wrapper.style;
+
+ // Transfer background image
+ if (
+ inlineStyle.backgroundImage &&
+ inlineStyle.backgroundImage !== 'none'
+ ) {
+ blob.style.setProperty(
+ 'background-image',
+ inlineStyle.backgroundImage
+ );
+ }
+
+ // Transfer background size
+ if (
+ inlineStyle.backgroundSize &&
+ inlineStyle.backgroundSize !== 'auto'
+ ) {
+ blob.style.setProperty(
+ 'background-size',
+ inlineStyle.backgroundSize
+ );
+ }
+
+ // Transfer background position
+ if (inlineStyle.backgroundPosition) {
+ blob.style.setProperty(
+ 'background-position',
+ inlineStyle.backgroundPosition
+ );
+ }
+
+ // Transfer background repeat
+ if (
+ inlineStyle.backgroundRepeat &&
+ inlineStyle.backgroundRepeat !== 'repeat'
+ ) {
+ blob.style.setProperty(
+ 'background-repeat',
+ inlineStyle.backgroundRepeat
+ );
+ }
+
+ // Transfer background attachment
+ if (
+ inlineStyle.backgroundAttachment &&
+ inlineStyle.backgroundAttachment !== 'scroll'
+ ) {
+ blob.style.setProperty(
+ 'background-attachment',
+ inlineStyle.backgroundAttachment
+ );
+ }
+
+ // Transfer WordPress background color classes from wrapper to blob
+ // so WordPress's own CSS applies the color to the blob shape directly
+ const bgClasses = Array.from(wrapper.classList).filter(
+ (c) =>
+ c.match(/^has-.*-background-color$/) || c === 'has-background'
+ );
+ bgClasses.forEach((cls) => {
+ wrapper.classList.remove(cls);
+ blob.classList.add(cls);
+ });
+
+ // Transfer inline background color (custom non-preset colors)
+ if (inlineStyle.backgroundColor) {
+ blob.style.setProperty(
+ 'background-color',
+ inlineStyle.backgroundColor
+ );
+ } else if (bgClasses.length === 0) {
+ // Apply default color if no user color is set
+ const defaultColor =
+ window
+ .getComputedStyle(document.documentElement)
+ .getPropertyValue('--wp--preset--color--accent-2') ||
+ '#2563eb';
+ blob.style.setProperty('background-color', defaultColor.trim());
+ }
+ });
+}
+
+/**
+ * Initialize blob animations with accessibility support
+ */
+function initBlobs() {
+ // First transfer background styles
+ transferBackgroundStyles();
+
+ const blobs = document.querySelectorAll('.airo-wp-blobs');
+
+ if (blobs.length === 0) {
+ return;
+ }
+
+ // Check if user prefers reduced motion
+ const prefersReducedMotion = window.matchMedia(
+ '(prefers-reduced-motion: reduce)'
+ ).matches;
+
+ if (prefersReducedMotion) {
+ // Disable all animations by adding a class
+ blobs.forEach((blob) => {
+ blob.classList.add('airo-wp-blobs--no-animation');
+ });
+ return;
+ }
+
+ // Initialize each blob
+ blobs.forEach(() => {
+ // Future: Add SVG-based animation logic here if implementing Phase 2
+ // For now, CSS animations handle everything via data-blob-animation attribute
+ });
+}
+
+// Initialize on DOMContentLoaded or immediately if DOM is ready
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initBlobs);
+} else {
+ initBlobs();
+}
+
+// Re-initialize after soft navigation (bfcache, AJAX)
+document.addEventListener('airo-wp-content-loaded', initBlobs);
+
+// Re-initialize if user changes motion preferences
+if (window.matchMedia) {
+ const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+ // Modern browsers
+ if (motionQuery.addEventListener) {
+ motionQuery.addEventListener('change', initBlobs);
+ }
+ // Legacy browsers
+ else if (motionQuery.addListener) {
+ motionQuery.addListener(initBlobs);
+ }
+}
diff --git a/src/blocks/breadcrumbs/block.json b/src/blocks/breadcrumbs/block.json
new file mode 100644
index 0000000..ea8a27b
--- /dev/null
+++ b/src/blocks/breadcrumbs/block.json
@@ -0,0 +1,116 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "airo-wp/breadcrumbs",
+ "version": "1.0.0",
+ "title": "Breadcrumbs",
+ "category": "airo-wp",
+ "description": "Display navigation breadcrumbs with Schema.org markup for improved UX and SEO.",
+ "keywords": [
+ "breadcrumb",
+ "navigation",
+ "hierarchy",
+ "seo"
+ ],
+ "textdomain": "airo-wp",
+ "icon": "arrow-right-alt2",
+ "usesContext": [
+ "postId",
+ "postType"
+ ],
+ "attributes": {
+ "showHome": {
+ "type": "boolean",
+ "default": true
+ },
+ "homeText": {
+ "type": "string",
+ "default": "Home"
+ },
+ "separator": {
+ "type": "string",
+ "default": "slash",
+ "enum": [
+ "slash",
+ "chevron",
+ "greater",
+ "bullet",
+ "arrow-right"
+ ]
+ },
+ "showCurrent": {
+ "type": "boolean",
+ "default": true
+ },
+ "linkCurrent": {
+ "type": "boolean",
+ "default": false
+ },
+ "prefixText": {
+ "type": "string",
+ "default": ""
+ },
+ "hideOnHome": {
+ "type": "boolean",
+ "default": true
+ },
+ "contentJustification": {
+ "type": "string",
+ "default": "left",
+ "enum": [
+ "left",
+ "center",
+ "right"
+ ]
+ }
+ },
+ "supports": {
+ "anchor": true,
+ "align": [
+ "wide",
+ "full"
+ ],
+ "html": false,
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "blockGap": true
+ },
+ "color": {
+ "text": true,
+ "link": true,
+ "background": true,
+ "__experimentalDefaultControls": {
+ "link": true
+ }
+ },
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true
+ },
+ "__experimentalFontWeight": true
+ },
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ }
+ },
+ "example": {
+ "attributes": {
+ "showHome": true,
+ "homeText": "Home",
+ "separator": "chevron",
+ "showCurrent": true,
+ "linkCurrent": false
+ }
+ },
+ "editorScript": "file:./index.js",
+ "editorStyle": "file:./index.css",
+ "style": "file:./index.css",
+ "viewScript": "file:./view.js",
+ "render": "file:./render.php"
+}
diff --git a/src/blocks/breadcrumbs/components/InspectorPanels.js b/src/blocks/breadcrumbs/components/InspectorPanels.js
new file mode 100644
index 0000000..b71f1df
--- /dev/null
+++ b/src/blocks/breadcrumbs/components/InspectorPanels.js
@@ -0,0 +1,170 @@
+/**
+ * Inspector Control Panels for Breadcrumbs Block
+ *
+ * Renders DsgoInspectorPanel.Item entries for the breadcrumbs display
+ * attributes. Meant to be composed inside the Settings DsgoInspectorPanel
+ * in breadcrumbs/edit.js.
+ */
+import { __ } from '@wordpress/i18n';
+import {
+ ToggleControl,
+ TextControl,
+ SelectControl,
+} from '@wordpress/components';
+import { DsgoInspectorPanel } from '../../../components/shared';
+
+export function DisplaySettingsPanel({ attributes, setAttributes }) {
+ const {
+ showHome,
+ homeText,
+ separator,
+ showCurrent,
+ linkCurrent,
+ prefixText,
+ hideOnHome,
+ } = attributes;
+
+ return (
+ <>
+ ' +
+ '
Nested
' + + '