autonomic-cooperative/autonomic-block-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

turn "tab" style headings into block style
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Aadil Ayub
2023-08-29 15:37:47 +05:00
parent 2eb70c8f54
commit 95efe847b8
4 changed files with 53 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
block-styles.css Normal file
View File

@ -0,0 +1,28 @@
/* For the "Tabbed Heading" block style */
.tabbed-heading {
display: flex;
height: 36px;
align-items: center;
border-top: 1px solid;
}
.tabbed-heading::before {
content: "";
border-bottom: 1px solid;
border-right: 1px solid;
width: 80px;
margin-right: 8px;
height: 36px;
border-top: 2px solid var(--wp--preset--color--background);
}
.tabbed-heading::after {
content: "";
border-bottom: 1px solid;
flex-grow: 1;
margin-left: 8px;
height: 36px;
border-left: 1px solid;
border-top: 2px solid var(--wp--preset--color--background);
}

18
functions.php
View File

@ -4,5 +4,21 @@ add_action('init', 'custom_stylesheet');
function custom_stylesheet() {
wp_register_style( 'custom-styles', get_template_directory_uri() . '/style.css' );
/**
* making sure css from block styles gets loaded on front-end
* TODO: unify both css files into one stylesheet
*/
wp_register_style( 'block-styles', get_theme_file_uri( 'block-styles.css' ) );
}
wp_enqueue_style( 'custom-styles' );
wp_enqueue_style( 'custom-styles' );
function autonomic_block_styles() {
/**
* Enable support for block editor styles
* @link https://developer.wordpress.org/themes/basics/theme-functions/#theme-support-in-block-themes
*/
add_theme_support( 'editor-styles' );
add_theme_support( 'wp-block-styles' );
add_editor_style( 'block-styles.css' );
}

8
js/block-styles.js Normal file
View File

@ -0,0 +1,8 @@
wp.domReady( () => {
wp.blocks.registerBlockStyle(
'core/', {
name: 'tabbed-heading',
label: 'Tabbed Heading',
}
)
} )

27
style.css
View File

@ -31,33 +31,6 @@ html, body {
height: 100%;
}
.wp-site-blocks h2 {
display: flex;
height: 36px;
align-items: center;
border-top: 1px solid;
}
.wp-site-blocks h2::before {
content: "";
border-bottom: 1px solid;
border-right: 1px solid;
width: 80px;
margin-right: 8px;
height: 36px;
border-top: 2px solid var(--wp--preset--color--background);
}
.wp-site-blocks h2::after {
content: "";
border-bottom: 1px solid;
flex-grow: 1;
margin-left: 8px;
height: 36px;
border-left: 1px solid;
border-top: 2px solid var(--wp--preset--color--background);
}
.wp-site-blocks h2.blog-post-heading {
border-top: none;