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

create markdown heading 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 17:11:33 +05:00
parent 0492c109ea
commit 05f5156a1e
3 changed files with 38 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
block-styles.css
View File

@ -26,3 +26,26 @@
border-left: 1px solid; border-left: 1px solid;
border-top: 2px solid var(--wp--preset--color--background); border-top: 2px solid var(--wp--preset--color--background);
} }
/* For the "Markdown-style Heading" block style */
.is-style-markdown-heading::before {
content: "##";
width: 4ch;
margin-right: 0;
font-family: monospace;
margin-inline-end: .3em;
letter-spacing: 2px;
}
@media screen and (max-width: 782px) {
.is-style-markdown-heading::before {
margin-inline-start: 1em;
}
}
@media screen and (min-width: 782px) {
.is-style-markdown-heading {
margin-top: 4em;
font-size: var(--wp--preset--font-size--medium);
}
}

14
js/block-styles.js
View File

@ -12,4 +12,18 @@ wp.domReady( () => {
label: 'Tabbed Heading', label: 'Tabbed Heading',
} }
) )
wp.blocks.registerBlockStyle(
'core/heading', {
name: 'markdown-heading',
label: 'Markdown-style Heading',
}
)
wp.blocks.registerBlockStyle(
'core/post-title', {
name: 'markdown-heading',
label: 'Markdown-style Heading',
}
)
} ) } )

39
style.css
View File

@ -31,42 +31,12 @@ html, body {
height: 100%; height: 100%;
} }
.wp-site-blocks h2.blog-post-heading {
border-top: none;
height: revert;
container-type: inline-size;
}
@container (max-width: 20ch) { @container (max-width: 20ch) {
.wp-site-blocks h2::before { .wp-site-blocks h2::before {
width: 7ch; width: 7ch;
} }
} }
.wp-site-blocks h2.blog-post-heading::before {
content: "##";
border-bottom: none;
border-right: none;
width: 4ch;
margin-right: 0;
height: revert;
border-top: none;
font-family: monospace;
margin-inline-end: .3em;
letter-spacing: 2px;
}
.wp-site-blocks h2.blog-post-heading::after {
content: none;
border-bottom: none;
flex-grow: 1;
margin-left: 0;
height: revert;
border-left: none;
border-top: none;
}
.home .wp-site-blocks ul { .home .wp-site-blocks ul {
list-style-image: url('https://beta.autonomic.zone/wp-content/uploads/2023/01/arrow.png'); list-style-image: url('https://beta.autonomic.zone/wp-content/uploads/2023/01/arrow.png');
} }
@ -159,10 +129,6 @@ html, body {
line-height: 1.5 !important; line-height: 1.5 !important;
margin-top: 40px !important; margin-top: 40px !important;
} }
.wp-site-blocks h2.blog-post-heading::before {
margin-inline-start: 1em;
}
} }
@media screen and (min-width: 600px){ @media screen and (min-width: 600px){
@ -224,9 +190,4 @@ html, body {
.wp-site-blocks .category-portfolio h2 { .wp-site-blocks .category-portfolio h2 {
margin-block: 40px !important; margin-block: 40px !important;
} }
.wp-site-blocks h2.blog-post-heading {
margin-top: 4em;
font-size: var(--wp--preset--font-size--medium);
}
} }