Function to get styles from block.
This commit is contained in:
Mateus Machado Luna
parent
c85177ed8c
commit
aa2a33b2f0
|
|
@ -163,6 +163,8 @@
|
|||
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block.is-aligned-right {
|
||||
margin-right: 0;
|
||||
justify-content: flex-end; }
|
||||
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block:hover, .wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block:focus, .wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block:active {
|
||||
border: 1px solid #545758; }
|
||||
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input {
|
||||
width: 100%;
|
||||
min-width: 28px;
|
||||
|
|
@ -170,9 +172,6 @@
|
|||
border: none;
|
||||
padding: 4px 0.75rem;
|
||||
text-overflow: ellipsis; }
|
||||
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:focus, .wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:active {
|
||||
border: 1px solid #545758;
|
||||
border-right: none; }
|
||||
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block button {
|
||||
height: auto;
|
||||
display: flex;
|
||||
|
|
@ -198,6 +197,8 @@
|
|||
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block.is-aligned-right {
|
||||
margin-right: 0;
|
||||
justify-content: flex-start; }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block:focus, .wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block:active, .wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block:hover {
|
||||
border: none; }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block input#taincan-search-bar-block_input {
|
||||
width: 35%;
|
||||
border-radius: 0;
|
||||
|
|
@ -238,15 +239,20 @@
|
|||
margin-left: 0px !important;
|
||||
padding-left: 4px !important;
|
||||
border-color: #dbdbdb !important; } }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:focus input::placeholder, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:active input::placeholder, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:hover input::placeholder {
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:focus input,
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:focus input::placeholder, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:active input,
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:active input::placeholder, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:hover input,
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:hover input::placeholder {
|
||||
color: #454647;
|
||||
border-width: 0; }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:focus button .icon svg, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:active button .icon svg, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block:hover button .icon svg {
|
||||
fill: #cbcbcb !important; }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input::placeholder {
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input {
|
||||
color: white; }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:focus, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:active, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:hover, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:focus::placeholder, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:active::placeholder, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:hover::placeholder {
|
||||
color: #454647; }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input::placeholder {
|
||||
color: white; }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:focus, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:active, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:hover, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:focus::placeholder, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:active::placeholder, .wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:hover::placeholder {
|
||||
color: #454647; }
|
||||
.wp-block-tainacan-search-bar.is-style-alternate .search-bar-collection-header-container .tainacan-search-container form#taincan-search-bar-block button .icon svg {
|
||||
fill: #dbdbdb !important; }
|
||||
.wp-block-tainacan-search-bar.is-style-stylish form#taincan-search-bar-block {
|
||||
|
|
@ -255,6 +261,8 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
border: none; }
|
||||
.wp-block-tainacan-search-bar.is-style-stylish form#taincan-search-bar-block:focus, .wp-block-tainacan-search-bar.is-style-stylish form#taincan-search-bar-block:active, .wp-block-tainacan-search-bar.is-style-stylish form#taincan-search-bar-block:hover {
|
||||
border: none; }
|
||||
.wp-block-tainacan-search-bar.is-style-stylish form#taincan-search-bar-block:hover input#taincan-search-bar-block_input {
|
||||
width: 100%;
|
||||
padding-right: 52px;
|
||||
|
|
@ -304,8 +312,8 @@
|
|||
padding-left: 4px !important;
|
||||
border-color: #dbdbdb !important; } }
|
||||
.wp-block-tainacan-search-bar.is-style-stylish .search-bar-collection-header-container:not(.is-aligned-right):not(.is-aligned-left) .tainacan-search-container {
|
||||
width: calc(100% - 4.1667% - 26px);
|
||||
width: calc(100% - 4.1667vw - 26px);
|
||||
width: calc(100% - 4.1667% - 53px);
|
||||
width: calc(100% - 4.1667vw - 53px);
|
||||
bottom: calc(-50% + 38px);
|
||||
position: absolute; }
|
||||
.wp-block-tainacan-search-bar.is-style-stylish .search-bar-collection-header-container:not(.is-aligned-right):not(.is-aligned-left) .search-bar-collection-header-title {
|
||||
|
|
@ -347,8 +355,8 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-grow: 2;
|
||||
padding: 1rem 4.1667%;
|
||||
padding: 1rem 4.1667vw;
|
||||
padding: 0.5rem 4.1667%;
|
||||
padding: 0.5rem 4.1667vw;
|
||||
text-align: center;
|
||||
text-decoration: none !important; }
|
||||
.wp-block-tainacan-search-bar .search-bar-collection-header-container.is-aligned-left {
|
||||
|
|
@ -368,14 +376,15 @@
|
|||
.wp-block-tainacan-search-bar .search-bar-collection-header-container.is-aligned-right .search-bar-collection-header-title {
|
||||
text-align: left; }
|
||||
.wp-block-tainacan-search-bar .search-bar-collection-header-container .search-bar-collection-header-title {
|
||||
width: 100%; }
|
||||
width: 100%;
|
||||
color: white; }
|
||||
.wp-block-tainacan-search-bar .search-bar-collection-header-container .search-bar-collection-header-title h3 {
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.5rem;
|
||||
text-overflow: ellipsis; }
|
||||
text-overflow: ellipsis;
|
||||
color: inherit; }
|
||||
.wp-block-tainacan-search-bar .search-bar-collection-header-container .search-bar-collection-header-title h3:hover {
|
||||
text-decoration: none; }
|
||||
.wp-block-tainacan-search-bar .search-bar-collection-header-container .search-bar-collection-header-title span.label {
|
||||
|
|
@ -383,8 +392,7 @@
|
|||
display: block;
|
||||
margin-top: -12px;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
color: white; }
|
||||
font-size: 1rem; }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wp-block-tainacan-search-bar .search-bar-collection-header-container .search-bar-collection-header-title {
|
||||
margin-bottom: 1rem; } }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -140,7 +140,6 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
isLoadingCollection,
|
||||
collection,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor
|
||||
} = attributes;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const { registerBlockType } = wp.blocks;
|
||||
const { registerBlockType, getBlockStyles, getBlockAttributes } = wp.blocks;
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ registerBlockType('tainacan/search-bar', {
|
|||
collectionTextSize: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide', 'left', 'center', 'right'],
|
||||
|
|
@ -236,6 +236,18 @@ registerBlockType('tainacan/search-bar', {
|
|||
setContent();
|
||||
}
|
||||
|
||||
function getCurrentStyle() {
|
||||
if (isSelected) {
|
||||
if (className.split(' ').find((aClass) => aClass == 'is-style-alternate')) {
|
||||
return 'alternate'
|
||||
} else if (className.split(' ').find((aClass) => aClass == 'is-style-stylish')) {
|
||||
return 'stylish'
|
||||
}
|
||||
}
|
||||
return 'default'
|
||||
}
|
||||
|
||||
|
||||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
|
@ -260,7 +272,7 @@ registerBlockType('tainacan/search-bar', {
|
|||
isActive: alignment === 'right',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
|
||||
|
|
@ -310,8 +322,10 @@ registerBlockType('tainacan/search-bar', {
|
|||
checked={ showCollectionHeader }
|
||||
onChange={ ( isChecked ) => {
|
||||
showCollectionHeader = isChecked;
|
||||
if (isChecked) fetchCollectionForHeader();
|
||||
if (isChecked)
|
||||
fetchCollectionForHeader();
|
||||
setAttributes({ showCollectionHeader: showCollectionHeader });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -338,6 +352,7 @@ registerBlockType('tainacan/search-bar', {
|
|||
onChange={ ( isChecked ) => {
|
||||
showCollectionLabel = isChecked;
|
||||
setAttributes({ showCollectionLabel: showCollectionLabel });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -349,7 +364,8 @@ registerBlockType('tainacan/search-bar', {
|
|||
color={ collectionBackgroundColor }
|
||||
onChangeComplete={ ( value ) => {
|
||||
collectionBackgroundColor = value.hex;
|
||||
setAttributes({ collectionBackgroundColor: collectionBackgroundColor })
|
||||
setAttributes({ collectionBackgroundColor: collectionBackgroundColor }) ;
|
||||
setContent();
|
||||
}}
|
||||
disableAlpha
|
||||
/>
|
||||
|
|
@ -363,7 +379,8 @@ registerBlockType('tainacan/search-bar', {
|
|||
value={ collectionTextColor }
|
||||
onChange={ ( color ) => {
|
||||
collectionTextColor = color;
|
||||
setAttributes({ collectionTextColor: collectionTextColor })
|
||||
setAttributes({ collectionTextColor: collectionTextColor });
|
||||
setContent();
|
||||
}}
|
||||
/>
|
||||
</BaseControl>
|
||||
|
|
@ -372,14 +389,13 @@ registerBlockType('tainacan/search-bar', {
|
|||
label={__('Collection name size', 'tainacan')}
|
||||
value={ collectionTextSize ? collectionTextSize : 2 }
|
||||
options={ [
|
||||
{ label: __('Huge', 'tainacan'), value: 3 },
|
||||
{ label: __('Large', 'tainacan'), value: 2.5 },
|
||||
{ label: __('Medium', 'tainacan'), value: 2 },
|
||||
{ label: __('Small', 'tainacan'), value: 1.5 },
|
||||
] }
|
||||
onChange={ ( size ) => {
|
||||
collectionTextSize = size;
|
||||
setAttributes({ collectionTextSize: collectionTextSize })
|
||||
setAttributes({ collectionTextSize: collectionTextSize });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -469,12 +485,11 @@ registerBlockType('tainacan/search-bar', {
|
|||
style={{
|
||||
backgroundColor: collectionBackgroundColor
|
||||
}}>
|
||||
<div class="search-bar-collection-header-title">
|
||||
<div
|
||||
style={{ color: collectionTextColor ? collectionTextColor : '' }}
|
||||
class="search-bar-collection-header-title">
|
||||
{ showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }</span> : null }
|
||||
<h3 style={{
|
||||
color: collectionTextColor ? collectionTextColor : '',
|
||||
fontSize: collectionTextSize ? collectionTextSize + 'rem' : '2rem'
|
||||
}}>
|
||||
<h3 style={{ fontSize: collectionTextSize ? collectionTextSize + 'rem' : '2rem' }}>
|
||||
{ collection && collection.name ? collection.name : '' }
|
||||
</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,11 @@
|
|||
margin-right: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid #545758;
|
||||
}
|
||||
|
||||
input#taincan-search-bar-block_input {
|
||||
width: 100%;
|
||||
|
|
@ -36,11 +41,6 @@
|
|||
border: none;
|
||||
padding: 4px 0.75rem;
|
||||
text-overflow: ellipsis;
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid #545758;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
button {
|
||||
height: auto;
|
||||
|
|
@ -78,7 +78,11 @@
|
|||
margin-right: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
input#taincan-search-bar-block_input {
|
||||
width: 35%;
|
||||
border-radius: 0;
|
||||
|
|
@ -143,6 +147,7 @@
|
|||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
input,
|
||||
input::placeholder {
|
||||
color: #454647;
|
||||
border-width: 0;
|
||||
|
|
@ -155,6 +160,7 @@
|
|||
}
|
||||
|
||||
input#taincan-search-bar-block_input {
|
||||
color: white;
|
||||
&::placeholder { color: white; }
|
||||
|
||||
&:focus,
|
||||
|
|
@ -184,6 +190,12 @@
|
|||
flex-direction: row;
|
||||
border: none;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover input#taincan-search-bar-block_input {
|
||||
width: 100%;
|
||||
padding-right: 52px;
|
||||
|
|
@ -258,8 +270,8 @@
|
|||
|
||||
&:not(.is-aligned-right):not(.is-aligned-left) {
|
||||
.tainacan-search-container {
|
||||
width: calc(100% - 4.1667% - 26px);
|
||||
width: calc(100% - 4.1667vw - 26px);
|
||||
width: calc(100% - 4.1667% - 53px);
|
||||
width: calc(100% - 4.1667vw - 53px);
|
||||
bottom: calc(-50% + 38px);
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -320,8 +332,8 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-grow: 2;
|
||||
padding: 1rem 4.1667%;
|
||||
padding: 1rem 4.1667vw;
|
||||
padding: 0.5rem 4.1667%;
|
||||
padding: 0.5rem 4.1667vw;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
|
||||
|
|
@ -346,14 +358,15 @@
|
|||
|
||||
.search-bar-collection-header-title {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
h3 {
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.5rem;
|
||||
text-overflow: ellipsis;
|
||||
color: inherit;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -364,7 +377,6 @@
|
|||
margin-top: -12px;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue