Begins support to theme.json.

This commit is contained in:
mateuswetah 2022-05-26 09:16:42 -03:00
parent bd0f07b769
commit 704315d9d1
13 changed files with 1053 additions and 559 deletions

View File

@ -24,6 +24,9 @@ echo "Tainacan's style compiled.";
sass -E 'UTF-8' -t compressed editor-style.scss:../../editor-style.css sass -E 'UTF-8' -t compressed editor-style.scss:../../editor-style.css
echo "Tainacan's Gutenberg Editor style compiled"; echo "Tainacan's Gutenberg Editor style compiled";
sass -E 'UTF-8' -t compressed editor-style-legacy.scss:../../editor-style-legacy.css
echo "Tainacan's Gutenberg Editor legacy style compiled";
sass bootstrap_custom.scss:../vendor/bootstrap/scss/bootstrap.min.css --style compressed sass bootstrap_custom.scss:../vendor/bootstrap/scss/bootstrap.min.css --style compressed
echo "Bootstrap style compiled"; echo "Bootstrap style compiled";

View File

@ -23,6 +23,8 @@
.has-lightgray-background-color { background-color: #f2f2f2 !important; } .has-lightgray-background-color { background-color: #f2f2f2 !important; }
.has-darkgray-color { color: #555758 !important; } .has-darkgray-color { color: #555758 !important; }
.has-darkgray-background-color { background-color: #555758 !important; } .has-darkgray-background-color { background-color: #555758 !important; }
.has-default-color { color: var(--tainacan-interface--link-color, #298596) !important; }
.has-default-background-color { background-color: var(--tainacan-interface--link-color, #298596) !important; }
.alignwide { .alignwide {
margin-left: calc(-8.3333333333vw + 3.1%) !important; margin-left: calc(-8.3333333333vw + 3.1%) !important;
@ -117,7 +119,7 @@
} }
/* Cover block */ /* Cover block */
.wp-block-cover__inner-container { .wp-block-cover__inner-container>.wp-block-group:where(:not(.alignleft):not(.alignright)) {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 0 8.3333333333%; padding: 0 8.3333333333%;

View File

@ -0,0 +1,572 @@
@import 'editor-style.scss';
.editor-styles-wrapper {
background: white;
padding: 3rem 0px 0px 0px !important;
font-size: 1rem !important;
--wp--preset--font-size--small: 14px !important;
--wp--preset--font-size--regular: 16px !important;
--wp--preset--font-size--large: 18px !important;
--wp--preset--font-size--huge: 24px !important;
}
.block-editor-block-preview__content {
font-family: 'Roboto', sans-serif;
}
.editor-styles-wrapper,
.components-modal__screen-overlay {
font-family: 'Roboto', sans-serif !important;
// Register palette classes for colors
.has-carmine-color { color: #8c442c }
.has-carmine-background-color { background-color: #8c442c }
.has-cherry-color { color: #A12B42 }
.has-cherry-background-color { background-color: #A12B42 }
.has-mustard-color { color: #754E24 }
.has-mustard-background-color { background-color: #754E24 }
.has-mintgreen-color { color: #255F56 }
.has-mintgreen-background-color { background-color: #255F56 }
.has-darkturquoise-color { color: #205E6F }
.has-darkturquoise-background-color { background-color: #205E6F }
.has-turquoise-color { color: #185F6D }
.has-turquoise-background-color { background-color: #185F6D }
.has-blueheavenly-color { color: #1D5C86 }
.has-blueheavenly-background-color { background-color: #1D5C86 }
.has-purple-color { color: #4751a3 }
.has-purple-background-color { background-color: #4751a3 }
.has-violet-color { color: #955ba5 }
.has-violet-background-color { background-color: #955ba5 }
.has-white-color { color: #ffffff; }
.has-white-background-color { background-color: #ffffff; }
.has-lightgray-color { color: #f2f2f2; }
.has-lightgray-background-color { background-color: #f2f2f2; }
.has-darkgray-color { color: #555758; }
.has-darkgray-background-color { background-color: #555758; }
// Editor Block list side spacing
.editor-block-list__layout,
.block-editor-block-list__layout {
padding-left: 8.3333333%;
padding-right: 8.3333333%;
}
.editor-writing-flow__click-redirect {
width: auto;
}
// Inner blocks do not need all that spacing,
// otherwise they won't match their theme result
.editor-inner-blocks,
.block-editor-inner-blocks,
.wp-block-group__inner-container,
.wp-block-cover__inner-container>.wp-block,
.editor-inner-blocks>.editor-block-list__layout,
.block-editor-inner-blocks>.block-editor-block-list__layout {
padding-left: 0;
padding-right: 0;
}
/* Main column width (the not class is to avoid adding the padding to inner blocks) */
:not(.block-editor-block-list__block)>.wp-block {
max-width: calc(1400px - 8.3333336%);
padding-left: 4.1666667%;
padding-right: 4.1666667%;
}
/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
padding-left: 0;
padding-right: 0;
.wp-block-columns {
padding-left: 0;
padding-right: 0;
}
}
/* Width of "full" blocks */
.block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"],
.wp-block[data-align="full"] {
max-width: 122.5%;// calc(100% + 16.6666667%);
width: 125.5%; // calc(100% + 16.6666667%);
margin-left: -12.5%; //calc(-8.3333333%);
margin-right: -12.5%; //-8.3333333%;
padding-left: 0;
padding-right: 0;
}
/* Tainacan Interface does not force a margin between block elements */
.block-editor-block-list__block {
margin-top: initial;
margin-bottom: initial;
}
/* Post title */
.edit-post-visual-editor__post-title-wrapper,
:not(.edit-post-visual-editor__post-title-wrapper)>.editor-post-title {
margin: 0 auto 5.35rem auto;
padding: 0;
max-width: calc(1400px - 4.1666667%);
width: calc(100% - 8.33333%);
border-bottom: 2px solid var(--tainacan-interface--link-color, #298596);
border-bottom: 2px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
&>.wp-block {
margin: 0 !important;
padding: 0px;
}
}
.wp-block.editor-post-title__block,
.editor-post-title__block .editor-post-title__input,
.editor-post-title.editor-post-title__input {
font-size: 1.25rem;
font-family: 'Roboto', sans-serif;
color: var(--tainacan-interface--link-color, #298596);
textarea {
padding: 3px 6px;
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
}
/* Resize containers also shouldn't add a margin */
.block-library-spacer__resize-container {
margin-bottom: initial;
}
/* Social Icons do not have all that padding */
.wp-block-social-link {
padding-left: 0;
padding-right: 0;
}
/* List Block has some weird alignment...*/
.wp-block-list {
box-sizing: border-box;
}
/* Columns */
.wp-block-columns>.editor-inner-blocks >.editor-block-list__layout> [data-type="core/column"]:not(:last-child),
.wp-block-columns>.block-editor-inner-blocks >.block-editor-block-list__layout> [data-type="core/column"]:not(:last-child) {
margin-right: 2.0833333%; // Half column
}
.wp-block-columns>.editor-inner-blocks >.editor-block-list__layout> [data-type="core/column"]:not(:first-child),
.wp-block-columns>.block-editor-inner-blocks >.block-editor-block-list__layout> [data-type="core/column"]:not(:first-child) {
margin-left: 2.0833333%; // Half column
}
.wp-block-columns>.editor-inner-blocks >.editor-block-list__layout> [data-type="core/column"],
.wp-block-columns>.block-editor-inner-blocks >.block-editor-block-list__layout> [data-type="core/column"],
.wp-block-columns>.wp-block-column[data-type="core/column"] {
margin-left: 0;
margin-right: 0;
padding: 0;
}
.wp-block-columns>.wp-block-column[data-type="core/column"]:not(:first-child) {
padding-left: 2.0833333%; // Half column
}
.wp-block-columns>.wp-block-column[data-type="core/column"]:not(:last-child) {
padding-right: 2.0833333%; // Half column
}
.wp-block-columns>.wp-block-column[data-type="core/column"]>.wp-block {
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 0;
}
/* Heading */
.wp-block-heading h1,
.wp-block[data-type="core/heading"] h1,
h1.wp-block[data-type="core/heading"] {
font-size: 1.802rem;
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h2,
.wp-block[data-type="core/heading"] h2,
h2.wp-block[data-type="core/heading"] {
font-size: 1.602rem;
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h3,
.wp-block[data-type="core/heading"] h3,
h3.wp-block[data-type="core/heading"] {
font-size: 1.424rem;
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h4,
.wp-block[data-type="core/heading"] h4,
h4.wp-block[data-type="core/heading"] {
font-size: 1.266rem;
font-style: italic;
font-weight: normal;
color: #555758;
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h5,
.wp-block[data-type="core/heading"] h5,
h5.wp-block[data-type="core/heading"] {
font-size: 1.125rem;
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h6,
.wp-block[data-type="core/heading"] h6,
h6.wp-block[data-type="core/heading"] {
font-size: 1rem;
font-style: italic;
font-weight: normal;
color: #555758;
padding-top: .4rem;
margin-bottom: .5rem;
}
p.block-editor-block-list__block.wp-block {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
/* Links */
a { text-decoration: none; }
.has-text-color>a,
.has-text-color>a:hover,
.has-text-color>a>strong,
.has-text-color>a:hover>strong,
.has-text-color>a>em,
.has-text-color>a:hover>em {
color: inherit;
}
/* Buttons */
.components-button.is-button {
border: none;
box-shadow: none;
border-radius: 6px;
height: auto;
text-shadow: none;
font-size: 0.875rem;
&:active:not(.is-default) {
color: white;
}
&:active,
&:focus {
box-shadow: none;
}
}
.components-button.is-button:not(.is-small) {
padding: 5px 12px;
line-height: 1.2rem;
}
.components-button.is-button.is-primary {
background-color: var(--tainacan-interface--link-color, #298596);
background-color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
.components-button.is-button.is-default {
background: white;
border: 1px solid #555758;
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
.components-icon-button:hover:not(.is-default),
.components-icon-button:focus:not(.is-default),
.components-icon-button:active:not(.is-default) {
box-shadow: none !important;
background: none !important;
border: none !important;
}
.components-icon-button.is-default:hover,
.components-icon-button.is-default:focus,
.components-icon-button.is-default:active {
box-shadow: none !important;
background: white !important;
border: 1px solid #555758 !important;
}
.wp-block-buttons {
align-items: center;
}
.wp-block-button__link {
&:not(.has-background) {
background-color: var(--tainacan-interface--link-color, #298596);
background-color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
border-radius: 4px;
font-size: 0.875rem;
padding: 6px 18px;
}
.is-style-outline .wp-block-button__link {
background-color: transparent !important;
border: 1px solid #555758;
&:not(.has-text-color) {
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
}
.is-style-squared .wp-block-button__link {
border-radius: 0px;
}
/* Text input */
.components-modal__content .input-control,
.components-modal__content input[type="date"],
.components-modal__content input[type="datetime-local"],
.components-modal__content input[type="datetime"],
.components-modal__content input[type="email"],
.components-modal__content input[type="month"],
.components-modal__content input[type="number"],
.components-modal__content input[type="password"],
.components-modal__content input[type="search"],
.components-modal__content input[type="tel"],
.components-modal__content input[type="text"],
.components-modal__content input[type="time"],
.components-modal__content input[type="url"],
.components-modal__content input[type="week"],
.components-modal__content select,
.components-modal__content textarea,
.components-popover .input-control,
.components-popover input[type="date"],
.components-popover input[type="datetime-local"],
.components-popover input[type="datetime"],
.components-popover input[type="email"],
.components-popover input[type="month"],
.components-popover input[type="number"],
.components-popover input[type="password"],
.components-popover input[type="search"],
.components-popover input[type="tel"],
.components-popover input[type="text"],
.components-popover input[type="time"],
.components-popover input[type="url"],
.components-popover input[type="week"],
.components-popover select,
.components-popover textarea {
border-radius: 0;
border-color: #cbcbcb;
padding: 4px 8px;
&:focus {
border: 1px solid #555758;
box-shadow: none;
}
}
/* Labels */
.components-base-control__label {
font-weight: 600;
color: black;
}
/* Cover block */
:not([data-align="wide"]):not([data-align="full"])>.wp-block-cover {
width: auto;
}
[data-align="full"] .wp-block-cover__inner-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 12.5%;
&>.wp-block {
max-width: 100%;
margin: 0;
}
}
/* Figcaption on image block */
.wp-block-embed figcaption,
.wp-block-image figcaption {
color: inherit;
}
/* From WP version 5.9 on, we decided to remove this styling because it can cause too many conflicts */
// /* Modal container */
// .wp-block-tainacan-modal .components-modal__content {
// padding: 32px;
// overflow: hidden;
// }
// /* Modal Header */
// .wp-block-tainacan-modal .components-modal__header {
// height: 32px;
// margin: 0 12px 32px 12px;
// padding: 0;
// border-bottom: 1px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
// .components-modal__header-heading,
// h1 {
// font-size: 1.125rem;
// font-weight: 500;
// color: #555758;
// }
// }
/* Blockquote */
.wp-block-quote {
margin: 3rem 8.33333%;
padding: 1rem;
color: #555758;
font-weight: normal;
font-size: 1rem;
}
.wp-block-quote.is-style-large {
font-size: 1.375rem;
font-family: 'Roboto', sans-serif;
}
.wp-block-quote:not(.is-style-large):not(.is-large) {
border-left: 2px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
.wp-block-quote__citation {
font-weight: 500;
font-size: 1rem;
text-align: right;
font-style: italic;
color: #555758;
}
/* Pullquote */
.wp-block-pullquote {
&:not(.is-style-solid-color) {
border-top: 2px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
border-bottom: 2px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
padding: 0;
blockquote {
margin: 0;
padding: 2rem 8.3333333%;
}
.block-library-pullquote__content.editor-rich-text p,
.rich-text.block-editor-rich-text__editable p {
font-size: 1.375rem;
font-weight: 500;
}
:not(.has-text-color) .block-library-pullquote__content.editor-rich-text p,
:not(.has-text-color) .rich-text.block-editor-rich-text__editable p {
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
.wp-block-pullquote__citation {
color: #555758;
font-size: 1rem;
font-weight: normal;
font-style: italic;
text-transform: none;
}
}
/* Separator */
.wp-block-separator {
&:not(.has-background-color) {
border-color: var(--tainacan-interface--link-color, #298596);
border-color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
width: 50%;
max-width: 300px;
&.is-style-wide {
width: 100%;
}
&.is-style-dots {
&:not(.has-background-color)::before {
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
&::before {
font-weight: 600;
}
}
}
/* Pre */
.wp-block-preformatted pre {
color: #555758;
font-size: 1rem;
font-weight: 400;
white-space: pre-line;
}
/* Code */
.wp-block-code textarea {
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
/* Tables */
.wp-block-table th {
border-bottom: 1px solid #cbcbcb;
font-weight: normal;
font-size: 0.75rem;
}
.wp-block-table td {
border: 1px solid #f2f2f2;
font-size: 0.875rem;
}
/* Extra title group class, that can be added for styling special headings */
.wp-block-group.tainacan-group-heading {
.wp-block-heading {
color: var(--tainacan-interface--link-color, #298596) !important;
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596)) !important;
}
h1:not(.has-text-color),
h2:not(.has-text-color),
h3:not(.has-text-color),
h4:not(.has-text-color) {
color: var(--tainacan-interface--link-color, #298596) !important;
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
h1.wp-block-heading,
h1:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size) {
font-size: 1.6rem;
}
h2.wp-block-heading,
h2:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size) {
font-size: 1.5rem;
}
h3.wp-block-heading,
h3:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size) {
font-size: 1.25rem;
}
h4.wp-block-heading,
h4:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size) {
font-size: 1.125rem;
}
p {
font-style: italic;
}
p:not(.has-text-color) {
color: #898d8f;
}
hr.wp-block-separator:not(.is-style-wide) {
margin-left: 0;
max-width: 200px;
border-color: var(--tainacan-interface--link-color, #298596);
border-color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
border-width: 2px;
height: 3px;
}
}
}
.tainacan-heading-section-pattern-pattern {
h1,
h2,
h3,
h4 {
margin-bottom: 0px !important;
}
p {
font-style: italic;
margin-bottom: 0 !important;
}
hr.wp-block-separator:not(.is-style-wide) {
margin-left: 0;
margin-top: 0.5rem;
max-width: 200px;
}
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
border-width: 2px;
height: 3px;
}
}

View File

@ -3,100 +3,10 @@
.editor-styles-wrapper { .editor-styles-wrapper {
background: white; background: white;
padding: 3rem 0px 0px 0px !important; padding: 3rem 0px 0px 0px !important;
font-size: 1rem !important;
--wp--preset--font-size--small: 14px !important;
--wp--preset--font-size--regular: 16px !important;
--wp--preset--font-size--large: 18px !important;
--wp--preset--font-size--huge: 24px !important;
}
.block-editor-block-preview__content {
font-family: 'Roboto', sans-serif;
} }
.editor-styles-wrapper, .editor-styles-wrapper,
.components-modal__screen-overlay { .components-modal__screen-overlay {
font-family: 'Roboto', sans-serif !important;
// Register palette classes for colors
.has-carmine-color { color: #8c442c }
.has-carmine-background-color { background-color: #8c442c }
.has-cherry-color { color: #A12B42 }
.has-cherry-background-color { background-color: #A12B42 }
.has-mustard-color { color: #754E24 }
.has-mustard-background-color { background-color: #754E24 }
.has-mintgreen-color { color: #255F56 }
.has-mintgreen-background-color { background-color: #255F56 }
.has-darkturquoise-color { color: #205E6F }
.has-darkturquoise-background-color { background-color: #205E6F }
.has-turquoise-color { color: #185F6D }
.has-turquoise-background-color { background-color: #185F6D }
.has-blueheavenly-color { color: #1D5C86 }
.has-blueheavenly-background-color { background-color: #1D5C86 }
.has-purple-color { color: #4751a3 }
.has-purple-background-color { background-color: #4751a3 }
.has-violet-color { color: #955ba5 }
.has-violet-background-color { background-color: #955ba5 }
.has-white-color { color: #ffffff; }
.has-white-background-color { background-color: #ffffff; }
.has-lightgray-color { color: #f2f2f2; }
.has-lightgray-background-color { background-color: #f2f2f2; }
.has-darkgray-color { color: #555758; }
.has-darkgray-background-color { background-color: #555758; }
// Editor Block list side spacing
.editor-block-list__layout,
.block-editor-block-list__layout {
padding-left: 8.3333333%;
padding-right: 8.3333333%;
}
.editor-writing-flow__click-redirect {
width: auto;
}
// Inner blocks do not need all that spacing,
// otherwise they won't match their theme result
.editor-inner-blocks,
.block-editor-inner-blocks,
.wp-block-group__inner-container,
.wp-block-cover__inner-container>.wp-block,
.editor-inner-blocks>.editor-block-list__layout,
.block-editor-inner-blocks>.block-editor-block-list__layout {
padding-left: 0;
padding-right: 0;
}
/* Main column width (the not class is to avoid adding the padding to inner blocks) */
:not(.block-editor-block-list__block)>.wp-block {
max-width: calc(1400px - 8.3333336%);
padding-left: 4.1666667%;
padding-right: 4.1666667%;
}
/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
padding-left: 0;
padding-right: 0;
.wp-block-columns {
padding-left: 0;
padding-right: 0;
}
}
/* Width of "full" blocks */
.block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"],
.wp-block[data-align="full"] {
max-width: 122.5%;// calc(100% + 16.6666667%);
width: 125.5%; // calc(100% + 16.6666667%);
margin-left: -12.5%; //calc(-8.3333333%);
margin-right: -12.5%; //-8.3333333%;
padding-left: 0;
padding-right: 0;
}
/* Tainacan Interface does not force a margin between block elements */
.block-editor-block-list__block {
margin-top: initial;
margin-bottom: initial;
}
/* Post title */ /* Post title */
.edit-post-visual-editor__post-title-wrapper, .edit-post-visual-editor__post-title-wrapper,
@ -126,188 +36,6 @@
} }
} }
/* Resize containers also shouldn't add a margin */
.block-library-spacer__resize-container {
margin-bottom: initial;
}
/* Social Icons do not have all that padding */
.wp-block-social-link {
padding-left: 0;
padding-right: 0;
}
/* List Block has some weird alignment...*/
.wp-block-list {
box-sizing: border-box;
}
/* Columns */
.wp-block-columns>.editor-inner-blocks >.editor-block-list__layout> [data-type="core/column"]:not(:last-child),
.wp-block-columns>.block-editor-inner-blocks >.block-editor-block-list__layout> [data-type="core/column"]:not(:last-child) {
margin-right: 2.0833333%; // Half column
}
.wp-block-columns>.editor-inner-blocks >.editor-block-list__layout> [data-type="core/column"]:not(:first-child),
.wp-block-columns>.block-editor-inner-blocks >.block-editor-block-list__layout> [data-type="core/column"]:not(:first-child) {
margin-left: 2.0833333%; // Half column
}
.wp-block-columns>.editor-inner-blocks >.editor-block-list__layout> [data-type="core/column"],
.wp-block-columns>.block-editor-inner-blocks >.block-editor-block-list__layout> [data-type="core/column"],
.wp-block-columns>.wp-block-column[data-type="core/column"] {
margin-left: 0;
margin-right: 0;
padding: 0;
}
.wp-block-columns>.wp-block-column[data-type="core/column"]:not(:first-child) {
padding-left: 2.0833333%; // Half column
}
.wp-block-columns>.wp-block-column[data-type="core/column"]:not(:last-child) {
padding-right: 2.0833333%; // Half column
}
.wp-block-columns>.wp-block-column[data-type="core/column"]>.wp-block {
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 0;
}
/* Heading */
.wp-block-heading h1,
.wp-block[data-type="core/heading"] h1,
h1.wp-block[data-type="core/heading"] {
font-size: 1.802rem;
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h2,
.wp-block[data-type="core/heading"] h2,
h2.wp-block[data-type="core/heading"] {
font-size: 1.602rem;
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h3,
.wp-block[data-type="core/heading"] h3,
h3.wp-block[data-type="core/heading"] {
font-size: 1.424rem;
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h4,
.wp-block[data-type="core/heading"] h4,
h4.wp-block[data-type="core/heading"] {
font-size: 1.266rem;
font-style: italic;
font-weight: normal;
color: #555758;
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h5,
.wp-block[data-type="core/heading"] h5,
h5.wp-block[data-type="core/heading"] {
font-size: 1.125rem;
padding-top: .4rem;
margin-bottom: .5rem;
}
.wp-block-heading h6,
.wp-block[data-type="core/heading"] h6,
h6.wp-block[data-type="core/heading"] {
font-size: 1rem;
font-style: italic;
font-weight: normal;
color: #555758;
padding-top: .4rem;
margin-bottom: .5rem;
}
p.block-editor-block-list__block.wp-block {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
/* Links */
a { text-decoration: none; }
.has-text-color>a,
.has-text-color>a:hover,
.has-text-color>a>strong,
.has-text-color>a:hover>strong,
.has-text-color>a>em,
.has-text-color>a:hover>em {
color: inherit;
}
/* Buttons */
.components-button.is-button {
border: none;
box-shadow: none;
border-radius: 6px;
height: auto;
text-shadow: none;
font-size: 0.875rem;
&:active:not(.is-default) {
color: white;
}
&:active,
&:focus {
box-shadow: none;
}
}
.components-button.is-button:not(.is-small) {
padding: 5px 12px;
line-height: 1.2rem;
}
.components-button.is-button.is-primary {
background-color: var(--tainacan-interface--link-color, #298596);
background-color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
.components-button.is-button.is-default {
background: white;
border: 1px solid #555758;
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
.components-icon-button:hover:not(.is-default),
.components-icon-button:focus:not(.is-default),
.components-icon-button:active:not(.is-default) {
box-shadow: none !important;
background: none !important;
border: none !important;
}
.components-icon-button.is-default:hover,
.components-icon-button.is-default:focus,
.components-icon-button.is-default:active {
box-shadow: none !important;
background: white !important;
border: 1px solid #555758 !important;
}
.wp-block-buttons {
align-items: center;
}
.wp-block-button__link {
&:not(.has-background) {
background-color: var(--tainacan-interface--link-color, #298596);
background-color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
border-radius: 4px;
font-size: 0.875rem;
padding: 6px 18px;
}
.is-style-outline .wp-block-button__link {
background-color: transparent !important;
border: 1px solid #555758;
&:not(.has-text-color) {
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
}
.is-style-squared .wp-block-button__link {
border-radius: 0px;
}
/* Text input */ /* Text input */
.components-modal__content .input-control, .components-modal__content .input-control,
.components-modal__content input[type="date"], .components-modal__content input[type="date"],
@ -357,57 +85,7 @@
color: black; color: black;
} }
/* Cover block */
:not([data-align="wide"]):not([data-align="full"])>.wp-block-cover {
width: auto;
}
[data-align="full"] .wp-block-cover__inner-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 12.5%;
&>.wp-block {
max-width: 100%;
margin: 0;
}
}
/* Figcaption on image block */
.wp-block-embed figcaption,
.wp-block-image figcaption {
color: inherit;
}
/* From WP version 5.9 on, we decided to remove this styling because it can cause too many conflicts */
// /* Modal container */
// .wp-block-tainacan-modal .components-modal__content {
// padding: 32px;
// overflow: hidden;
// }
// /* Modal Header */
// .wp-block-tainacan-modal .components-modal__header {
// height: 32px;
// margin: 0 12px 32px 12px;
// padding: 0;
// border-bottom: 1px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
// .components-modal__header-heading,
// h1 {
// font-size: 1.125rem;
// font-weight: 500;
// color: #555758;
// }
// }
/* Blockquote */ /* Blockquote */
.wp-block-quote {
margin: 3rem 8.33333%;
padding: 1rem;
color: #555758;
font-weight: normal;
font-size: 1rem;
}
.wp-block-quote.is-style-large { .wp-block-quote.is-style-large {
font-size: 1.375rem; font-size: 1.375rem;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
@ -429,12 +107,6 @@
border-top: 2px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596)); border-top: 2px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
border-bottom: 2px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596)); border-bottom: 2px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
} }
padding: 0;
blockquote {
margin: 0;
padding: 2rem 8.3333333%;
}
.block-library-pullquote__content.editor-rich-text p, .block-library-pullquote__content.editor-rich-text p,
.rich-text.block-editor-rich-text__editable p { .rich-text.block-editor-rich-text__editable p {
@ -477,96 +149,23 @@
} }
} }
/* Pre */
.wp-block-preformatted pre {
color: #555758;
font-size: 1rem;
font-weight: 400;
white-space: pre-line;
}
/* Code */
.wp-block-code textarea {
color: var(--tainacan-interface--link-color, #298596);
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
/* Tables */ /* Tables */
.wp-block-table th { .wp-block-table th {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb;
font-weight: normal; font-weight: normal;
font-size: 0.75rem; font-size: 0.75rem;
padding: .75rem;
} }
.wp-block-table td { .wp-block-table td {
border: 1px solid #f2f2f2; border: 1px solid #f2f2f2;
font-size: 0.875rem; font-size: 0.875rem;
padding: .75rem;
} }
/* Extra title group class, that can be added for styling special headings */ .tainacan-heading-section-pattern-pattern hr {
.wp-block-group.tainacan-group-heading { margin-left: 0px
.wp-block-heading {
color: var(--tainacan-interface--link-color, #298596) !important;
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596)) !important;
}
h1:not(.has-text-color),
h2:not(.has-text-color),
h3:not(.has-text-color),
h4:not(.has-text-color) {
color: var(--tainacan-interface--link-color, #298596) !important;
color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
h1.wp-block-heading,
h1:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size) {
font-size: 1.6rem;
}
h2.wp-block-heading,
h2:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size) {
font-size: 1.5rem;
}
h3.wp-block-heading,
h3:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size) {
font-size: 1.25rem;
}
h4.wp-block-heading,
h4:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size) {
font-size: 1.125rem;
}
p {
font-style: italic;
}
p:not(.has-text-color) {
color: #898d8f;
}
hr.wp-block-separator:not(.is-style-wide) {
margin-left: 0;
max-width: 200px;
border-color: var(--tainacan-interface--link-color, #298596);
border-color: var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
}
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
border-width: 2px;
height: 3px;
}
}
}
.tainacan-heading-section-pattern-pattern {
h1,
h2,
h3,
h4 {
margin-bottom: 0px !important;
}
p {
font-style: italic;
margin-bottom: 0 !important;
}
hr.wp-block-separator:not(.is-style-wide) {
margin-left: 0;
margin-top: 0.5rem;
max-width: 200px;
}
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
border-width: 2px;
height: 3px;
} }
} }

View File

@ -236,24 +236,11 @@ body {
.wp-block-columns { .wp-block-columns {
display: flex; display: flex;
margin: 0; margin: 0;
gap: 4.16667%;
.wp-block-column { .wp-block-column {
flex-basis: 100%; flex-basis: 100%;
} }
.wp-block-column:not(:last-child) {
margin-right: 2.0833333%; // Half column
}
.wp-block-column:not(:first-child) {
margin-left: 2.0833333%; // Half column
}
@media only screen and (max-width: 576px) {
.wp-block-column:not(:last-child) {
margin-right: 0;
}
.wp-block-column:not(:first-child) {
margin-left: 0;
}
}
} }
.alignleft { .alignleft {
float:left; float:left;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -328,137 +328,6 @@ function tainacan_widgets_footer_init() {
} }
add_action( 'widgets_init', 'tainacan_widgets_footer_init' ); add_action( 'widgets_init', 'tainacan_widgets_footer_init' );
/*
* Register Tainacan Heading Section Pattern
*/
function tainacan_block_patterns_init() {
global $wp_version;
include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
if ((is_plugin_active('gutenberg/gutenberg.php') || $wp_version >= '5') && function_exists('register_block_pattern_category')) {
register_block_pattern_category(
'tainacan-interface',
array( 'label' => _x( 'Tainacan Interface', 'Block pattern category', 'tainacan-interface' ) ) );
}
if ((is_plugin_active('gutenberg/gutenberg.php') || $wp_version >= '5') && function_exists('register_block_pattern')) {
register_block_pattern(
'tainacan-interface/tainacan-heading-section-pattern',
array(
'title' => __( 'Tainacan heading section', 'tainacan-interface' ),
'description' => _x( 'A left-aligned heading section containing a light sub-heading and an underline below the title.', 'Block pattern description', 'tainacan-interface' ),
'content' => '<!-- wp:group {"className":"tainacan-heading-section-pattern-pattern"} --><div class="wp-block-group tainacan-heading-section-pattern-pattern"><div class="wp-block-group__inner-container"><!-- wp:heading {"textColor":"default","style":{"typography":{"fontSize":24}}} --><h2 class="has-default-color has-text-color" style="font-size:24px">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2><!-- /wp:heading --><!-- wp:paragraph {"style":{"color":{"text":"#838386"}}} --><p class="has-text-color" style="color:#898d8f">' . esc_html__( 'Section optional description...', 'tainacan-interface' ) . '</p><!-- /wp:paragraph --><!-- wp:separator {"color":"default"} --><hr class="wp-block-separator has-text-color has-background has-default-background-color has-default-color"/><!-- /wp:separator --><!-- wp:spacer {"height":32} --><div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer --></div></div><!-- /wp:group -->',
'categories' => array('tainacan-interface')
)
);
register_block_pattern(
'tainacan-interface/tainacan-highlight-section-pattern',
array(
'title' => __( 'Tainacan highlight section', 'tainacan-interface' ),
'description' => _x( 'A hero section with a background color and columns for image and text.', 'Block pattern description', 'tainacan-interface' ),
'content' => '
<!-- wp:cover {"overlayColor":"default","align":"full"} -->
<div class="wp-block-cover alignfull has-default-background-color has-background-dim">
<div class="wp-block-cover__inner-container">
<!-- wp:spacer {"height": 24} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:spacer {"height": 16} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-columns has-text-color" style="color:#ffffff">
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:image {"id":152274,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:spacer {"height": 32} -->
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
</div>
</div>
<!-- /wp:cover -->',
'categories' => array('tainacan-interface')
)
);
register_block_pattern(
'tainacan-interface/tainacan-highlight-section-pattern-alt',
array(
'title' => __( 'Tainacan highlight section (alt)', 'tainacan-interface' ),
'description' => _x( 'Another hero section with a background color and columns for image headings and text.', 'Block pattern description', 'tainacan-interface' ),
'content' => '
<!-- wp:cover {"customOverlayColor":"#01295c","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#01295c">
<div class="wp-block-cover__inner-container">
<!-- wp:spacer {"height": 16} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-columns has-text-color" style="color:#ffffff">
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:image {"id":152274,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Sed at orci ex. Nulla pulvinar, lorem vel eleifend maximus, nunc elit porta felis, id placerat orci dui sit amet ligula. Mauris fermentum dui quam, eget blandit ligula vulputate sit amet. Integer aliquet eget urna ac tempor. Nunc viverra faucibus magna ac aliquet. Integer ullamcorper lacinia elit quis gravida. Duis placerat pulvinar arcu nec faucibus. Sed sit amet enim iaculis, facilisis est non, venenatis nibh.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
</div>
<!-- /wp:cover -->',
'categories' => array('tainacan-interface')
)
);
}
}
add_action( 'init', 'tainacan_block_patterns_init' );
/** /**
* get Tainacan's logo function HTML * get Tainacan's logo function HTML
@ -574,9 +443,17 @@ function tainacan_customizer_gutenberg_colors() {
* Enqueue editor styles for Gutenberg * Enqueue editor styles for Gutenberg
*/ */
function tainacan_editor_styles() { function tainacan_editor_styles() {
global $wp_version;
// Adds Tainacan editor style for Gutenberg. // Adds Tainacan editor style for Gutenberg.
// If we are able to use theme.json v2 (WP >= 5.9),
// Most styles are handled by gutenberg
if (is_plugin_active('gutenberg/gutenberg.php') || $wp_version >= '5.9') {
wp_enqueue_style( 'tainacan-editor-style', get_template_directory_uri() . '/editor-style.css', [], TAINACAN_INTERFACE_VERSION ); wp_enqueue_style( 'tainacan-editor-style', get_template_directory_uri() . '/editor-style.css', [], TAINACAN_INTERFACE_VERSION );
} else {
wp_enqueue_style( 'tainacan-editor-style', get_template_directory_uri() . '/editor-style-legacy.css', [], TAINACAN_INTERFACE_VERSION );
}
// Adds Robot fonts to Gutenberg. // Adds Robot fonts to Gutenberg.
wp_enqueue_style( 'RobotoFonts', 'https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i' ); wp_enqueue_style( 'RobotoFonts', 'https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i' );
@ -585,6 +462,7 @@ function tainacan_editor_styles() {
add_action( 'enqueue_block_editor_assets', 'tainacan_editor_styles' ); add_action( 'enqueue_block_editor_assets', 'tainacan_editor_styles' );
require get_template_directory() . '/functions/customizer.php'; require get_template_directory() . '/functions/customizer.php';
require get_template_directory() . '/functions/patterns.php';
require get_template_directory() . '/functions/single-functions.php'; require get_template_directory() . '/functions/single-functions.php';
require get_template_directory() . '/functions/class-tainacan-interface-collection-settings.php'; require get_template_directory() . '/functions/class-tainacan-interface-collection-settings.php';
require get_template_directory() . '/functions/breadcrumb.php'; require get_template_directory() . '/functions/breadcrumb.php';

216
src/functions/patterns.php Normal file
View File

@ -0,0 +1,216 @@
<?php
/*
* Register Tainacan Heading Section Pattern
*/
function tainacan_block_patterns_init() {
global $wp_version;
include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
if ((is_plugin_active('gutenberg/gutenberg.php') || $wp_version >= '5') && function_exists('register_block_pattern_category')) {
register_block_pattern_category(
'tainacan-interface',
array( 'label' => _x( 'Tainacan Interface', 'Block pattern category', 'tainacan-interface' ) ) );
}
if ((is_plugin_active('gutenberg/gutenberg.php') || $wp_version >= '5') && function_exists('register_block_pattern')) {
register_block_pattern(
'tainacan-interface/tainacan-heading-section-pattern',
array(
'title' => __( 'Tainacan heading section', 'tainacan-interface' ),
'description' => _x( 'A left-aligned heading section containing a light sub-heading and an underline below the title.', 'Block pattern description', 'tainacan-interface' ),
'content' => $wp_version >= '5.9'
?
'<!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"className":"tainacan-heading-section-pattern-pattern"} -->
<div class="wp-block-group tainacan-heading-section-pattern-pattern"><!-- wp:heading {"style":{"typography":{"fontSize":24}},"textColor":"default"} -->
<h2 class="has-default-color has-text-color" style="font-size:24px">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"color":{"text":"#838386"}}} -->
<p class="has-text-color" style="color:#838386">' . esc_html__( 'Section optional description...', 'tainacan-interface' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"opacity":"css","backgroundColor":"default"} -->
<hr class="wp-block-separator has-text-color has-default-color has-css-opacity has-default-background-color has-background"/>
<!-- /wp:separator -->
<!-- wp:spacer {"height":"32px"} -->
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->'
:
'<!-- wp:group {"className":"tainacan-heading-section-pattern-pattern"} --><div class="wp-block-group tainacan-heading-section-pattern-pattern"><div class="wp-block-group__inner-container"><!-- wp:heading {"textColor":"default","style":{"typography":{"fontSize":24}}} --><h2 class="has-default-color has-text-color" style="font-size:24px">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2><!-- /wp:heading --><!-- wp:paragraph {"style":{"color":{"text":"#838386"}}} --><p class="has-text-color" style="color:#898d8f">' . esc_html__( 'Section optional description...', 'tainacan-interface' ) . '</p><!-- /wp:paragraph --><!-- wp:separator {"color":"default"} --><hr class="wp-block-separator has-text-color has-background has-default-background-color has-default-color"/><!-- /wp:separator --><!-- wp:spacer {"height":32} --><div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer --></div></div><!-- /wp:group -->',
'categories' => array('tainacan-interface')
)
);
register_block_pattern(
'tainacan-interface/tainacan-highlight-section-pattern',
array(
'title' => __( 'Tainacan highlight section', 'tainacan-interface' ),
'description' => _x( 'A hero section with a background color and columns for image and text.', 'Block pattern description', 'tainacan-interface' ),
'content' => $wp_version >= '5.9'
?
'<!-- wp:cover {"overlayColor":"default","align":"full","style":{"spacing":{"padding":{"top":"28px","bottom":"28px"}}}} -->
<div class="wp-block-cover alignfull" style="padding-top:28px;padding-bottom:28px"><span aria-hidden="true" class="wp-block-cover__background has-default-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:columns {"style":{"color":{"text":"#ffffff"},"spacing":{"blockGap":"4.2%"}}} -->
<div class="wp-block-columns has-text-color" style="color:#ffffff"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":152274,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->'
:
'<!-- wp:cover {"overlayColor":"default","align":"full"} -->
<div class="wp-block-cover alignfull has-default-background-color has-background-dim">
<div class="wp-block-cover__inner-container">
<!-- wp:spacer {"height": 24} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:spacer {"height": 16} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-columns has-text-color" style="color:#ffffff">
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:image {"id":152274,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:spacer {"height": 32} -->
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
</div>
</div>
<!-- /wp:cover -->',
'categories' => array('tainacan-interface')
)
);
register_block_pattern(
'tainacan-interface/tainacan-highlight-section-pattern-alt',
array(
'title' => __( 'Tainacan highlight section (alt)', 'tainacan-interface' ),
'description' => _x( 'Another hero section with a background color and columns for image headings and text.', 'Block pattern description', 'tainacan-interface' ),
'content' => $wp_version >= '5.9'
?
'<!-- wp:cover {"customOverlayColor":"#01295c","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#01295c"></span><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":"16px"} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:columns {"style":{"color":{"text":"#ffffff"},"spacing":{"blockGap":"4.2%"}}} -->
<div class="wp-block-columns has-text-color" style="color:#ffffff"><!-- wp:column {"width":"33.33%","style":{"spacing":{"blockGap":"4.2%"}}} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":152274,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure><!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Sed at orci ex. Nulla pulvinar, lorem vel eleifend maximus, nunc elit porta felis, id placerat orci dui sit amet ligula. Mauris fermentum dui quam, eget blandit ligula vulputate sit amet. Integer aliquet eget urna ac tempor. Nunc viverra faucibus magna ac aliquet. Integer ullamcorper lacinia elit quis gravida. Duis placerat pulvinar arcu nec faucibus. Sed sit amet enim iaculis, facilisis est non, venenatis nibh.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right","textColor":"white"} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->'
:
'<!-- wp:cover {"customOverlayColor":"#01295c","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#01295c">
<div class="wp-block-cover__inner-container">
<!-- wp:spacer {"height": 16} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-columns has-text-color" style="color:#ffffff">
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:image {"id":152274,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Sed at orci ex. Nulla pulvinar, lorem vel eleifend maximus, nunc elit porta felis, id placerat orci dui sit amet ligula. Mauris fermentum dui quam, eget blandit ligula vulputate sit amet. Integer aliquet eget urna ac tempor. Nunc viverra faucibus magna ac aliquet. Integer ullamcorper lacinia elit quis gravida. Duis placerat pulvinar arcu nec faucibus. Sed sit amet enim iaculis, facilisis est non, venenatis nibh.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
</div>
<!-- /wp:cover -->',
'categories' => array('tainacan-interface')
)
);
}
}
add_action( 'init', 'tainacan_block_patterns_init' );

File diff suppressed because one or more lines are too long

228
src/theme.json Normal file
View File

@ -0,0 +1,228 @@
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "min(calc(1400px - 16.6666%), 75%)",
"wideSize": "min(1400px, 91.66667%)"
},
"custom": {
"spacing": {
"small": "28px",
"one-column": "4.1667%",
"two-columns": "8.3333%"
}
},
"spacing": {
"units": [
"px",
"em",
"rem",
"%",
"vh",
"vw"
]
},
"typography": {
"fontSizes": [
{
"name": "Small",
"size": "14px",
"slug": "small"
},
{
"name": "Regular",
"size": "16px",
"slug": "regular"
},
{
"name": "Large",
"size": "18px",
"slug": "large"
},
{
"name": "Huge",
"size": "24px",
"slug": "huge"
}
]
}
},
"styles": {
"elements": {
"h1": {
"typography": {
"fontSize": "1.802rem"
},
"color": {
"text": "var:preset|color|default"
},
"spacing": {
"padding": {
"top": "0.4rem"
},
"margin": {
"bottom": "0.5rem"
}
}
},
"h2": {
"typography": {
"fontSize": "1.602rem"
},
"spacing": {
"padding": {
"top": "0.4rem"
},
"margin": {
"bottom": "0.5rem"
}
}
},
"h3": {
"typography": {
"fontSize": "1.424rem"
},
"spacing": {
"padding": {
"top": "0.4rem"
},
"margin": {
"bottom": "0.5rem"
}
}
},
"h4": {
"typography": {
"fontSize": "1.266rem",
"fontStyle": "italic",
"fontWeight": "normal"
},
"color": {
"text": "var(--wp--preset--color--darkgray)"
},
"spacing": {
"padding": {
"top": "0.4rem"
},
"margin": {
"bottom": "0.5rem"
}
}
},
"h5": {
"typography": {
"fontSize": "1.125rem"
},
"spacing": {
"padding": {
"top": "0.4rem"
},
"margin": {
"bottom": "0.5rem"
}
}
},
"h6": {
"typography": {
"fontSize": "1rem",
"fontStyle": "italic",
"fontWeight": "normal"
},
"color": {
"text": "var(--wp--preset--color--darkgray)"
},
"spacing": {
"padding": {
"top": "0.4rem"
},
"margin": {
"bottom": "0.5rem"
}
}
},
"link": {
"color": {
"text": "var:preset|color|default"
}
}
},
"spacing": {
"blockGap": "var(--wp--custom--spacing--small)"
},
"typography": {
"fontFamily": "Roboto, sans-serif",
"fontSize": "1rem",
"lineHeight": "1.5"
},
"blocks": {
"core/columns": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--one-column)"
}
},
"core/button": {
"color": {
"background": "var:preset|color|default"
},
"typography": {
"fontSize": "var:preset|font-size|small",
"fontWeight": "normal",
"lineHeight": "1.2rem"
},
"spacing": {
"padding": {
"bottom": "0.25rem",
"left": "1.125rem",
"right": "1.125rem",
"top": "0.25rem"
}
},
"border": {
"color": "var:preset|color|default",
"radius": "0.25rem",
"width": "1px"
}
},
"core/code": {
"color": {
"text": "var:preset|color|default"
}
},
"core/pullquote": {
"spacing": {
"padding": {
"top": "2rem",
"left": "var(--wp--custom--spacing--two-columns)",
"bottom": "2rem",
"right": "var(--wp--custom--spacing--two-columns)"
}
}
},
"core/quote": {
"color": {
"text": "var:preset|color|darkgray"
},
"typography": {
"fontWeight": "normal",
"fontSize": "1rem"
},
"spacing": {
"padding": {
"top": "1rem",
"left": "1rem",
"right": "1rem",
"bottom": "1rem"
},
"margin": {
"top": "3rem",
"bottom": "3rem",
"left": "var(--wp--custom--spacing--two-columns)",
"right": "var(--wp--custom--spacing--two-columns)"
}
}
}
}
}
}