Prevents form submission on editor's side.
This commit is contained in:
Mateus Machado Luna
parent
94e30bf8e3
commit
8094b478bb
|
|
@ -1,4 +1,5 @@
|
||||||
const { registerBlockType } = wp.blocks;
|
const { registerBlockType } = wp.blocks;
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
const { __ } = wp.i18n;
|
const { __ } = wp.i18n;
|
||||||
|
|
||||||
|
|
@ -125,53 +126,128 @@ registerBlockType('tainacan/search-bar', {
|
||||||
collectionTextColor,
|
collectionTextColor,
|
||||||
collectionHeaderImage,
|
collectionHeaderImage,
|
||||||
collectionName
|
collectionName
|
||||||
} = attributes;
|
} = attributes;
|
||||||
|
|
||||||
function setContent(){
|
function setContent(){
|
||||||
|
|
||||||
setAttributes({
|
setAttributes({
|
||||||
content: (
|
content: (
|
||||||
<div class="tainacan-search-container">
|
showCollectionHeader ?
|
||||||
<form
|
<div>
|
||||||
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
{ collectionHeaderImage ?
|
||||||
|
<div
|
||||||
|
className={ 'search-bar-collection-header-image' }
|
||||||
|
style={{
|
||||||
|
backgroundImage: 'url(' + collectionHeaderImage + ')',
|
||||||
|
height: collectionHeaderHeight ? collectionHeaderHeight + 'px' : '160px'
|
||||||
|
}}>
|
||||||
|
</div> : null
|
||||||
|
}
|
||||||
|
<div
|
||||||
className={
|
className={
|
||||||
|
(showCollectionHeader ? 'search-bar-collection-header-container' : '') +
|
||||||
(alignment == 'left' ? ' is-aligned-left' : '') +
|
(alignment == 'left' ? ' is-aligned-left' : '') +
|
||||||
(alignment == 'right' ? ' is-aligned-right' : '')
|
(alignment == 'right' ? ' is-aligned-right' : '')
|
||||||
}
|
}
|
||||||
id="taincan-search-bar-block"
|
style={{
|
||||||
action={ tainacan_plugin.site_url + '/' + collectionSlug + '/#/' }
|
backgroundColor: collectionBackgroundColor
|
||||||
method='get'>
|
}}>
|
||||||
<input
|
<div
|
||||||
style={{ borderColor: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
style={{ color: collectionTextColor ? collectionTextColor : '' }}
|
||||||
id="taincan-search-bar-block_input"
|
class="search-bar-collection-header-title">
|
||||||
label={ __('Search', 'taincan')}
|
{ showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }</span> : null }
|
||||||
name='search'
|
<h3 style={{ fontSize: collectionTextSize ? collectionTextSize + 'rem' : '2rem' }}>
|
||||||
placeholder={ placeholderText }
|
{ collectionName ? collectionName : '' }
|
||||||
/>
|
</h3>
|
||||||
<button
|
</div>
|
||||||
class="button"
|
{ collectionId && collectionSlug ?
|
||||||
type="submit">
|
<div class="tainacan-search-container">
|
||||||
<span class="icon">
|
<form
|
||||||
<i>
|
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
||||||
<svg
|
className={
|
||||||
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
(alignment == 'left' ? ' is-aligned-left' : '') +
|
||||||
width="24"
|
(alignment == 'right' ? ' is-aligned-right' : '')
|
||||||
height="24"
|
}
|
||||||
viewBox="-2 -4 20 20">
|
id="taincan-search-bar-block"
|
||||||
<path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
action={ tainacan_plugin.site_url + '/' + collectionSlug + '/#/' }
|
||||||
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
method='get'>
|
||||||
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
<input
|
||||||
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
style={{ borderColor: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||||
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
id="taincan-search-bar-block_input"
|
||||||
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
label={ __('Search', 'taincan')}
|
||||||
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
name='search'
|
||||||
</svg>
|
placeholder={ placeholderText }
|
||||||
</i>
|
/>
|
||||||
</span>
|
<button
|
||||||
</button>
|
class="button"
|
||||||
</form>
|
type="submit">
|
||||||
</div> )
|
<span class="icon">
|
||||||
});
|
<i>
|
||||||
|
<svg
|
||||||
|
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="-2 -4 20 20">
|
||||||
|
<path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||||
|
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||||
|
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||||
|
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||||
|
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||||
|
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||||
|
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div class="tainacan-search-container">
|
||||||
|
<form
|
||||||
|
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
||||||
|
className={
|
||||||
|
(alignment == 'left' ? ' is-aligned-left' : '') +
|
||||||
|
(alignment == 'right' ? ' is-aligned-right' : '')
|
||||||
|
}
|
||||||
|
id="taincan-search-bar-block"
|
||||||
|
action={ tainacan_plugin.site_url + '/' + collectionSlug + '/#/' }
|
||||||
|
method='get'>
|
||||||
|
<input
|
||||||
|
style={{ borderColor: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||||
|
id="taincan-search-bar-block_input"
|
||||||
|
label={ __('Search', 'taincan')}
|
||||||
|
name='search'
|
||||||
|
placeholder={ placeholderText }
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
type="submit">
|
||||||
|
<span class="icon">
|
||||||
|
<i>
|
||||||
|
<svg
|
||||||
|
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="-2 -4 20 20">
|
||||||
|
<path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||||
|
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||||
|
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||||
|
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||||
|
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||||
|
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||||
|
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function openSearchBarModal() {
|
function openSearchBarModal() {
|
||||||
|
|
@ -412,6 +488,40 @@ registerBlockType('tainacan/search-bar', {
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
{ !collectionId ? (
|
||||||
|
<Placeholder
|
||||||
|
icon={(
|
||||||
|
<img
|
||||||
|
width={148}
|
||||||
|
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
|
||||||
|
alt="Tainacan Logo"/>
|
||||||
|
)}>
|
||||||
|
<p>
|
||||||
|
<span class="icon">
|
||||||
|
<i>
|
||||||
|
<svg width="24" height="24" viewBox="-2 -2 20 20">
|
||||||
|
<path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||||
|
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||||
|
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||||
|
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||||
|
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||||
|
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||||
|
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
{__('Set up a custom search bar to redirect to an item\'s list', 'tainacan')}
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
isPrimary
|
||||||
|
type="submit"
|
||||||
|
onClick={ () => openSearchBarModal() }>
|
||||||
|
{__('Select search source', 'tainacan')}
|
||||||
|
</Button>
|
||||||
|
</Placeholder>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
showCollectionHeader ?
|
showCollectionHeader ?
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -461,7 +571,8 @@ registerBlockType('tainacan/search-bar', {
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
class="button"
|
class="button"
|
||||||
type="submit">
|
type="submit"
|
||||||
|
onClick={(event) => { event.preventDefault(); return false; }}>
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i>
|
<i>
|
||||||
<svg
|
<svg
|
||||||
|
|
@ -488,42 +599,8 @@ registerBlockType('tainacan/search-bar', {
|
||||||
</div>
|
</div>
|
||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
|
|
||||||
{ !collectionId ? (
|
|
||||||
<Placeholder
|
|
||||||
icon={(
|
|
||||||
<img
|
|
||||||
width={148}
|
|
||||||
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
|
|
||||||
alt="Tainacan Logo"/>
|
|
||||||
)}>
|
|
||||||
<p>
|
|
||||||
<span class="icon">
|
|
||||||
<i>
|
|
||||||
<svg width="24" height="24" viewBox="-2 -2 20 20">
|
|
||||||
<path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
|
||||||
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
|
||||||
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
|
||||||
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
|
||||||
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
|
||||||
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
|
||||||
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</span>
|
|
||||||
{__('Set up a custom search bar to redirect to an item\'s list', 'tainacan')}
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
isPrimary
|
|
||||||
type="submit"
|
|
||||||
onClick={ () => openSearchBarModal() }>
|
|
||||||
{__('Select search source', 'tainacan')}
|
|
||||||
</Button>
|
|
||||||
</Placeholder>
|
|
||||||
) : null
|
|
||||||
}
|
|
||||||
|
|
||||||
{ collectionId && collectionSlug && !showCollectionHeader?
|
{ collectionId && collectionSlug && !showCollectionHeader ?
|
||||||
<div class="tainacan-search-container">
|
<div class="tainacan-search-container">
|
||||||
<form
|
<form
|
||||||
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue