You've already forked wp-bootstrap
v0.1.0 - Core Theme: patterns, dark mode, block styles, style variations
- 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:
222
functions.php
222
functions.php
@@ -62,6 +62,25 @@ if ( ! function_exists( 'wp_bootstrap_enqueue_scripts' ) ) :
|
||||
$theme_version,
|
||||
true
|
||||
);
|
||||
|
||||
// Enqueue dark mode toggle script.
|
||||
wp_enqueue_script(
|
||||
'wp-bootstrap-dark-mode',
|
||||
get_template_directory_uri() . '/assets/js/dark-mode.js',
|
||||
array(),
|
||||
$theme_version,
|
||||
array(
|
||||
'strategy' => 'defer',
|
||||
'in_footer' => false,
|
||||
)
|
||||
);
|
||||
|
||||
// Inline script to prevent flash of wrong theme.
|
||||
wp_add_inline_script(
|
||||
'wp-bootstrap-dark-mode',
|
||||
'(function(){var t=localStorage.getItem("wp-bootstrap-theme")||(window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light");document.documentElement.setAttribute("data-bs-theme",t)})();',
|
||||
'before'
|
||||
);
|
||||
}
|
||||
endif;
|
||||
add_action( 'wp_enqueue_scripts', 'wp_bootstrap_enqueue_scripts' );
|
||||
@@ -78,10 +97,213 @@ if ( ! function_exists( 'wp_bootstrap_pattern_categories' ) ) :
|
||||
'description' => __( 'A collection of full page layouts.', 'wp-bootstrap' ),
|
||||
)
|
||||
);
|
||||
|
||||
register_block_pattern_category(
|
||||
'wp-bootstrap_hero',
|
||||
array(
|
||||
'label' => __( 'Hero Sections', 'wp-bootstrap' ),
|
||||
'description' => __( 'Large hero and banner sections.', 'wp-bootstrap' ),
|
||||
)
|
||||
);
|
||||
|
||||
register_block_pattern_category(
|
||||
'wp-bootstrap_cta',
|
||||
array(
|
||||
'label' => __( 'Call to Action', 'wp-bootstrap' ),
|
||||
'description' => __( 'Call to action sections.', 'wp-bootstrap' ),
|
||||
)
|
||||
);
|
||||
|
||||
register_block_pattern_category(
|
||||
'wp-bootstrap_features',
|
||||
array(
|
||||
'label' => __( 'Features', 'wp-bootstrap' ),
|
||||
'description' => __( 'Feature and service showcase sections.', 'wp-bootstrap' ),
|
||||
)
|
||||
);
|
||||
|
||||
register_block_pattern_category(
|
||||
'wp-bootstrap_testimonials',
|
||||
array(
|
||||
'label' => __( 'Testimonials', 'wp-bootstrap' ),
|
||||
'description' => __( 'Testimonial and review sections.', 'wp-bootstrap' ),
|
||||
)
|
||||
);
|
||||
|
||||
register_block_pattern_category(
|
||||
'wp-bootstrap_pricing',
|
||||
array(
|
||||
'label' => __( 'Pricing', 'wp-bootstrap' ),
|
||||
'description' => __( 'Pricing table sections.', 'wp-bootstrap' ),
|
||||
)
|
||||
);
|
||||
|
||||
register_block_pattern_category(
|
||||
'wp-bootstrap_contact',
|
||||
array(
|
||||
'label' => __( 'Contact', 'wp-bootstrap' ),
|
||||
'description' => __( 'Contact information sections.', 'wp-bootstrap' ),
|
||||
)
|
||||
);
|
||||
|
||||
register_block_pattern_category(
|
||||
'wp-bootstrap_text',
|
||||
array(
|
||||
'label' => __( 'Text & Content', 'wp-bootstrap' ),
|
||||
'description' => __( 'Text-focused content sections.', 'wp-bootstrap' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
endif;
|
||||
add_action( 'init', 'wp_bootstrap_pattern_categories' );
|
||||
|
||||
/**
|
||||
* Register custom block styles for Bootstrap components.
|
||||
*
|
||||
* @since 0.1.0
|
||||
*/
|
||||
if ( ! function_exists( 'wp_bootstrap_block_styles' ) ) :
|
||||
function wp_bootstrap_block_styles() {
|
||||
// core/list - Checkmark style.
|
||||
register_block_style( 'core/list', array(
|
||||
'name' => 'checkmark-list',
|
||||
'label' => __( 'Checkmark', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
ul.is-style-checkmark-list { list-style-type: "\2713"; }
|
||||
ul.is-style-checkmark-list li { padding-inline-start: 1ch; }',
|
||||
) );
|
||||
|
||||
// core/list - Unstyled.
|
||||
register_block_style( 'core/list', array(
|
||||
'name' => 'list-unstyled',
|
||||
'label' => __( 'Unstyled', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
ul.is-style-list-unstyled, ol.is-style-list-unstyled { list-style: none; padding-left: 0; }',
|
||||
) );
|
||||
|
||||
// core/group - Card.
|
||||
register_block_style( 'core/group', array(
|
||||
'name' => 'card',
|
||||
'label' => __( 'Card', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-card { border: 1px solid var(--wp--preset--color--light, #dee2e6); border-radius: 0.375rem; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--base); }',
|
||||
) );
|
||||
|
||||
// core/group - Card with Shadow.
|
||||
register_block_style( 'core/group', array(
|
||||
'name' => 'card-shadow',
|
||||
'label' => __( 'Card with Shadow', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-card-shadow { border: 1px solid var(--wp--preset--color--light, #dee2e6); border-radius: 0.375rem; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--base); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }',
|
||||
) );
|
||||
|
||||
// core/group - Alert Info.
|
||||
register_block_style( 'core/group', array(
|
||||
'name' => 'alert-info',
|
||||
'label' => __( 'Alert - Info', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-alert-info { background-color: #cff4fc; border: 1px solid #9eeaf9; color: #055160; border-radius: 0.375rem; padding: var(--wp--preset--spacing--30); }',
|
||||
) );
|
||||
|
||||
// core/group - Alert Success.
|
||||
register_block_style( 'core/group', array(
|
||||
'name' => 'alert-success',
|
||||
'label' => __( 'Alert - Success', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-alert-success { background-color: #d1e7dd; border: 1px solid #a3cfbb; color: #0a3622; border-radius: 0.375rem; padding: var(--wp--preset--spacing--30); }',
|
||||
) );
|
||||
|
||||
// core/group - Alert Warning.
|
||||
register_block_style( 'core/group', array(
|
||||
'name' => 'alert-warning',
|
||||
'label' => __( 'Alert - Warning', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-alert-warning { background-color: #fff3cd; border: 1px solid #ffe69c; color: #664d03; border-radius: 0.375rem; padding: var(--wp--preset--spacing--30); }',
|
||||
) );
|
||||
|
||||
// core/group - Alert Danger.
|
||||
register_block_style( 'core/group', array(
|
||||
'name' => 'alert-danger',
|
||||
'label' => __( 'Alert - Danger', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-alert-danger { background-color: #f8d7da; border: 1px solid #f1aeb5; color: #58151c; border-radius: 0.375rem; padding: var(--wp--preset--spacing--30); }',
|
||||
) );
|
||||
|
||||
// core/table - Striped Rows.
|
||||
register_block_style( 'core/table', array(
|
||||
'name' => 'table-striped',
|
||||
'label' => __( 'Striped Rows', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-table-striped tbody tr:nth-of-type(odd) > * { background-color: rgba(0, 0, 0, 0.05); }',
|
||||
) );
|
||||
|
||||
// core/table - Hover Rows.
|
||||
register_block_style( 'core/table', array(
|
||||
'name' => 'table-hover',
|
||||
'label' => __( 'Hover Rows', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-table-hover tbody tr:hover > * { background-color: rgba(0, 0, 0, 0.075); }',
|
||||
) );
|
||||
|
||||
// core/table - Bordered.
|
||||
register_block_style( 'core/table', array(
|
||||
'name' => 'table-bordered',
|
||||
'label' => __( 'Bordered', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-table-bordered, .is-style-table-bordered td, .is-style-table-bordered th { border: 1px solid var(--wp--preset--color--light, #dee2e6); }',
|
||||
) );
|
||||
|
||||
// core/quote - Accent Border.
|
||||
register_block_style( 'core/quote', array(
|
||||
'name' => 'blockquote-accent',
|
||||
'label' => __( 'Accent Border', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-blockquote-accent { border-left: 4px solid var(--wp--preset--color--primary); background: var(--wp--preset--color--light); padding: var(--wp--preset--spacing--30); border-radius: 0 0.375rem 0.375rem 0; }',
|
||||
) );
|
||||
|
||||
// core/image - Shadow.
|
||||
register_block_style( 'core/image', array(
|
||||
'name' => 'shadow',
|
||||
'label' => __( 'Shadow', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-shadow img { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }',
|
||||
) );
|
||||
|
||||
// core/image - Large Rounded.
|
||||
register_block_style( 'core/image', array(
|
||||
'name' => 'rounded-lg',
|
||||
'label' => __( 'Large Rounded', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-rounded-lg img { border-radius: 0.75rem; }',
|
||||
) );
|
||||
|
||||
// core/button - Large.
|
||||
register_block_style( 'core/button', array(
|
||||
'name' => 'btn-lg',
|
||||
'label' => __( 'Large', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-btn-lg .wp-block-button__link { padding: 0.75rem 1.5rem; font-size: 1.25rem; border-radius: 0.5rem; }',
|
||||
) );
|
||||
|
||||
// core/button - Small.
|
||||
register_block_style( 'core/button', array(
|
||||
'name' => 'btn-sm',
|
||||
'label' => __( 'Small', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-btn-sm .wp-block-button__link { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem; }',
|
||||
) );
|
||||
|
||||
// core/separator - Wide.
|
||||
register_block_style( 'core/separator', array(
|
||||
'name' => 'separator-wide',
|
||||
'label' => __( 'Wide', 'wp-bootstrap' ),
|
||||
'inline_style' => '
|
||||
.is-style-separator-wide { max-width: none; }',
|
||||
) );
|
||||
}
|
||||
endif;
|
||||
add_action( 'init', 'wp_bootstrap_block_styles' );
|
||||
|
||||
/**
|
||||
* Initialize Twig template engine.
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user