first commit
This commit is contained in:
CHIEFSOFT\ameye
+122
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.is-style-cnvs-heading-numbered {
|
||||
--cnvs-heading-numbered-background: #ced4da;
|
||||
--cnvs-heading-numbered-color: white;
|
||||
--cnvs-heading-numbered-border-radius: 50%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.editor-styles-wrapper {
|
||||
counter-reset: h2;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] {
|
||||
counter-increment: h2;
|
||||
counter-reset: h3;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"] {
|
||||
counter-increment: h3;
|
||||
counter-reset: h4;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-4"] {
|
||||
counter-increment: h4;
|
||||
counter-reset: h5;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-5"] {
|
||||
counter-increment: h5;
|
||||
counter-reset: h6;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-6"] {
|
||||
counter-increment: h6;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-heading-numbered:before {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"].is-style-cnvs-heading-numbered:before {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
border-radius: var(--cnvs-heading-numbered-border-radius);
|
||||
background: var(--cnvs-heading-numbered-background);
|
||||
color: var(--cnvs-heading-numbered-color);
|
||||
content: counter(h2);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] ~ .wp-block[data-heading="cnvs-heading-numbered-3"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-4"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] ~ .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-5"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h5);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] ~ .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h6);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-5"] ~ .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"] ~ .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"] ~ .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] ~ .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"] ~ .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.is-style-cnvs-heading-numbered {
|
||||
--cnvs-heading-numbered-background: #ced4da;
|
||||
--cnvs-heading-numbered-color: white;
|
||||
--cnvs-heading-numbered-border-radius: 50%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.editor-styles-wrapper {
|
||||
counter-reset: h2;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] {
|
||||
counter-increment: h2;
|
||||
counter-reset: h3;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"] {
|
||||
counter-increment: h3;
|
||||
counter-reset: h4;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-4"] {
|
||||
counter-increment: h4;
|
||||
counter-reset: h5;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-5"] {
|
||||
counter-increment: h5;
|
||||
counter-reset: h6;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-6"] {
|
||||
counter-increment: h6;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-heading-numbered:before {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"].is-style-cnvs-heading-numbered:before {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
float: left;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
border-radius: var(--cnvs-heading-numbered-border-radius);
|
||||
background: var(--cnvs-heading-numbered-background);
|
||||
color: var(--cnvs-heading-numbered-color);
|
||||
content: counter(h2);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] ~ .wp-block[data-heading="cnvs-heading-numbered-3"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-4"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] ~ .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-5"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h5);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] ~ .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h6);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-5"] ~ .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"] ~ .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"] ~ .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block[data-heading="cnvs-heading-numbered-2"] ~ .wp-block[data-heading="cnvs-heading-numbered-3"] ~ .wp-block[data-heading="cnvs-heading-numbered-4"] ~ .wp-block[data-heading="cnvs-heading-numbered-5"] ~ .wp-block[data-heading="cnvs-heading-numbered-6"].is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.is-style-cnvs-heading-numbered {
|
||||
--cnvs-heading-numbered-background: #ced4da;
|
||||
--cnvs-heading-numbered-color: white;
|
||||
--cnvs-heading-numbered-border-radius: 50rem;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.content,
|
||||
.entry-content {
|
||||
counter-reset: h2;
|
||||
}
|
||||
|
||||
.content h2,
|
||||
.entry-content h2 {
|
||||
counter-reset: h3;
|
||||
}
|
||||
|
||||
.content h3,
|
||||
.entry-content h3 {
|
||||
counter-reset: h4;
|
||||
}
|
||||
|
||||
.content h4,
|
||||
.entry-content h4 {
|
||||
counter-reset: h5;
|
||||
}
|
||||
|
||||
.content h5,
|
||||
.entry-content h5 {
|
||||
counter-reset: h6;
|
||||
}
|
||||
|
||||
.is-style-cnvs-heading-numbered {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-heading-numbered:before {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered:before {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding-right: 0.15em;
|
||||
padding-left: 0.15em;
|
||||
height: 1.25em;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 1.25em;
|
||||
flex: 0 0 1.25em;
|
||||
border-radius: var(--cnvs-heading-numbered-border-radius);
|
||||
background: var(--cnvs-heading-numbered-background);
|
||||
color: var(--cnvs-heading-numbered-color);
|
||||
counter-increment: h2;
|
||||
content: counter(h2);
|
||||
}
|
||||
|
||||
h3.is-style-cnvs-heading-numbered:before {
|
||||
counter-increment: h3;
|
||||
content: counter(h3);
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered ~ h3.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3);
|
||||
}
|
||||
|
||||
h4.is-style-cnvs-heading-numbered:before {
|
||||
counter-increment: h4;
|
||||
content: counter(h4);
|
||||
}
|
||||
|
||||
h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4);
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered ~ h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4);
|
||||
}
|
||||
|
||||
h5.is-style-cnvs-heading-numbered:before {
|
||||
counter-increment: h5;
|
||||
content: counter(h5);
|
||||
}
|
||||
|
||||
h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered ~ h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
h6.is-style-cnvs-heading-numbered:before {
|
||||
counter-increment: h6;
|
||||
content: counter(h6);
|
||||
}
|
||||
|
||||
h5.is-style-cnvs-heading-numbered ~ h6.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered ~ h6.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered ~ h6.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered ~ h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered ~ h6.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.is-style-cnvs-heading-numbered {
|
||||
--cnvs-heading-numbered-background: #ced4da;
|
||||
--cnvs-heading-numbered-color: white;
|
||||
--cnvs-heading-numbered-border-radius: 50rem;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.content,
|
||||
.entry-content {
|
||||
counter-reset: h2;
|
||||
}
|
||||
|
||||
.content h2,
|
||||
.entry-content h2 {
|
||||
counter-reset: h3;
|
||||
}
|
||||
|
||||
.content h3,
|
||||
.entry-content h3 {
|
||||
counter-reset: h4;
|
||||
}
|
||||
|
||||
.content h4,
|
||||
.entry-content h4 {
|
||||
counter-reset: h5;
|
||||
}
|
||||
|
||||
.content h5,
|
||||
.entry-content h5 {
|
||||
counter-reset: h6;
|
||||
}
|
||||
|
||||
.is-style-cnvs-heading-numbered {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-heading-numbered:before {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered:before {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding-left: 0.15em;
|
||||
padding-right: 0.15em;
|
||||
height: 1.25em;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 1.25em;
|
||||
flex: 0 0 1.25em;
|
||||
border-radius: var(--cnvs-heading-numbered-border-radius);
|
||||
background: var(--cnvs-heading-numbered-background);
|
||||
color: var(--cnvs-heading-numbered-color);
|
||||
counter-increment: h2;
|
||||
content: counter(h2);
|
||||
}
|
||||
|
||||
h3.is-style-cnvs-heading-numbered:before {
|
||||
counter-increment: h3;
|
||||
content: counter(h3);
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered ~ h3.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3);
|
||||
}
|
||||
|
||||
h4.is-style-cnvs-heading-numbered:before {
|
||||
counter-increment: h4;
|
||||
content: counter(h4);
|
||||
}
|
||||
|
||||
h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4);
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered ~ h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4);
|
||||
}
|
||||
|
||||
h5.is-style-cnvs-heading-numbered:before {
|
||||
counter-increment: h5;
|
||||
content: counter(h5);
|
||||
}
|
||||
|
||||
h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered ~ h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
|
||||
}
|
||||
|
||||
h6.is-style-cnvs-heading-numbered:before {
|
||||
counter-increment: h6;
|
||||
content: counter(h6);
|
||||
}
|
||||
|
||||
h5.is-style-cnvs-heading-numbered ~ h6.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered ~ h6.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered ~ h6.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
|
||||
h2.is-style-cnvs-heading-numbered ~ h3.is-style-cnvs-heading-numbered ~ h4.is-style-cnvs-heading-numbered ~ h5.is-style-cnvs-heading-numbered ~ h6.is-style-cnvs-heading-numbered:before {
|
||||
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=94)}({1:function(e,t,r){var n;
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n)){if(n.length){var a=o.apply(null,n);a&&e.push(a)}}else if("object"===i)if(n.toString===Object.prototype.toString)for(var u in n)r.call(n,u)&&n[u]&&e.push(u);else e.push(n.toString())}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(n=function(){return o}.apply(t,[]))||(e.exports=n)}()},94:function(e,t,r){e.exports=r(95)},95:function(e,t,r){"use strict";r.r(t);var n=r(1),o=r.n(n);function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var a=wp.i18n.__,u=wp.blocks.registerBlockStyle,c=wp.hooks.addFilter,l=wp.compose.createHigherOrderComponent;u("core/heading",{name:"cnvs-heading-numbered",label:a("Numbered")}),c("editor.BlockListBlock","canvas/heading/numberedAdditionalAttributes",l((function(e){return function(t){var r=t.attributes,n=t.name,a=r.level,u=r.className;return"core/heading"===n&&/is-style-cnvs-heading-numbered/.test(u)?(u=o()(u,"cnvs-heading-numbered-".concat(a)),wp.element.createElement(e,i({},t,{className:u,wrapperProps:{"data-heading":"cnvs-heading-numbered-".concat(a)}}))):wp.element.createElement(e,t)}}),"canvasHeadingNumberedAdditionalAttributes"))}});
|
||||
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
registerBlockStyle,
|
||||
} = wp.blocks;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
createHigherOrderComponent,
|
||||
} = wp.compose;
|
||||
|
||||
registerBlockStyle( 'core/heading', {
|
||||
name: 'cnvs-heading-numbered',
|
||||
label: __( 'Numbered' ),
|
||||
} );
|
||||
|
||||
const canvasHeadingNumberedAdditionalAttributes = createHigherOrderComponent( ( BlockListBlock ) => {
|
||||
return ( props ) => {
|
||||
const {
|
||||
attributes,
|
||||
name,
|
||||
} = props;
|
||||
|
||||
const {
|
||||
level,
|
||||
} = attributes;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = attributes;
|
||||
|
||||
if ( 'core/heading' !== name || ! /is-style-cnvs-heading-numbered/.test( className ) ) {
|
||||
return <BlockListBlock { ...props } />;
|
||||
}
|
||||
|
||||
className = classnames(
|
||||
className,
|
||||
`cnvs-heading-numbered-${ level }`
|
||||
);
|
||||
|
||||
return (
|
||||
<BlockListBlock
|
||||
{ ...props }
|
||||
className={ className }
|
||||
wrapperProps={{ 'data-heading': `cnvs-heading-numbered-${ level }` }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
}, 'canvasHeadingNumberedAdditionalAttributes' );
|
||||
|
||||
addFilter( 'editor.BlockListBlock', 'canvas/heading/numberedAdditionalAttributes', canvasHeadingNumberedAdditionalAttributes );
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
[class*="is-style-cnvs-list-styled"] {
|
||||
--cnvs-list-styled-line-height: 1.5;
|
||||
--cnvs-list-styled-font-size: 1rem;
|
||||
--cnvs-list-styled-children-font-size: 0.875rem;
|
||||
--cnvs-list-styled-ul-box-background: #ced4da;
|
||||
--cnvs-list-styled-ul-box-border-radius: 0;
|
||||
--cnvs-list-styled-ul-positive-box-color: #28a745;
|
||||
--cnvs-list-styled-ul-negative-box-color: #dc3545;
|
||||
--cnvs-list-styled-ol-box-color: #495057;
|
||||
--cnvs-list-styled-ol-box-font-size: 0.875rem;
|
||||
--cnvs-list-styled-ol-box-font-weight: 600;
|
||||
--cnvs-list-styled-ol-box-background-color: #e9ecef;
|
||||
--cnvs-list-styled-ol-box-border-radius: 50%;
|
||||
--cnvs-list-styled-ol-positive-box-background-color: #28a745;
|
||||
--cnvs-list-styled-ol-negative-box-background-color: #dc3545;
|
||||
--cnvs-list-styled-ol-positive-box-color: #fff;
|
||||
--cnvs-list-styled-ol-negative-box-color: #fff;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative {
|
||||
line-height: var(--cnvs-list-styled-line-height);
|
||||
list-style: none;
|
||||
font-size: var(--cnvs-list-styled-font-size);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled:not(:first-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive:not(:first-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative:not(:first-child) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled:not(:last-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive:not(:last-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled li:not(:first-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive li:not(:first-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative li:not(:first-child) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled > li,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive > li,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative > li {
|
||||
position: relative;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled > li:before,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive > li:before,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative > li:before {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-positive,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-negative {
|
||||
counter-reset: ol;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled > li:before,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-positive > li:before,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-negative > li:before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
content: counter(ol);
|
||||
counter-increment: ol;
|
||||
color: var(--cnvs-list-styled-ol-box-color);
|
||||
font-size: var(--cnvs-list-styled-ol-box-font-size);
|
||||
font-weight: var(--cnvs-list-styled-ol-box-font-weight);
|
||||
background-color: var(--cnvs-list-styled-ol-box-background-color);
|
||||
border-radius: var(--cnvs-list-styled-ol-box-border-radius);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled > li:before {
|
||||
content: '';
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
background: var(--cnvs-list-styled-ul-box-background);
|
||||
border-radius: var(--cnvs-list-styled-ul-box-border-radius);
|
||||
margin-top: 0.75rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled ul,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled ol,
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled ol,
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled ul {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-right: 0;
|
||||
font-size: var(--cnvs-list-styled-children-font-size);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled ul > li:not(:first-child),
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled ol > li:not(:first-child),
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled ol > li:not(:first-child),
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled ul > li:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-positive > li:before {
|
||||
background-color: var(--cnvs-list-styled-ol-positive-box-background-color);
|
||||
color: var(--cnvs-list-styled-ol-positive-box-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-negative > li:before {
|
||||
background-color: var(--cnvs-list-styled-ol-negative-box-background-color);
|
||||
color: var(--cnvs-list-styled-ol-negative-box-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled-positive > li:before,
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled-negative > li:before {
|
||||
width: 1.5rem;
|
||||
font-family: 'canvas-icons';
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled-positive > li:before {
|
||||
content: "\e912";
|
||||
color: var(--cnvs-list-styled-ul-positive-box-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled-negative > li:before {
|
||||
content: "\e913";
|
||||
color: var(--cnvs-list-styled-ul-negative-box-color);
|
||||
}
|
||||
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ol,
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ul {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ol.is-style-cnvs-list-styled, .editor-block-styles__item-preview .editor-styles-wrapper ol.is-style-cnvs-list-styled-positive, .editor-block-styles__item-preview .editor-styles-wrapper ol.is-style-cnvs-list-styled-negative,
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ul.is-style-cnvs-list-styled,
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ul.is-style-cnvs-list-styled-positive,
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ul.is-style-cnvs-list-styled-negative {
|
||||
padding-right: 0;
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
[class*="is-style-cnvs-list-styled"] {
|
||||
--cnvs-list-styled-line-height: 1.5;
|
||||
--cnvs-list-styled-font-size: 1rem;
|
||||
--cnvs-list-styled-children-font-size: 0.875rem;
|
||||
--cnvs-list-styled-ul-box-background: #ced4da;
|
||||
--cnvs-list-styled-ul-box-border-radius: 0;
|
||||
--cnvs-list-styled-ul-positive-box-color: #28a745;
|
||||
--cnvs-list-styled-ul-negative-box-color: #dc3545;
|
||||
--cnvs-list-styled-ol-box-color: #495057;
|
||||
--cnvs-list-styled-ol-box-font-size: 0.875rem;
|
||||
--cnvs-list-styled-ol-box-font-weight: 600;
|
||||
--cnvs-list-styled-ol-box-background-color: #e9ecef;
|
||||
--cnvs-list-styled-ol-box-border-radius: 50%;
|
||||
--cnvs-list-styled-ol-positive-box-background-color: #28a745;
|
||||
--cnvs-list-styled-ol-negative-box-background-color: #dc3545;
|
||||
--cnvs-list-styled-ol-positive-box-color: #fff;
|
||||
--cnvs-list-styled-ol-negative-box-color: #fff;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative {
|
||||
line-height: var(--cnvs-list-styled-line-height);
|
||||
list-style: none;
|
||||
font-size: var(--cnvs-list-styled-font-size);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled:not(:first-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive:not(:first-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative:not(:first-child) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled:not(:last-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive:not(:last-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled li:not(:first-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive li:not(:first-child),
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative li:not(:first-child) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled > li,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive > li,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative > li {
|
||||
position: relative;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled > li:before,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-positive > li:before,
|
||||
.editor-styles-wrapper .is-style-cnvs-list-styled-negative > li:before {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-positive,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-negative {
|
||||
counter-reset: ol;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled > li:before,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-positive > li:before,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-negative > li:before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
content: counter(ol);
|
||||
counter-increment: ol;
|
||||
color: var(--cnvs-list-styled-ol-box-color);
|
||||
font-size: var(--cnvs-list-styled-ol-box-font-size);
|
||||
font-weight: var(--cnvs-list-styled-ol-box-font-weight);
|
||||
background-color: var(--cnvs-list-styled-ol-box-background-color);
|
||||
border-radius: var(--cnvs-list-styled-ol-box-border-radius);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled > li:before {
|
||||
content: '';
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
background: var(--cnvs-list-styled-ul-box-background);
|
||||
border-radius: var(--cnvs-list-styled-ul-box-border-radius);
|
||||
margin-top: 0.75rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled ul,
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled ol,
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled ol,
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled ul {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 0;
|
||||
font-size: var(--cnvs-list-styled-children-font-size);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled ul > li:not(:first-child),
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled ol > li:not(:first-child),
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled ol > li:not(:first-child),
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled ul > li:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-positive > li:before {
|
||||
background-color: var(--cnvs-list-styled-ol-positive-box-background-color);
|
||||
color: var(--cnvs-list-styled-ol-positive-box-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ol.is-style-cnvs-list-styled-negative > li:before {
|
||||
background-color: var(--cnvs-list-styled-ol-negative-box-background-color);
|
||||
color: var(--cnvs-list-styled-ol-negative-box-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled-positive > li:before,
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled-negative > li:before {
|
||||
width: 1.5rem;
|
||||
font-family: 'canvas-icons';
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled-positive > li:before {
|
||||
content: "\e912";
|
||||
color: var(--cnvs-list-styled-ul-positive-box-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper ul.is-style-cnvs-list-styled-negative > li:before {
|
||||
content: "\e913";
|
||||
color: var(--cnvs-list-styled-ul-negative-box-color);
|
||||
}
|
||||
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ol,
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ul {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ol.is-style-cnvs-list-styled, .editor-block-styles__item-preview .editor-styles-wrapper ol.is-style-cnvs-list-styled-positive, .editor-block-styles__item-preview .editor-styles-wrapper ol.is-style-cnvs-list-styled-negative,
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ul.is-style-cnvs-list-styled,
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ul.is-style-cnvs-list-styled-positive,
|
||||
.editor-block-styles__item-preview .editor-styles-wrapper ul.is-style-cnvs-list-styled-negative {
|
||||
padding-left: 0;
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
[class*="is-style-cnvs-list-styled"] {
|
||||
--cnvs-list-styled-line-height: 1.5;
|
||||
--cnvs-list-styled-font-size: 1rem;
|
||||
--cnvs-list-styled-children-font-size: 0.875rem;
|
||||
--cnvs-list-styled-ul-box-background: #ced4da;
|
||||
--cnvs-list-styled-ul-box-border-radius: 0;
|
||||
--cnvs-list-styled-ul-positive-box-color: #28a745;
|
||||
--cnvs-list-styled-ul-negative-box-color: #dc3545;
|
||||
--cnvs-list-styled-ol-box-color: #495057;
|
||||
--cnvs-list-styled-ol-box-font-size: 0.875rem;
|
||||
--cnvs-list-styled-ol-box-font-weight: 600;
|
||||
--cnvs-list-styled-ol-box-background-color: #e9ecef;
|
||||
--cnvs-list-styled-ol-box-border-radius: 50%;
|
||||
--cnvs-list-styled-ol-positive-box-background-color: #28a745;
|
||||
--cnvs-list-styled-ol-negative-box-background-color: #dc3545;
|
||||
--cnvs-list-styled-ol-positive-box-color: #fff;
|
||||
--cnvs-list-styled-ol-negative-box-color: #fff;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.is-style-cnvs-list-styled,
|
||||
.is-style-cnvs-list-styled-positive,
|
||||
.is-style-cnvs-list-styled-negative {
|
||||
line-height: var(--cnvs-list-styled-line-height);
|
||||
list-style: none;
|
||||
font-size: var(--cnvs-list-styled-font-size);
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled:not(:first-child),
|
||||
.is-style-cnvs-list-styled-positive:not(:first-child),
|
||||
.is-style-cnvs-list-styled-negative:not(:first-child) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled:not(:last-child),
|
||||
.is-style-cnvs-list-styled-positive:not(:last-child),
|
||||
.is-style-cnvs-list-styled-negative:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled li:not(:first-child),
|
||||
.is-style-cnvs-list-styled-positive li:not(:first-child),
|
||||
.is-style-cnvs-list-styled-negative li:not(:first-child) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled > li,
|
||||
.is-style-cnvs-list-styled-positive > li,
|
||||
.is-style-cnvs-list-styled-negative > li {
|
||||
position: relative;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled > li:before,
|
||||
.is-style-cnvs-list-styled-positive > li:before,
|
||||
.is-style-cnvs-list-styled-negative > li:before {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled,
|
||||
ol.is-style-cnvs-list-styled-positive,
|
||||
ol.is-style-cnvs-list-styled-negative {
|
||||
counter-reset: ol;
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled > li:before,
|
||||
ol.is-style-cnvs-list-styled-positive > li:before,
|
||||
ol.is-style-cnvs-list-styled-negative > li:before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
content: counter(ol);
|
||||
counter-increment: ol;
|
||||
color: var(--cnvs-list-styled-ol-box-color);
|
||||
font-size: var(--cnvs-list-styled-ol-box-font-size);
|
||||
font-weight: var(--cnvs-list-styled-ol-box-font-weight);
|
||||
background-color: var(--cnvs-list-styled-ol-box-background-color);
|
||||
border-radius: var(--cnvs-list-styled-ol-box-border-radius);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ul.is-style-cnvs-list-styled > li:before {
|
||||
content: '';
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
right: 1rem;
|
||||
background: var(--cnvs-list-styled-ul-box-background);
|
||||
border-radius: var(--cnvs-list-styled-ul-box-border-radius);
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled ul,
|
||||
ol.is-style-cnvs-list-styled ol,
|
||||
ul.is-style-cnvs-list-styled ol,
|
||||
ul.is-style-cnvs-list-styled ul {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-right: 0;
|
||||
font-size: var(--cnvs-list-styled-children-font-size);
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled ul > li:not(:first-child),
|
||||
ol.is-style-cnvs-list-styled ol > li:not(:first-child),
|
||||
ul.is-style-cnvs-list-styled ol > li:not(:first-child),
|
||||
ul.is-style-cnvs-list-styled ul > li:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled-positive > li:before {
|
||||
background-color: var(--cnvs-list-styled-ol-positive-box-background-color);
|
||||
color: var(--cnvs-list-styled-ol-positive-box-color);
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled-negative > li:before {
|
||||
background-color: var(--cnvs-list-styled-ol-negative-box-background-color);
|
||||
color: var(--cnvs-list-styled-ol-negative-box-color);
|
||||
}
|
||||
|
||||
ul.is-style-cnvs-list-styled-positive > li:before,
|
||||
ul.is-style-cnvs-list-styled-negative > li:before {
|
||||
width: 1.5rem;
|
||||
font-family: 'canvas-icons';
|
||||
}
|
||||
|
||||
ul.is-style-cnvs-list-styled-positive > li:before {
|
||||
content: "\e912";
|
||||
color: var(--cnvs-list-styled-ul-positive-box-color);
|
||||
}
|
||||
|
||||
ul.is-style-cnvs-list-styled-negative > li:before {
|
||||
content: "\e913";
|
||||
color: var(--cnvs-list-styled-ul-negative-box-color);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
[class*="is-style-cnvs-list-styled"] {
|
||||
--cnvs-list-styled-line-height: 1.5;
|
||||
--cnvs-list-styled-font-size: 1rem;
|
||||
--cnvs-list-styled-children-font-size: 0.875rem;
|
||||
--cnvs-list-styled-ul-box-background: #ced4da;
|
||||
--cnvs-list-styled-ul-box-border-radius: 0;
|
||||
--cnvs-list-styled-ul-positive-box-color: #28a745;
|
||||
--cnvs-list-styled-ul-negative-box-color: #dc3545;
|
||||
--cnvs-list-styled-ol-box-color: #495057;
|
||||
--cnvs-list-styled-ol-box-font-size: 0.875rem;
|
||||
--cnvs-list-styled-ol-box-font-weight: 600;
|
||||
--cnvs-list-styled-ol-box-background-color: #e9ecef;
|
||||
--cnvs-list-styled-ol-box-border-radius: 50%;
|
||||
--cnvs-list-styled-ol-positive-box-background-color: #28a745;
|
||||
--cnvs-list-styled-ol-negative-box-background-color: #dc3545;
|
||||
--cnvs-list-styled-ol-positive-box-color: #fff;
|
||||
--cnvs-list-styled-ol-negative-box-color: #fff;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.is-style-cnvs-list-styled,
|
||||
.is-style-cnvs-list-styled-positive,
|
||||
.is-style-cnvs-list-styled-negative {
|
||||
line-height: var(--cnvs-list-styled-line-height);
|
||||
list-style: none;
|
||||
font-size: var(--cnvs-list-styled-font-size);
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled:not(:first-child),
|
||||
.is-style-cnvs-list-styled-positive:not(:first-child),
|
||||
.is-style-cnvs-list-styled-negative:not(:first-child) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled:not(:last-child),
|
||||
.is-style-cnvs-list-styled-positive:not(:last-child),
|
||||
.is-style-cnvs-list-styled-negative:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled li:not(:first-child),
|
||||
.is-style-cnvs-list-styled-positive li:not(:first-child),
|
||||
.is-style-cnvs-list-styled-negative li:not(:first-child) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled > li,
|
||||
.is-style-cnvs-list-styled-positive > li,
|
||||
.is-style-cnvs-list-styled-negative > li {
|
||||
position: relative;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-list-styled > li:before,
|
||||
.is-style-cnvs-list-styled-positive > li:before,
|
||||
.is-style-cnvs-list-styled-negative > li:before {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled,
|
||||
ol.is-style-cnvs-list-styled-positive,
|
||||
ol.is-style-cnvs-list-styled-negative {
|
||||
counter-reset: ol;
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled > li:before,
|
||||
ol.is-style-cnvs-list-styled-positive > li:before,
|
||||
ol.is-style-cnvs-list-styled-negative > li:before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
content: counter(ol);
|
||||
counter-increment: ol;
|
||||
color: var(--cnvs-list-styled-ol-box-color);
|
||||
font-size: var(--cnvs-list-styled-ol-box-font-size);
|
||||
font-weight: var(--cnvs-list-styled-ol-box-font-weight);
|
||||
background-color: var(--cnvs-list-styled-ol-box-background-color);
|
||||
border-radius: var(--cnvs-list-styled-ol-box-border-radius);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ul.is-style-cnvs-list-styled > li:before {
|
||||
content: '';
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
left: 1rem;
|
||||
background: var(--cnvs-list-styled-ul-box-background);
|
||||
border-radius: var(--cnvs-list-styled-ul-box-border-radius);
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled ul,
|
||||
ol.is-style-cnvs-list-styled ol,
|
||||
ul.is-style-cnvs-list-styled ol,
|
||||
ul.is-style-cnvs-list-styled ul {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 0;
|
||||
font-size: var(--cnvs-list-styled-children-font-size);
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled ul > li:not(:first-child),
|
||||
ol.is-style-cnvs-list-styled ol > li:not(:first-child),
|
||||
ul.is-style-cnvs-list-styled ol > li:not(:first-child),
|
||||
ul.is-style-cnvs-list-styled ul > li:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled-positive > li:before {
|
||||
background-color: var(--cnvs-list-styled-ol-positive-box-background-color);
|
||||
color: var(--cnvs-list-styled-ol-positive-box-color);
|
||||
}
|
||||
|
||||
ol.is-style-cnvs-list-styled-negative > li:before {
|
||||
background-color: var(--cnvs-list-styled-ol-negative-box-background-color);
|
||||
color: var(--cnvs-list-styled-ol-negative-box-color);
|
||||
}
|
||||
|
||||
ul.is-style-cnvs-list-styled-positive > li:before,
|
||||
ul.is-style-cnvs-list-styled-negative > li:before {
|
||||
width: 1.5rem;
|
||||
font-family: 'canvas-icons';
|
||||
}
|
||||
|
||||
ul.is-style-cnvs-list-styled-positive > li:before {
|
||||
content: "\e912";
|
||||
color: var(--cnvs-list-styled-ul-positive-box-color);
|
||||
}
|
||||
|
||||
ul.is-style-cnvs-list-styled-negative > li:before {
|
||||
content: "\e913";
|
||||
color: var(--cnvs-list-styled-ul-negative-box-color);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=96)}({96:function(e,t,n){e.exports=n(97)},97:function(e,t){var n=wp.i18n.__,r=wp.blocks.registerBlockStyle;r("core/list",{name:"cnvs-list-styled",label:n("Styled")}),r("core/list",{name:"cnvs-list-styled-positive",label:n("Positive")}),r("core/list",{name:"cnvs-list-styled-negative",label:n("Negative")})}});
|
||||
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
registerBlockStyle,
|
||||
} = wp.blocks;
|
||||
|
||||
registerBlockStyle( 'core/list', {
|
||||
name: 'cnvs-list-styled',
|
||||
label: __( 'Styled' ),
|
||||
} );
|
||||
registerBlockStyle( 'core/list', {
|
||||
name: 'cnvs-list-styled-positive',
|
||||
label: __( 'Positive' ),
|
||||
} );
|
||||
registerBlockStyle( 'core/list', {
|
||||
name: 'cnvs-list-styled-negative',
|
||||
label: __( 'Negative' ),
|
||||
} );
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.has-drop-cap {
|
||||
--cnvs-drop-cap-color: black;
|
||||
--cnvs-drop-cap-font-size: 2.5rem;
|
||||
--cnvs-drop-cap-dark-background: black;
|
||||
--cnvs-drop-cap-dark-color: #fff;
|
||||
--cnvs-drop-cap-light-background: #f8f9fa;
|
||||
--cnvs-drop-cap-light-color: inherit;
|
||||
--cnvs-drop-cap-bordered-width: 1px;
|
||||
--cnvs-drop-cap-bordered-color: #dee2e6;
|
||||
}
|
||||
|
||||
.is-style-cnvs-paragraph-callout {
|
||||
--cnvs-callout-font-size: 1.25rem;
|
||||
--cnvs-callout-font-weight: 600;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-simple:not(:focus):after,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bordered:not(:focus):after,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-border-right:not(:focus):after,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-light:not(:focus):after,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-dark:not(:focus):after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-simple:not(:focus):first-letter,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bordered:not(:focus):first-letter,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-border-right:not(:focus):first-letter,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-light:not(:focus):first-letter,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-dark:not(:focus):first-letter {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--cnvs-drop-cap-color);
|
||||
font-size: var(--cnvs-drop-cap-font-size);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-dark:not(:focus):first-letter {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--cnvs-drop-cap-dark-background);
|
||||
color: var(--cnvs-drop-cap-dark-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-light:not(:focus):first-letter {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--cnvs-drop-cap-light-background);
|
||||
color: var(--cnvs-drop-cap-light-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bordered:not(:focus):first-letter {
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: var(--cnvs-drop-cap-bordered-width) solid var(--cnvs-drop-cap-bordered-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-border-right:not(:focus):first-letter {
|
||||
padding-left: 2rem;
|
||||
border-left: var(--cnvs-drop-cap-bordered-width) solid var(--cnvs-drop-cap-bordered-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-paragraph-callout {
|
||||
font-size: var(--cnvs-callout-font-size);
|
||||
font-weight: var(--cnvs-callout-font-weight);
|
||||
}
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.has-drop-cap {
|
||||
--cnvs-drop-cap-color: black;
|
||||
--cnvs-drop-cap-font-size: 2.5rem;
|
||||
--cnvs-drop-cap-dark-background: black;
|
||||
--cnvs-drop-cap-dark-color: #fff;
|
||||
--cnvs-drop-cap-light-background: #f8f9fa;
|
||||
--cnvs-drop-cap-light-color: inherit;
|
||||
--cnvs-drop-cap-bordered-width: 1px;
|
||||
--cnvs-drop-cap-bordered-color: #dee2e6;
|
||||
}
|
||||
|
||||
.is-style-cnvs-paragraph-callout {
|
||||
--cnvs-callout-font-size: 1.25rem;
|
||||
--cnvs-callout-font-weight: 600;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-simple:not(:focus):after,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bordered:not(:focus):after,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-border-right:not(:focus):after,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-light:not(:focus):after,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-dark:not(:focus):after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-simple:not(:focus):first-letter,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bordered:not(:focus):first-letter,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-border-right:not(:focus):first-letter,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-light:not(:focus):first-letter,
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-dark:not(:focus):first-letter {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--cnvs-drop-cap-color);
|
||||
font-size: var(--cnvs-drop-cap-font-size);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-dark:not(:focus):first-letter {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--cnvs-drop-cap-dark-background);
|
||||
color: var(--cnvs-drop-cap-dark-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bg-light:not(:focus):first-letter {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--cnvs-drop-cap-light-background);
|
||||
color: var(--cnvs-drop-cap-light-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-bordered:not(:focus):first-letter {
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: var(--cnvs-drop-cap-bordered-width) solid var(--cnvs-drop-cap-bordered-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .has-drop-cap.is-cnvs-dropcap-border-right:not(:focus):first-letter {
|
||||
padding-right: 2rem;
|
||||
border-right: var(--cnvs-drop-cap-bordered-width) solid var(--cnvs-drop-cap-bordered-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .is-style-cnvs-paragraph-callout {
|
||||
font-size: var(--cnvs-callout-font-size);
|
||||
font-weight: var(--cnvs-callout-font-weight);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.has-drop-cap {
|
||||
--cnvs-drop-cap-color: black;
|
||||
--cnvs-drop-cap-font-size: 2.5rem;
|
||||
--cnvs-drop-cap-dark-background: black;
|
||||
--cnvs-drop-cap-dark-color: #fff;
|
||||
--cnvs-drop-cap-light-background: #f8f9fa;
|
||||
--cnvs-drop-cap-light-color: inherit;
|
||||
--cnvs-drop-cap-bordered-width: 1px;
|
||||
--cnvs-drop-cap-bordered-color: #dee2e6;
|
||||
}
|
||||
|
||||
.is-style-cnvs-paragraph-callout {
|
||||
--cnvs-callout-font-size: 1.25rem;
|
||||
--cnvs-callout-font-weight: 600;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.content .has-drop-cap.is-cnvs-dropcap-simple:after,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bordered:after,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-border-right:after,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-light:after,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-dark:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-simple:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bordered:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-border-right:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-light:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-dark:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-simple:first-letter,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bordered:first-letter,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-border-right:first-letter,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-light:first-letter,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-dark:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-simple:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bordered:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-border-right:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-light:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-dark:first-letter {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--cnvs-drop-cap-color);
|
||||
font-size: var(--cnvs-drop-cap-font-size);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-dark:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-dark:first-letter {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--cnvs-drop-cap-dark-background);
|
||||
color: var(--cnvs-drop-cap-dark-color);
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-light:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-light:first-letter {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--cnvs-drop-cap-light-background);
|
||||
color: var(--cnvs-drop-cap-light-color);
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bordered:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bordered:first-letter {
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: var(--cnvs-drop-cap-bordered-width) solid var(--cnvs-drop-cap-bordered-color);
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-border-right:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-border-right:first-letter {
|
||||
padding-left: 2rem;
|
||||
border-left: var(--cnvs-drop-cap-bordered-width) solid var(--cnvs-drop-cap-bordered-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.content .is-style-cnvs-paragraph-callout,
|
||||
.entry-content .is-style-cnvs-paragraph-callout {
|
||||
font-size: var(--cnvs-callout-font-size);
|
||||
font-weight: var(--cnvs-callout-font-weight);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.has-drop-cap {
|
||||
--cnvs-drop-cap-color: black;
|
||||
--cnvs-drop-cap-font-size: 2.5rem;
|
||||
--cnvs-drop-cap-dark-background: black;
|
||||
--cnvs-drop-cap-dark-color: #fff;
|
||||
--cnvs-drop-cap-light-background: #f8f9fa;
|
||||
--cnvs-drop-cap-light-color: inherit;
|
||||
--cnvs-drop-cap-bordered-width: 1px;
|
||||
--cnvs-drop-cap-bordered-color: #dee2e6;
|
||||
}
|
||||
|
||||
.is-style-cnvs-paragraph-callout {
|
||||
--cnvs-callout-font-size: 1.25rem;
|
||||
--cnvs-callout-font-weight: 600;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.content .has-drop-cap.is-cnvs-dropcap-simple:after,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bordered:after,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-border-right:after,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-light:after,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-dark:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-simple:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bordered:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-border-right:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-light:after,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-dark:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-simple:first-letter,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bordered:first-letter,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-border-right:first-letter,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-light:first-letter,
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-dark:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-simple:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bordered:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-border-right:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-light:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-dark:first-letter {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--cnvs-drop-cap-color);
|
||||
font-size: var(--cnvs-drop-cap-font-size);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-dark:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-dark:first-letter {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--cnvs-drop-cap-dark-background);
|
||||
color: var(--cnvs-drop-cap-dark-color);
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bg-light:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bg-light:first-letter {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--cnvs-drop-cap-light-background);
|
||||
color: var(--cnvs-drop-cap-light-color);
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-bordered:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-bordered:first-letter {
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: var(--cnvs-drop-cap-bordered-width) solid var(--cnvs-drop-cap-bordered-color);
|
||||
}
|
||||
|
||||
.content .has-drop-cap.is-cnvs-dropcap-border-right:first-letter,
|
||||
.entry-content .has-drop-cap.is-cnvs-dropcap-border-right:first-letter {
|
||||
padding-right: 2rem;
|
||||
border-right: var(--cnvs-drop-cap-bordered-width) solid var(--cnvs-drop-cap-bordered-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.content .is-style-cnvs-paragraph-callout,
|
||||
.entry-content .is-style-cnvs-paragraph-callout {
|
||||
font-size: var(--cnvs-callout-font-size);
|
||||
font-weight: var(--cnvs-callout-font-weight);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import {
|
||||
replaceClass,
|
||||
getActiveClass,
|
||||
} from '../../../gutenberg/utils/classes-replacer';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
registerBlockStyle,
|
||||
} = wp.blocks;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
PanelBody,
|
||||
SelectControl,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
InspectorControls,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
createHigherOrderComponent,
|
||||
} = wp.compose;
|
||||
|
||||
const {
|
||||
withDispatch,
|
||||
} = wp.data;
|
||||
|
||||
|
||||
registerBlockStyle( 'core/paragraph', {
|
||||
name: 'cnvs-paragraph-callout',
|
||||
label: __( 'Callout' ),
|
||||
} );
|
||||
|
||||
|
||||
/**
|
||||
* Override the default edit UI to include a new block inspector control for
|
||||
* assigning the custom styles if needed.
|
||||
*
|
||||
* @param {function|Component} BlockEdit Original component.
|
||||
*
|
||||
* @return {string} Wrapped component.
|
||||
*/
|
||||
const paragraphWithCanvasDropcap = createHigherOrderComponent( ( BlockEdit ) => {
|
||||
class NewEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.activeClasses = '';
|
||||
|
||||
this.getDropcapStyle = this.getDropcapStyle.bind( this );
|
||||
this.updateDropcapStyle = this.updateDropcapStyle.bind( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get dropcap style from classname on the block.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
getDropcapStyle() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
return getActiveClass( attributes.className, 'is-cnvs-dropcap' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update dropcap classname on the block.
|
||||
*
|
||||
* @param {String} dropcapName name of dropcap style
|
||||
* @memberof NewEdit
|
||||
*/
|
||||
updateDropcapStyle( dropcapName ) {
|
||||
const {
|
||||
attributes,
|
||||
onChangeClassName,
|
||||
} = this.props;
|
||||
|
||||
const updatedClassName = replaceClass( attributes.className, 'is-cnvs-dropcap', dropcapName );
|
||||
|
||||
onChangeClassName( updatedClassName );
|
||||
}
|
||||
|
||||
render() {
|
||||
if ( 'core/paragraph' !== this.props.name ) {
|
||||
return <BlockEdit { ...this.props } />;
|
||||
}
|
||||
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
if ( attributes.dropCap ) {
|
||||
let dropcapStyle = this.getDropcapStyle();
|
||||
|
||||
if ( dropcapStyle ) {
|
||||
dropcapStyle = dropcapStyle.replace( /^is-cnvs-dropcap-/, '' );
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<BlockEdit { ...this.props } />
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __( 'Dropcap Style' ) }
|
||||
>
|
||||
<SelectControl
|
||||
value={ dropcapStyle }
|
||||
options={ [
|
||||
{
|
||||
label: __( 'Default' ),
|
||||
value: '',
|
||||
}, {
|
||||
label: __( 'Simple' ),
|
||||
value: 'simple',
|
||||
}, {
|
||||
label: __( 'Bordered' ),
|
||||
value: 'bordered',
|
||||
}, {
|
||||
label: __( 'Border Right' ),
|
||||
value: 'border-right',
|
||||
}, {
|
||||
label: __( 'Background Light' ),
|
||||
value: 'bg-light',
|
||||
}, {
|
||||
label: __( 'Background Dark' ),
|
||||
value: 'bg-dark',
|
||||
},
|
||||
] }
|
||||
onChange={ ( val ) => {
|
||||
this.updateDropcapStyle( val );
|
||||
} }
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
return <BlockEdit { ...this.props } />;
|
||||
}
|
||||
}
|
||||
|
||||
return withDispatch( ( dispatch, { clientId } ) => {
|
||||
return {
|
||||
onChangeClassName( newClassName ) {
|
||||
dispatch( 'core/block-editor' ).updateBlockAttributes( clientId, {
|
||||
className: newClassName,
|
||||
} );
|
||||
},
|
||||
};
|
||||
} )( NewEdit );
|
||||
}, 'paragraphWithCanvasDropcap' );
|
||||
|
||||
addFilter( 'editor.BlockEdit', 'canvas/paragraph/dropcap', paragraphWithCanvasDropcap );
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-separator {
|
||||
--cnvs-wp-block-separator-color: #dee2e6;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.editor-styles-wrapper .wp-block-separator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator:not(.has-text-color) {
|
||||
color: var(--cnvs-wp-block-separator-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-double, .editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dotted, .editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dashed {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 10px !important;
|
||||
background-color: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-double:after, .editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dotted:after, .editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dashed:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-top: -1px;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-double:after {
|
||||
border-bottom-width: 4px !important;
|
||||
border-bottom-style: double !important;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dotted:after {
|
||||
border-bottom-style: dotted !important;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dashed:after {
|
||||
border-bottom-style: dashed !important;
|
||||
}
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-separator {
|
||||
--cnvs-wp-block-separator-color: #dee2e6;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.editor-styles-wrapper .wp-block-separator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator:not(.has-text-color) {
|
||||
color: var(--cnvs-wp-block-separator-color);
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-double, .editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dotted, .editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dashed {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 10px !important;
|
||||
background-color: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-double:after, .editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dotted:after, .editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dashed:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: -1px;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-double:after {
|
||||
border-bottom-width: 4px !important;
|
||||
border-bottom-style: double !important;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dotted:after {
|
||||
border-bottom-style: dotted !important;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-separator.is-style-cnvs-separator-dashed:after {
|
||||
border-bottom-style: dashed !important;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-separator {
|
||||
--cnvs-wp-block-separator-color: #dee2e6;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.content .wp-block-separator:not(.has-text-color),
|
||||
.entry-content .wp-block-separator:not(.has-text-color) {
|
||||
color: var(--cnvs-wp-block-separator-color);
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-double, .content .wp-block-separator.is-style-cnvs-separator-dotted, .content .wp-block-separator.is-style-cnvs-separator-dashed,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-double,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dotted,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dashed {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 10px;
|
||||
background-color: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-double:after, .content .wp-block-separator.is-style-cnvs-separator-dotted:after, .content .wp-block-separator.is-style-cnvs-separator-dashed:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-double:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dotted:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dashed:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-top: -1px;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-double:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-double:after {
|
||||
border-bottom-width: 4px !important;
|
||||
border-bottom-style: double !important;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-dotted:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dotted:after {
|
||||
border-bottom-style: dotted !important;
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-dashed:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dashed:after {
|
||||
border-bottom-style: dashed !important;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-separator {
|
||||
--cnvs-wp-block-separator-color: #dee2e6;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.content .wp-block-separator:not(.has-text-color),
|
||||
.entry-content .wp-block-separator:not(.has-text-color) {
|
||||
color: var(--cnvs-wp-block-separator-color);
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-double, .content .wp-block-separator.is-style-cnvs-separator-dotted, .content .wp-block-separator.is-style-cnvs-separator-dashed,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-double,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dotted,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dashed {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 10px;
|
||||
background-color: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-double:after, .content .wp-block-separator.is-style-cnvs-separator-dotted:after, .content .wp-block-separator.is-style-cnvs-separator-dashed:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-double:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dotted:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dashed:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: -1px;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-double:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-double:after {
|
||||
border-bottom-width: 4px !important;
|
||||
border-bottom-style: double !important;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-dotted:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dotted:after {
|
||||
border-bottom-style: dotted !important;
|
||||
}
|
||||
|
||||
.content .wp-block-separator.is-style-cnvs-separator-dashed:after,
|
||||
.entry-content .wp-block-separator.is-style-cnvs-separator-dashed:after {
|
||||
border-bottom-style: dashed !important;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
!function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)t.d(n,o,function(r){return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=100)}({100:function(e,r,t){e.exports=t(101)},101:function(e,r){var t=wp.i18n.__,n=wp.blocks.registerBlockStyle;n("core/separator",{name:"cnvs-separator-double",label:t("Double")}),n("core/separator",{name:"cnvs-separator-dotted",label:t("Dotted")}),n("core/separator",{name:"cnvs-separator-dashed",label:t("Dashed")})}});
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
registerBlockStyle,
|
||||
} = wp.blocks;
|
||||
|
||||
/*
|
||||
* core/separator
|
||||
*/
|
||||
registerBlockStyle( 'core/separator', {
|
||||
name: 'cnvs-separator-double',
|
||||
label: __( 'Double' ),
|
||||
} );
|
||||
registerBlockStyle( 'core/separator', {
|
||||
name: 'cnvs-separator-dotted',
|
||||
label: __( 'Dotted' ),
|
||||
} );
|
||||
registerBlockStyle( 'core/separator', {
|
||||
name: 'cnvs-separator-dashed',
|
||||
label: __( 'Dashed' ),
|
||||
} );
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
/**
|
||||
* Heading Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Heading block.
|
||||
*/
|
||||
class CNVS_Block_Heading {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
|
||||
add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function enqueue_block_editor_assets() {
|
||||
// Editor Scripts.
|
||||
wp_enqueue_script(
|
||||
'canvas-block-heading-editor-script',
|
||||
plugins_url( 'block-heading/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-heading/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-heading-editor-style',
|
||||
plugins_url( 'block-heading/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-heading/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-heading-editor-style', 'rtl', 'replace' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue assets for the front-end.
|
||||
*/
|
||||
public function wp_enqueue_scripts() {
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-heading-style',
|
||||
plugins_url( 'block-heading/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-heading/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-heading-style', 'rtl', 'replace' );
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Heading();
|
||||
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
/**
|
||||
* List Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize List block.
|
||||
*/
|
||||
class CNVS_Block_List {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
|
||||
add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function enqueue_block_editor_assets() {
|
||||
// Editor Scripts.
|
||||
wp_enqueue_script(
|
||||
'canvas-block-list-editor-script',
|
||||
plugins_url( 'block-list/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-list/block.js' ),
|
||||
true
|
||||
);
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-list-editor-style',
|
||||
plugins_url( 'block-list/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-list/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-list-editor-style', 'rtl', 'replace' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue assets for the front-end.
|
||||
*/
|
||||
public function wp_enqueue_scripts() {
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-list-style',
|
||||
plugins_url( 'block-list/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-list/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-list-style', 'rtl', 'replace' );
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_List();
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
/**
|
||||
* Paragraph Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Paragraph block.
|
||||
*/
|
||||
class CNVS_Block_Paragraph {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
|
||||
add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function enqueue_block_editor_assets() {
|
||||
// Editor Scripts.
|
||||
wp_enqueue_script(
|
||||
'canvas-block-paragraph-editor-script',
|
||||
plugins_url( 'block-paragraph/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-paragraph/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-paragraph-editor-style',
|
||||
plugins_url( 'block-paragraph/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-paragraph/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-paragraph-editor-style', 'rtl', 'replace' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue assets for the front-end.
|
||||
*/
|
||||
public function wp_enqueue_scripts() {
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-paragraph-style',
|
||||
plugins_url( 'block-paragraph/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-paragraph/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-paragraph-style', 'rtl', 'replace' );
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Paragraph();
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
/**
|
||||
* Separator Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Separator block.
|
||||
*/
|
||||
class CNVS_Block_Separator {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
|
||||
add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function enqueue_block_editor_assets() {
|
||||
// Editor Scripts.
|
||||
wp_enqueue_script(
|
||||
'canvas-block-separator-editor-script',
|
||||
plugins_url( 'block-separator/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-separator/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-separator-editor-style',
|
||||
plugins_url( 'block-separator/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-separator/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-separator-editor-style', 'rtl', 'replace' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue assets for the front-end.
|
||||
*/
|
||||
public function wp_enqueue_scripts() {
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-separator-style',
|
||||
plugins_url( 'block-separator/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-separator/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-separator-style', 'rtl', 'replace' );
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Separator();
|
||||
@@ -0,0 +1,35 @@
|
||||
<?php
|
||||
/**
|
||||
* Format badge.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize format badge.
|
||||
*/
|
||||
class CNVS_Format_Badge {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function enqueue_block_editor_assets() {
|
||||
// Editor Scripts.
|
||||
wp_enqueue_script(
|
||||
'canvas-format-badge-editor-script',
|
||||
plugins_url( 'format-badge/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'format-badge/block.js' ),
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Format_Badge();
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,268 @@
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import {
|
||||
replaceClass,
|
||||
getActiveClass,
|
||||
} from '../../../gutenberg/utils/classes-replacer';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
RichTextToolbarButton,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const {
|
||||
RadioControl,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
registerFormatType,
|
||||
} = wp.richText;
|
||||
|
||||
const { URLPopover } = wp.blockEditor;
|
||||
|
||||
function getSelectedBadge() {
|
||||
const selection = window.getSelection();
|
||||
|
||||
// Unlikely, but in the case there is no selection, return empty styles so
|
||||
// as to avoid a thrown error by `Selection#getRangeAt` on invalid index.
|
||||
if ( selection.rangeCount === 0 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const range = selection.getRangeAt( 0 );
|
||||
|
||||
let $selectedNode = range.startContainer;
|
||||
|
||||
// If the caret is right before the element, select the next element.
|
||||
$selectedNode = $selectedNode.nextElementSibling || $selectedNode;
|
||||
|
||||
while ( $selectedNode.nodeType !== window.Node.ELEMENT_NODE ) {
|
||||
$selectedNode = $selectedNode.parentNode;
|
||||
}
|
||||
|
||||
const $badge = $selectedNode.closest( '.cnvs-badge' );
|
||||
|
||||
return $badge;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a style object for applying as `position: absolute` for an element
|
||||
* relative to the bottom-center of the current selection. Includes `top` and
|
||||
* `left` style properties.
|
||||
*
|
||||
* @return {Object} Style object.
|
||||
*/
|
||||
function getCurrentCaretPositionStyle() {
|
||||
const $badge = getSelectedBadge();
|
||||
|
||||
if ( ! $badge ) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return $badge.getBoundingClientRect();
|
||||
}
|
||||
|
||||
/**
|
||||
* Component which renders itself positioned under the current caret selection.
|
||||
* The position is calculated at the time of the component being mounted, so it
|
||||
* should only be mounted after the desired selection has been made.
|
||||
*
|
||||
* @type {WPComponent}
|
||||
*/
|
||||
class BadgePopover extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.state = {
|
||||
rect: getCurrentCaretPositionStyle(),
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
const { rect } = this.state;
|
||||
|
||||
return (
|
||||
<URLPopover
|
||||
focusOnMount={ false }
|
||||
anchorRect={ rect }
|
||||
>
|
||||
<div style={ { padding: 20 } }>{ children }</div>
|
||||
</URLPopover>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const name = 'canvas/badge';
|
||||
|
||||
export const settings = {
|
||||
title: __( 'Badge' ),
|
||||
tagName: 'span',
|
||||
className: 'cnvs-badge',
|
||||
attributes: {
|
||||
class: 'class',
|
||||
},
|
||||
edit: class BadgeFormat extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.state = {
|
||||
currentColor: '',
|
||||
};
|
||||
|
||||
this.toggleFormat = this.toggleFormat.bind( this );
|
||||
this.getColorStyle = this.getColorStyle.bind( this );
|
||||
this.updateColorStyle = this.updateColorStyle.bind( this );
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
const {
|
||||
isActive,
|
||||
} = this.props;
|
||||
|
||||
if ( ! this.state.currentColor && isActive ) {
|
||||
const $badge = getSelectedBadge();
|
||||
|
||||
if ( $badge ) {
|
||||
let currentColor = this.getColorStyle( $badge.className );
|
||||
|
||||
if ( currentColor ) {
|
||||
currentColor = currentColor.replace( /^is-cnvs-badge-color-/, '' );
|
||||
this.setState( { currentColor } );
|
||||
}
|
||||
}
|
||||
} else if ( this.state.currentColor && ! isActive ) {
|
||||
this.setState( { currentColor: '' } );
|
||||
}
|
||||
}
|
||||
|
||||
toggleFormat( color, toggle = true ) {
|
||||
const {
|
||||
value,
|
||||
onChange,
|
||||
} = this.props;
|
||||
|
||||
const attributes = {};
|
||||
|
||||
if ( color ) {
|
||||
attributes.class = `is-cnvs-badge-color-${ color }`;
|
||||
|
||||
this.setState( { currentColor: color } );
|
||||
}
|
||||
|
||||
const toggleFormat = toggle ? wp.richText.toggleFormat : wp.richText.applyFormat;
|
||||
|
||||
onChange( toggleFormat(
|
||||
value,
|
||||
{
|
||||
type: name,
|
||||
attributes: attributes,
|
||||
}
|
||||
) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get color style from classname on the block.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
getColorStyle( className ) {
|
||||
return getActiveClass( className, 'is-cnvs-badge-color' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update color classname on the block.
|
||||
*
|
||||
* @param {String} colorName name of color style
|
||||
* @memberof NewEdit
|
||||
*/
|
||||
updateColorStyle( colorName ) {
|
||||
const {
|
||||
attributes,
|
||||
onChangeClassName,
|
||||
} = this.props;
|
||||
|
||||
const updatedClassName = replaceClass( attributes.className, 'is-cnvs-badge-color', colorName );
|
||||
|
||||
onChangeClassName( updatedClassName );
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
value,
|
||||
isActive,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<RichTextToolbarButton
|
||||
icon="tag"
|
||||
title={ __( 'Badge' ) }
|
||||
onClick={ () => {
|
||||
this.toggleFormat();
|
||||
} }
|
||||
isActive={ isActive }
|
||||
/>
|
||||
{ isActive ? (
|
||||
<BadgePopover
|
||||
value={ value }
|
||||
name={ name }
|
||||
>
|
||||
<RadioControl
|
||||
label={ __( 'Color' ) }
|
||||
selected={ this.state.currentColor }
|
||||
options={ [
|
||||
{
|
||||
label: __( 'Default' ),
|
||||
value: 'default'
|
||||
}, {
|
||||
label: __( 'Primary' ),
|
||||
value: 'primary'
|
||||
}, {
|
||||
label: __( 'Secondary' ),
|
||||
value: 'secondary'
|
||||
}, {
|
||||
label: __( 'Success' ),
|
||||
value: 'success'
|
||||
}, {
|
||||
label: __( 'Info' ),
|
||||
value: 'info'
|
||||
}, {
|
||||
label: __( 'Warning' ),
|
||||
value: 'warning'
|
||||
}, {
|
||||
label: __( 'Danger' ),
|
||||
value: 'danger'
|
||||
}, {
|
||||
label: __( 'Light' ),
|
||||
value: 'light'
|
||||
}, {
|
||||
label: __( 'Dark' ),
|
||||
value: 'dark'
|
||||
},
|
||||
] }
|
||||
onChange={ ( color ) => {
|
||||
this.toggleFormat( color, false );
|
||||
} }
|
||||
/>
|
||||
</BadgePopover>
|
||||
) : '' }
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
registerFormatType( name, settings );
|
||||
Reference in New Issue
Block a user