magdev/wp-bootstrap
1
Fork 0
Code Issues Pull Requests Actions Releases 24 Activity

v0.1.0 - Core Theme: patterns, dark mode, block styles, style variations
Some checks failed
Create Release Package / PHP Lint (push) Successful in 52s
Details
Create Release Package / Build Release (push) Failing after 1m52s
Details

Browse Source 
- Add 16 block patterns across 7 new categories (hero, features, CTA,
  testimonials, pricing, contact, text)
- Add dark mode toggle with localStorage persistence and system preference
  detection (Bootstrap 5.3 data-bs-theme)
- Register 17 custom block styles mapping Bootstrap components to WordPress
  blocks (cards, alerts, tables, buttons, etc.)
- Add 4 style variations: Ocean, Forest, Sunset, Midnight
- Add sidebar template part and "Blog with Sidebar" custom template
- Add Inter and Lora variable fonts with fontFace declarations
- Add Display font size (fluid 2.5rem-3.5rem)
- Update translations (en_US .pot, de_CH .po) with all new strings
- Bump version to 0.1.0

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Marco Grätsch
2026-02-08 03:07:16 +01:00
parent d7415b9747
commit 9bb7f4f47f
41 changed files with 2670 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
patterns/contact-info.php Normal file
View File

@@ -0,0 +1,52 @@
<?php
/**
* Title: Contact information
* Slug: wp-bootstrap/contact-info
* Categories: wp-bootstrap_contact
* Description: A three-column contact information layout with address, phone, and email.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Get in touch', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'We would love to hear from you. Reach out through any of the channels below.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-text-align-center has-large-font-size"><?php esc_html_e( 'Address', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( '123 Example Street', 'wp-bootstrap' ); ?><br><?php esc_html_e( '8000 Zurich, Switzerland', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-text-align-center has-large-font-size"><?php esc_html_e( 'Phone', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( '+41 44 123 45 67', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-text-align-center has-large-font-size"><?php esc_html_e( 'Email', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'info@example.com', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

26
patterns/cta-banner.php Normal file
View File

@@ -0,0 +1,26 @@
<?php
/**
* Title: Call to action banner
* Slug: wp-bootstrap/cta-banner
* Categories: wp-bootstrap_cta, call-to-action
* Description: A full-width call to action banner with a colored background, heading, description, and button.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"dark","textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-base-color has-dark-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Ready to get started?', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><?php esc_html_e( 'Start building your website today with our powerful and flexible theme.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"primary","textColor":"base","fontSize":"medium"} -->
<div class="wp-block-button has-custom-font-size has-medium-font-size"><a class="wp-block-button__link has-base-color has-primary-background-color has-text-color has-background wp-element-button"><?php esc_html_e( 'Start Now', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

22
patterns/cta-newsletter.php Normal file
View File

@@ -0,0 +1,22 @@
<?php
/**
* Title: Newsletter signup
* Slug: wp-bootstrap/cta-newsletter
* Categories: wp-bootstrap_cta, call-to-action
* Description: A newsletter signup section with heading, description, and search block.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Stay in the loop', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Subscribe to our newsletter for updates, tips, and exclusive content.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:search {"label":"<?php esc_attr_e( 'Email', 'wp-bootstrap' ); ?>","showLabel":false,"placeholder":"<?php esc_attr_e( 'Enter your email address', 'wp-bootstrap' ); ?>","width":75,"widthUnit":"%","buttonText":"<?php esc_attr_e( 'Subscribe', 'wp-bootstrap' ); ?>","buttonPosition":"button-inside","buttonUseIcon":false,"style":{"border":{"radius":"0.375rem"}}} /--></div>
<!-- /wp:group -->

17
patterns/dark-mode-toggle.php Normal file
View File

@@ -0,0 +1,17 @@
<?php
/**
* Title: Dark mode toggle
* Slug: wp-bootstrap/dark-mode-toggle
* Categories: header
* Description: A toggle button for switching between light and dark mode.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:html -->
<button type="button" class="wp-bootstrap-dark-mode-toggle" data-bs-theme-toggle aria-label="<?php esc_attr_e( 'Switch to dark mode', 'wp-bootstrap' ); ?>" data-label-dark="<?php esc_attr_e( 'Switch to dark mode', 'wp-bootstrap' ); ?>" data-label-light="<?php esc_attr_e( 'Switch to light mode', 'wp-bootstrap' ); ?>" aria-pressed="false">
<svg class="wp-bootstrap-sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
<svg class="wp-bootstrap-moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</button>
<!-- /wp:html -->

54
patterns/features-2-col-offset.php Normal file
View File

@@ -0,0 +1,54 @@
<?php
/**
* Title: Features two columns with image
* Slug: wp-bootstrap/features-2-col-offset
* Categories: wp-bootstrap_features
* Description: A two-column layout with a large image on the left and stacked features on the right.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"sizeSlug":"large","style":{"border":{"radius":"0.5rem"}}} -->
<figure class="wp-block-image size-large" style="border-radius:0.5rem"><img src="" alt="<?php esc_attr_e( 'Feature illustration', 'wp-bootstrap' ); ?>"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-xx-large-font-size"><?php esc_html_e( 'Designed for modern workflows', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Streamline your development process with a theme that works the way you do.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'Block Patterns', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Pre-built patterns for common page sections. Drop them in and customize to fit your needs.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'Style Variations', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Switch between color schemes with a single click. Choose from multiple professionally designed palettes.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

64
patterns/features-3-col.php Normal file
View File

@@ -0,0 +1,64 @@
<?php
/**
* Title: Features three columns
* Slug: wp-bootstrap/features-3-col
* Categories: wp-bootstrap_features
* Description: A three-column feature grid with images, headings, and descriptions.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Features', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Everything you need to build a modern website.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"width":"64px","height":"64px","sizeSlug":"thumbnail"} -->
<figure class="wp-block-image size-thumbnail is-resized"><img src="" alt="" style="width:64px;height:64px"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php esc_html_e( 'Responsive Design', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Your website looks great on every device, from mobile phones to large desktop screens.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"width":"64px","height":"64px","sizeSlug":"thumbnail"} -->
<figure class="wp-block-image size-thumbnail is-resized"><img src="" alt="" style="width:64px;height:64px"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php esc_html_e( 'Easy Customization', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Customize colors, fonts, and layouts using the WordPress Site Editor with no code required.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"width":"64px","height":"64px","sizeSlug":"thumbnail"} -->
<figure class="wp-block-image size-thumbnail is-resized"><img src="" alt="" style="width:64px;height:64px"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php esc_html_e( 'Performance First', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Built with speed in mind. Optimized assets and clean code for lightning-fast page loads.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

66
patterns/features-icon-list.php Normal file
View File

@@ -0,0 +1,66 @@
<?php
/**
* Title: Features icon list
* Slug: wp-bootstrap/features-icon-list
* Categories: wp-bootstrap_features
* Description: A vertical list of features with icon images and text descriptions.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Why choose us', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"constrained","contentSize":"720px"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:image {"width":"48px","height":"48px","sizeSlug":"thumbnail"} -->
<figure class="wp-block-image size-thumbnail is-resized"><img src="" alt="" style="width:48px;height:48px"/></figure>
<!-- /wp:image -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'Bootstrap 5 Framework', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Built on the most popular CSS framework. Leverage a proven, well-documented design system.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:image {"width":"48px","height":"48px","sizeSlug":"thumbnail"} -->
<figure class="wp-block-image size-thumbnail is-resized"><img src="" alt="" style="width:48px;height:48px"/></figure>
<!-- /wp:image -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'Full Site Editing', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Edit every part of your site visually. Headers, footers, templates, and content are all customizable.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:image {"width":"48px","height":"48px","sizeSlug":"thumbnail"} -->
<figure class="wp-block-image size-thumbnail is-resized"><img src="" alt="" style="width:48px;height:48px"/></figure>
<!-- /wp:image -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'Dark Mode Support', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Built-in dark mode toggle that respects user preferences and persists across visits.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

3
patterns/header.php
View File

@@ -17,9 +17,10 @@
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<!-- wp:site-title {"level":0} /-->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right","verticalAlignment":"center"}} -->
<div class="wp-block-group">
<!-- wp:navigation {"overlayBackgroundColor":"base","overlayTextColor":"contrast","layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} /-->
<!-- wp:pattern {"slug":"wp-bootstrap/dark-mode-toggle"} /-->
</div>
<!-- /wp:group -->
</div>

30
patterns/hero-centered.php Normal file
View File

@@ -0,0 +1,30 @@
<?php
/**
* Title: Hero centered
* Slug: wp-bootstrap/hero-centered
* Categories: wp-bootstrap_hero, banner
* Description: A centered hero section with a colored background, heading, paragraph, and call to action buttons.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"backgroundColor":"primary","textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:heading {"textAlign":"center","level":1,"fontSize":"display"} -->
<h1 class="wp-block-heading has-text-align-center has-display-font-size"><?php esc_html_e( 'Welcome to your new website', 'wp-bootstrap' ); ?></h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><?php esc_html_e( 'Start building beautiful, responsive pages with the full power of Bootstrap 5 and the WordPress block editor.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"base","textColor":"primary"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background wp-element-button"><?php esc_html_e( 'Get Started', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-base-color has-text-color has-link-color wp-element-button"><?php esc_html_e( 'Learn More', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

26
patterns/hero-cover.php Normal file
View File

@@ -0,0 +1,26 @@
<?php
/**
* Title: Hero with cover image
* Slug: wp-bootstrap/hero-cover
* Categories: wp-bootstrap_hero, banner, featured
* Description: A full-width hero section with a cover image, heading, paragraph, and call to action button.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:cover {"dimRatio":60,"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":500,"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull" style="min-height:500px"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-60 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1,"fontSize":"display"} -->
<h1 class="wp-block-heading has-text-align-center has-display-font-size"><?php esc_html_e( 'Build something amazing', 'wp-bootstrap' ); ?></h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><?php esc_html_e( 'Create modern, responsive websites with the power of Bootstrap 5 and the WordPress Site Editor.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"fontSize":"medium"} -->
<div class="wp-block-button has-custom-font-size has-medium-font-size"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Get Started', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

40
patterns/hero-split.php Normal file
View File

@@ -0,0 +1,40 @@
<?php
/**
* Title: Hero split with image
* Slug: wp-bootstrap/hero-split
* Categories: wp-bootstrap_hero, banner
* Description: A two-column hero with text on the left and an image placeholder on the right.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"level":1,"fontSize":"display"} -->
<h1 class="wp-block-heading has-display-font-size"><?php esc_html_e( 'Modern design meets powerful features', 'wp-bootstrap' ); ?></h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size"><?php esc_html_e( 'A WordPress theme built from the ground up with Bootstrap 5 for a seamless editing and browsing experience.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Learn More', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'View Demo', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"sizeSlug":"large","style":{"border":{"radius":"0.5rem"}}} -->
<figure class="wp-block-image size-large" style="border-radius:0.5rem"><img src="" alt="<?php esc_attr_e( 'Hero image', 'wp-bootstrap' ); ?>"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

46
patterns/hidden-sidebar.php Normal file
View File

@@ -0,0 +1,46 @@
<?php
/**
* Title: Sidebar
* Slug: wp-bootstrap/hidden-sidebar
* Inserter: no
* Description: Sidebar content with recent posts, search, and tag cloud.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"small","style":{"typography":{"textTransform":"uppercase","fontWeight":"600","letterSpacing":"1.6px"}}} -->
<h3 class="wp-block-heading has-small-font-size" style="font-weight:600;letter-spacing:1.6px;text-transform:uppercase"><?php esc_html_e( 'Recent Posts', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":99,"query":{"perPage":4,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":false}} -->
<!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:post-title {"level":4,"isLink":true,"fontSize":"medium"} /-->
<!-- wp:post-date {"fontSize":"small"} /-->
</div>
<!-- /wp:group -->
<!-- /wp:post-template -->
<!-- /wp:query -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:heading {"level":3,"fontSize":"small","style":{"typography":{"textTransform":"uppercase","fontWeight":"600","letterSpacing":"1.6px"}}} -->
<h3 class="wp-block-heading has-small-font-size" style="font-weight:600;letter-spacing:1.6px;text-transform:uppercase"><?php esc_html_e( 'Search', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:search {"label":"<?php esc_attr_e( 'Search', 'wp-bootstrap' ); ?>","showLabel":false,"placeholder":"<?php esc_attr_e( 'Search...', 'wp-bootstrap' ); ?>","buttonText":"<?php esc_attr_e( 'Search', 'wp-bootstrap' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true} /-->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:heading {"level":3,"fontSize":"small","style":{"typography":{"textTransform":"uppercase","fontWeight":"600","letterSpacing":"1.6px"}}} -->
<h3 class="wp-block-heading has-small-font-size" style="font-weight:600;letter-spacing:1.6px;text-transform:uppercase"><?php esc_html_e( 'Tags', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:tag-cloud {"numberOfTags":15,"taxonomy":"post_tag","showTagCounts":false} /--></div>
<!-- /wp:group -->

136
patterns/pricing-3-col.php Normal file
View File

@@ -0,0 +1,136 @@
<?php
/**
* Title: Pricing three columns
* Slug: wp-bootstrap/pricing-3-col
* Categories: wp-bootstrap_pricing, call-to-action
* Description: Three-column pricing cards with feature lists and call to action buttons.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Pricing', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Choose the plan that works best for you.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|40"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"is-style-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-card" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Basic', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"display","style":{"typography":{"fontWeight":"700"}}} -->
<p class="has-text-align-center has-display-font-size" style="font-weight:700"><?php esc_html_e( 'Free', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list {"className":"is-style-list-unstyled","style":{"spacing":{"blockGap":"var:preset|spacing|20"},"typography":{"textAlign":"center"}}} -->
<ul class="is-style-list-unstyled" style="text-align:center"><!-- wp:list-item -->
<li><?php esc_html_e( '1 Website', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><?php esc_html_e( 'Community Support', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><?php esc_html_e( 'Core Features', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:button {"className":"is-style-outline","width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Get Started', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"is-style-card-shadow","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}},"border":{"width":"2px","color":"var:preset|color|primary"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-card-shadow" style="border-color:var(--wp--preset--color--primary);border-width:2px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Professional', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"display","style":{"typography":{"fontWeight":"700"}}} -->
<p class="has-text-align-center has-display-font-size" style="font-weight:700"><?php
/* translators: pricing amount */
esc_html_e( '$49', 'wp-bootstrap' );
?></p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list {"className":"is-style-list-unstyled","style":{"spacing":{"blockGap":"var:preset|spacing|20"},"typography":{"textAlign":"center"}}} -->
<ul class="is-style-list-unstyled" style="text-align:center"><!-- wp:list-item -->
<li><?php esc_html_e( '5 Websites', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><?php esc_html_e( 'Priority Support', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><?php esc_html_e( 'All Features', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Get Started', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"is-style-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-card" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Enterprise', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"display","style":{"typography":{"fontWeight":"700"}}} -->
<p class="has-text-align-center has-display-font-size" style="font-weight:700"><?php
/* translators: pricing amount */
esc_html_e( '$199', 'wp-bootstrap' );
?></p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list {"className":"is-style-list-unstyled","style":{"spacing":{"blockGap":"var:preset|spacing|20"},"typography":{"textAlign":"center"}}} -->
<ul class="is-style-list-unstyled" style="text-align:center"><!-- wp:list-item -->
<li><?php esc_html_e( 'Unlimited Websites', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><?php esc_html_e( 'Dedicated Support', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><?php esc_html_e( 'Custom Development', 'wp-bootstrap' ); ?></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:button {"className":"is-style-outline","width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Contact Us', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

30
patterns/testimonials-2-col.php Normal file
View File

@@ -0,0 +1,30 @@
<?php
/**
* Title: Testimonials two columns
* Slug: wp-bootstrap/testimonials-2-col
* Categories: wp-bootstrap_testimonials, testimonials
* Description: Two-column testimonials with quote blocks and citations.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'What our clients say', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:quote {"fontSize":"medium"} -->
<blockquote class="wp-block-quote has-medium-font-size"><p><?php esc_html_e( 'This theme completely transformed our website. The Bootstrap integration makes it incredibly easy to create professional-looking pages without any custom code.', 'wp-bootstrap' ); ?></p><cite><?php esc_html_e( 'Jane Doe, Web Designer', 'wp-bootstrap' ); ?></cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:quote {"fontSize":"medium"} -->
<blockquote class="wp-block-quote has-medium-font-size"><p><?php esc_html_e( 'The dark mode support and style variations give us the flexibility we need. Our clients love being able to switch between color schemes effortlessly.', 'wp-bootstrap' ); ?></p><cite><?php esc_html_e( 'John Smith, Developer', 'wp-bootstrap' ); ?></cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

16
patterns/testimonials-centered.php Normal file
View File

@@ -0,0 +1,16 @@
<?php
/**
* Title: Testimonial centered
* Slug: wp-bootstrap/testimonials-centered
* Categories: wp-bootstrap_testimonials, testimonials
* Description: A single large centered testimonial with citation.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:quote {"textAlign":"center","fontSize":"x-large","style":{"typography":{"fontStyle":"italic","fontWeight":"300"}}} -->
<blockquote class="wp-block-quote has-text-align-center has-x-large-font-size" style="font-style:italic;font-weight:300"><p><?php esc_html_e( 'The best WordPress theme we have ever used. Clean code, beautiful design, and incredible flexibility.', 'wp-bootstrap' ); ?></p><cite><?php esc_html_e( 'Alex Johnson, Creative Director', 'wp-bootstrap' ); ?></cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:group -->

40
patterns/text-about.php Normal file
View File

@@ -0,0 +1,40 @@
<?php
/**
* Title: About section
* Slug: wp-bootstrap/text-about
* Categories: wp-bootstrap_text, text
* Description: A two-column about section with text content and an image.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-xx-large-font-size"><?php esc_html_e( 'About us', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p><?php esc_html_e( 'We are passionate about creating tools that empower people to build beautiful websites. Our theme combines the reliability of Bootstrap with the flexibility of WordPress.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'With years of experience in web development and design, we understand what it takes to create a theme that is both powerful and easy to use.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Learn More', 'wp-bootstrap' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"sizeSlug":"large","style":{"border":{"radius":"0.5rem"}}} -->
<figure class="wp-block-image size-large" style="border-radius:0.5rem"><img src="" alt="<?php esc_attr_e( 'About us image', 'wp-bootstrap' ); ?>"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

70
patterns/text-faq.php Normal file
View File

@@ -0,0 +1,70 @@
<?php
/**
* Title: Frequently asked questions
* Slug: wp-bootstrap/text-faq
* Categories: wp-bootstrap_text, text
* Description: An FAQ section with question and answer pairs.
*
* @package WPBootstrap
* @since 0.1.0
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Frequently Asked Questions', 'wp-bootstrap' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"constrained","contentSize":"720px"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'How do I install the theme?', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Download the ZIP file from the releases page, then upload it via WordPress Admin > Appearance > Themes > Add New > Upload Theme.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'Does it work with the Site Editor?', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Yes, this is a Full Site Editing block theme. You can customize templates, headers, footers, and all block patterns using the WordPress Site Editor.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'Can I use my own fonts?', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'The theme comes with Inter, Lora, and system font stacks. You can add custom fonts through the Site Editor or by modifying theme.json.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size"><?php esc_html_e( 'Is dark mode supported?', 'wp-bootstrap' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"textColor":"secondary"} -->
<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Yes, the theme includes a dark mode toggle that uses Bootstrap 5.3 built-in dark mode. It respects system preferences and remembers your choice.', 'wp-bootstrap' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->