Plugin Tabs noticias
This commit is contained in:
root
@@ -0,0 +1,582 @@
|
||||
import * as areoi from '../_components/Core.js';
|
||||
import meta from './block.json';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import {
|
||||
store as blockEditorStore
|
||||
} from '@wordpress/block-editor';
|
||||
|
||||
const ALLOWED_BLOCKS = ['areoi/content-grid-item'];
|
||||
const BLOCKS_TEMPLATE = [
|
||||
['areoi/content-grid-item'],
|
||||
['areoi/content-grid-item'],
|
||||
['areoi/content-grid-item'],
|
||||
];
|
||||
|
||||
const blockIcon = <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M3,5v14h18V5H3z M8.33,17H5V7h3.33V17z M13.67,17h-3.33v-4h3.33V17z M19,17h-3.33v-4H19V17z M19,11h-8.67V7H19V11z"/></svg>;
|
||||
|
||||
areoi.blocks.registerBlockType( meta, {
|
||||
icon: blockIcon,
|
||||
edit: props => {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
clientId
|
||||
} = props;
|
||||
|
||||
const { block_id } = attributes;
|
||||
if ( !block_id ) {
|
||||
setAttributes( { block_id: clientId } );
|
||||
}
|
||||
|
||||
let child_blocks = wp.data.select( 'core/block-editor' ).getBlocks( block_id ),
|
||||
layout = attributes['layout'] ? attributes['layout'] : 'grid',
|
||||
container = attributes['container'] ? attributes['container'] : 'container',
|
||||
columns = attributes['columns'] ? attributes['columns'] : '3';
|
||||
|
||||
const classes = [
|
||||
'areoi-content-grid',
|
||||
'areoi-content-grid-' + layout,
|
||||
( attributes['size'] && attributes['size'] != 'Default' ? attributes['size'] : '' ),
|
||||
];
|
||||
|
||||
const blockProps = areoi.editor.useBlockProps( {
|
||||
className: areoi.helper.GetClassName( classes ),
|
||||
style: { cssText: areoi.helper.GetStyles( attributes ) }
|
||||
} );
|
||||
|
||||
const row_classes = [
|
||||
'row',
|
||||
'h-100',
|
||||
'areoi-content-grid-row',
|
||||
attributes.vertical_align_xs,
|
||||
attributes.vertical_align_sm,
|
||||
attributes.vertical_align_md,
|
||||
attributes.vertical_align_lg,
|
||||
attributes.vertical_align_xl,
|
||||
attributes.vertical_align_xxl,
|
||||
];
|
||||
|
||||
const prepend_row_classes = [
|
||||
'row',
|
||||
'areoi-prepend-row',
|
||||
attributes.prepend_horizontal_align_xs,
|
||||
attributes.prepend_horizontal_align_sm,
|
||||
attributes.prepend_horizontal_align_md,
|
||||
attributes.prepend_horizontal_align_lg,
|
||||
attributes.prepend_horizontal_align_xl,
|
||||
attributes.prepend_horizontal_align_xxl,
|
||||
];
|
||||
|
||||
const prepend_col_classes = [
|
||||
'col',
|
||||
attributes.prepend_col_xs,
|
||||
attributes.prepend_col_sm,
|
||||
attributes.prepend_col_md,
|
||||
attributes.prepend_col_lg,
|
||||
attributes.prepend_col_xl,
|
||||
attributes.prepend_col_xxl,
|
||||
attributes.prepend_text_align_xs,
|
||||
attributes.prepend_text_align_sm,
|
||||
attributes.prepend_text_align_md,
|
||||
attributes.prepend_text_align_lg,
|
||||
attributes.prepend_text_align_xl,
|
||||
attributes.prepend_text_align_xxl,
|
||||
];
|
||||
|
||||
const {
|
||||
replaceInnerBlocks,
|
||||
updateBlockAttributes,
|
||||
} = useDispatch( blockEditorStore );
|
||||
|
||||
const { getBlock } = useSelect( ( select ) => {
|
||||
return {
|
||||
getBlock: select( blockEditorStore ).getBlock,
|
||||
};
|
||||
}, [] );
|
||||
|
||||
function onChange( key, value ) {
|
||||
setAttributes( { [key]: value } );
|
||||
}
|
||||
|
||||
function setMediaFit( value ) {
|
||||
setAttributes( { media_fit: value } );
|
||||
const changedAttributes = {};
|
||||
const blocks = [];
|
||||
getBlock( clientId ).innerBlocks.forEach( ( block ) => {
|
||||
blocks.push( block.clientId );
|
||||
const image = block.attributes.id
|
||||
? find( imageData, { id: block.attributes.id } )
|
||||
: null;
|
||||
changedAttributes[ block.clientId ] = {
|
||||
media_fit: value
|
||||
};
|
||||
} );
|
||||
updateBlockAttributes( blocks, changedAttributes, true );
|
||||
}
|
||||
|
||||
function setMediaHeight( value ) {
|
||||
setAttributes( { media_height: value } );
|
||||
const changedAttributes = {};
|
||||
const blocks = [];
|
||||
getBlock( clientId ).innerBlocks.forEach( ( block ) => {
|
||||
blocks.push( block.clientId );
|
||||
const image = block.attributes.id
|
||||
? find( imageData, { id: block.attributes.id } )
|
||||
: null;
|
||||
changedAttributes[ block.clientId ] = {
|
||||
media_height: value
|
||||
};
|
||||
} );
|
||||
updateBlockAttributes( blocks, changedAttributes, true );
|
||||
}
|
||||
|
||||
function setMediaWidth( value ) {
|
||||
setAttributes( { media_width: value } );
|
||||
const changedAttributes = {};
|
||||
const blocks = [];
|
||||
getBlock( clientId ).innerBlocks.forEach( ( block ) => {
|
||||
blocks.push( block.clientId );
|
||||
const image = block.attributes.id
|
||||
? find( imageData, { id: block.attributes.id } )
|
||||
: null;
|
||||
changedAttributes[ block.clientId ] = {
|
||||
media_width: value
|
||||
};
|
||||
} );
|
||||
updateBlockAttributes( blocks, changedAttributes, true );
|
||||
}
|
||||
|
||||
function setMediaAlign( value ) {
|
||||
setAttributes( { media_align: value } );
|
||||
const changedAttributes = {};
|
||||
const blocks = [];
|
||||
getBlock( clientId ).innerBlocks.forEach( ( block ) => {
|
||||
blocks.push( block.clientId );
|
||||
const image = block.attributes.id
|
||||
? find( imageData, { id: block.attributes.id } )
|
||||
: null;
|
||||
changedAttributes[ block.clientId ] = {
|
||||
media_align: value
|
||||
};
|
||||
} );
|
||||
updateBlockAttributes( blocks, changedAttributes, true );
|
||||
}
|
||||
|
||||
function setMediaStyle( value ) {
|
||||
setAttributes( { style: value } );
|
||||
const changedAttributes = {};
|
||||
const blocks = [];
|
||||
getBlock( clientId ).innerBlocks.forEach( ( block ) => {
|
||||
blocks.push( block.clientId );
|
||||
const image = block.attributes.id
|
||||
? find( imageData, { id: block.attributes.id } )
|
||||
: null;
|
||||
changedAttributes[ block.clientId ] = {
|
||||
style: value
|
||||
};
|
||||
} );
|
||||
updateBlockAttributes( blocks, changedAttributes, true );
|
||||
}
|
||||
|
||||
const tabDevice = ( tab ) => {
|
||||
var append = ( tab.name == 'xs' ? '' : '-' + tab.name );
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ areoi.DeviceLayout( areoi, attributes, onChange, tab ) }
|
||||
|
||||
{ !attributes['hide_' + tab.name] &&
|
||||
<>
|
||||
<areoi.components.PanelBody title={ 'Settings (' + tab.title + ')' } initialOpen={ false }>
|
||||
|
||||
<areoi.components.PanelRow className="areoi-panel-row">
|
||||
<areoi.components.SelectControl
|
||||
label="Vertical Align"
|
||||
labelPosition="top"
|
||||
help="Align content within body from top to bottom. This will be applied to all greater device sizes unless overridden."
|
||||
value={ attributes['vertical_align_' + tab.name] }
|
||||
options={ [
|
||||
{ label: 'Default', value: null },
|
||||
{ label: 'Start', value: 'align-items' + append + '-start' },
|
||||
{ label: 'Center', value: 'align-items' + append + '-center' },
|
||||
{ label: 'End', value: 'align-items' + append + '-end' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'vertical_align_' + tab.name, value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
</areoi.components.PanelBody>
|
||||
|
||||
<areoi.components.PanelBody title={ 'Prepend Content (' + tab.title + ')' } initialOpen={ false }>
|
||||
|
||||
<areoi.components.PanelRow className="areoi-panel-row">
|
||||
<areoi.components.SelectControl
|
||||
label="Columns"
|
||||
labelPosition="top"
|
||||
help="Number of columns to span."
|
||||
value={ attributes['prepend_col_' + tab.name] }
|
||||
options={ areoi.helper.GetCols( 'col', tab.name ) }
|
||||
onChange={ ( val ) => onChange( 'prepend_col_' + tab.name, val ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow className="areoi-panel-row">
|
||||
<areoi.components.SelectControl
|
||||
label="Horizontal Align"
|
||||
labelPosition="top"
|
||||
help="Align content within body from left to right. This will be applied to all greater device sizes unless overridden."
|
||||
value={ attributes['prepend_horizontal_align_' + tab.name] }
|
||||
options={ [
|
||||
{ label: 'Default', value: null },
|
||||
{ label: 'Start', value: 'justify-content' + append + '-start' },
|
||||
{ label: 'Center', value: 'justify-content' + append + '-center' },
|
||||
{ label: 'End', value: 'justify-content' + append + '-end' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'prepend_horizontal_align_' + tab.name, value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow className="areoi-panel-row areoi-panel-row-no-border">
|
||||
<areoi.components.SelectControl
|
||||
label="Text Align"
|
||||
labelPosition="top"
|
||||
help="Align text within it's containing column."
|
||||
value={ attributes['prepend_text_align_' + tab.name] }
|
||||
options={ [
|
||||
{ label: 'Default', value: null },
|
||||
{ label: 'Start', value: 'text' + append + '-start' },
|
||||
{ label: 'Center', value: 'text' + append + '-center' },
|
||||
{ label: 'End', value: 'text' + append + '-end' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'prepend_text_align_' + tab.name, value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
</areoi.components.PanelBody>
|
||||
|
||||
</>
|
||||
}
|
||||
|
||||
{ areoi.DeviceBackground( areoi, attributes, onChange, tab ) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{ areoi.DisplayPreview( areoi, attributes, onChange, 'content-grid' ) }
|
||||
|
||||
{ !attributes.preview &&
|
||||
<div { ...blockProps } data-anchor={ attributes.anchor ? ' : #' + attributes.anchor : '' }>
|
||||
<areoi.editor.InspectorControls key="setting">
|
||||
|
||||
<areoi.components.PanelBody title={ 'Settings' } initialOpen={ false }>
|
||||
|
||||
<areoi.components.PanelRow>
|
||||
<areoi.components.SelectControl
|
||||
label="Layout"
|
||||
labelPosition="top"
|
||||
help="This will change the layout of any grid items you add within this grid."
|
||||
value={ attributes.layout }
|
||||
options={ [
|
||||
{ label: 'Grid', value: 'grid' },
|
||||
{ label: 'Masonry', value: 'masonry' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'layout', value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow>
|
||||
<areoi.components.SelectControl
|
||||
label="Container"
|
||||
labelPosition="top"
|
||||
help="Choose how you would like your items to be contained."
|
||||
value={ attributes.container }
|
||||
options={ [
|
||||
{ label: 'Fixed', value: 'container' },
|
||||
{ label: 'Full Width', value: 'container-fluid' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'container', value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow>
|
||||
<areoi.components.SelectControl
|
||||
label="Columns"
|
||||
labelPosition="top"
|
||||
help="Specify how many columns you would like to display in your grid."
|
||||
value={ attributes.columns }
|
||||
options={ [
|
||||
{ label: '1', value: '1' },
|
||||
{ label: '2', value: '2' },
|
||||
{ label: '3', value: '3' },
|
||||
{ label: '4', value: '4' },
|
||||
{ label: '5', value: '5' },
|
||||
{ label: '6', value: '6' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'columns', value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow>
|
||||
<areoi.components.SelectControl
|
||||
label="Style"
|
||||
labelPosition="top"
|
||||
help="Choose how you would like each item in your grid to be styled."
|
||||
value={ attributes.style }
|
||||
options={ [
|
||||
{ label: 'Card', value: 'card' },
|
||||
{ label: 'Full', value: 'full' },
|
||||
{ label: 'Flush', value: 'flush' },
|
||||
] }
|
||||
onChange={ setMediaStyle }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow>
|
||||
<areoi.components.SelectControl
|
||||
label="Media Container Size"
|
||||
labelPosition="top"
|
||||
help="Choose a predefined size for your grid item media. Small is 20vh, Medium is 30vh, Large is 40vh and Extra Large is 50vh."
|
||||
value={ attributes.size }
|
||||
options={ [
|
||||
{ label: 'Extra Small', value: 'areoi-extra-small' },
|
||||
{ label: 'Small', value: 'areoi-small' },
|
||||
{ label: 'Medium', value: 'areoi-medium' },
|
||||
{ label: 'Large', value: 'areoi-large' },
|
||||
{ label: 'Extra Large', value: 'areoi-extra-large' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'size', value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow>
|
||||
<areoi.components.SelectControl
|
||||
label="Media Fit"
|
||||
labelPosition="top"
|
||||
help="Choose a predefined size for how your media will fit within the media container."
|
||||
value={ attributes.media_fit }
|
||||
options={ [
|
||||
{ label: 'Cover', value: 'cover' },
|
||||
{ label: 'Contain', value: 'contain' },
|
||||
{ label: 'Set Dimensions', value: 'set' },
|
||||
] }
|
||||
onChange={ setMediaFit }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
{
|
||||
attributes['media_fit'] == 'set' &&
|
||||
<>
|
||||
<areoi.components.PanelRow className="areoi-panel-row areoi-panel-row-no-border">
|
||||
<label className="areoi-panel-row__label">Media Height</label>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<areoi.components.TextControl
|
||||
label=""
|
||||
value={ attributes['media_height'] }
|
||||
onChange={ setMediaHeight }
|
||||
/>
|
||||
</td>
|
||||
<td> px</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p className="components-base-control__help css-1gbp77-StyledHelp">Specify the height to display all your media. This will be applied to all of your items for consistency.</p>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow className="areoi-panel-row areoi-panel-row-no-border">
|
||||
<label className="areoi-panel-row__label">Media Width</label>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<areoi.components.TextControl
|
||||
label=""
|
||||
value={ attributes['media_width'] }
|
||||
onChange={ setMediaWidth }
|
||||
/>
|
||||
</td>
|
||||
<td> px</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p className="components-base-control__help css-1gbp77-StyledHelp">Specify the width to display all your media. This will be applied to all of your items for consistency.</p>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow>
|
||||
<areoi.components.SelectControl
|
||||
label="Media Align"
|
||||
labelPosition="top"
|
||||
help="Specify how you would like your media to be aligned within the container."
|
||||
value={ attributes.media_align }
|
||||
options={ [
|
||||
{ label: 'Start', value: 'start' },
|
||||
{ label: 'Center', value: 'center' },
|
||||
{ label: 'End', value: 'end' },
|
||||
] }
|
||||
onChange={ setMediaAlign }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
</>
|
||||
}
|
||||
|
||||
</areoi.components.PanelBody>
|
||||
|
||||
<areoi.components.PanelBody title={ 'Prepend Content' } initialOpen={ false }>
|
||||
|
||||
<areoi.components.PanelRow className={ 'areoi-panel-row ' }>
|
||||
<areoi.components.ToggleControl
|
||||
label={ 'Display Heading' }
|
||||
help="Toggle on to display a header before your grid begins."
|
||||
checked={ attributes.prepend_display_heading }
|
||||
onChange={ ( value ) => onChange( 'prepend_display_heading', value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
{
|
||||
attributes.prepend_display_heading &&
|
||||
|
||||
<>
|
||||
<areoi.components.PanelRow className="areoi-panel-row">
|
||||
<areoi.components.SelectControl
|
||||
label="Heading Level"
|
||||
labelPosition="top"
|
||||
help="Choose the type of heading you would like to include."
|
||||
value={ attributes.prepend_heading_level }
|
||||
options={ [
|
||||
{ label: 'H1', value: 'h1' },
|
||||
{ label: 'H2', value: 'h2' },
|
||||
{ label: 'H3', value: 'h3' },
|
||||
{ label: 'H4', value: 'h4' },
|
||||
{ label: 'H5', value: 'h5' },
|
||||
{ label: 'H6', value: 'h6' },
|
||||
] }
|
||||
onChange={ ( val ) => onChange( 'prepend_heading_level', val ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
<areoi.components.PanelRow className="areoi-panel-row">
|
||||
<areoi.components.SelectControl
|
||||
label="Heading Color"
|
||||
labelPosition="top"
|
||||
help="Use the Bootstrap text color utilities to change the heading color."
|
||||
value={ attributes.prepend_heading_color }
|
||||
options={ [
|
||||
{ label: 'Default', value: null },
|
||||
{ label: 'Primary', value: 'text-primary' },
|
||||
{ label: 'Secondary', value: 'text-secondary' },
|
||||
{ label: 'Success', value: 'text-success' },
|
||||
{ label: 'Danger', value: 'text-danger' },
|
||||
{ label: 'Warning', value: 'text-warning' },
|
||||
{ label: 'Info', value: 'text-info' },
|
||||
{ label: 'Light', value: 'text-light' },
|
||||
{ label: 'Dark', value: 'text-dark' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'prepend_heading_color', value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
</>
|
||||
}
|
||||
|
||||
<areoi.components.PanelRow className={ 'areoi-panel-row ' + ( attributes.prepend_display_intro ? 'areoi-panel-row-no-border' : '' ) }>
|
||||
<areoi.components.ToggleControl
|
||||
label={ 'Display Intro' }
|
||||
help="Toggle on to display an introduction before your grid begins."
|
||||
checked={ attributes.prepend_display_intro }
|
||||
onChange={ ( value ) => onChange( 'prepend_display_intro', value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
|
||||
{
|
||||
attributes.prepend_display_intro &&
|
||||
|
||||
<areoi.components.PanelRow className="areoi-panel-row areoi-panel-row-no-border">
|
||||
<areoi.components.SelectControl
|
||||
label="Intro Color"
|
||||
labelPosition="top"
|
||||
help="Use the Bootstrap text color utilities to change the intro color."
|
||||
value={ attributes.prepend_intro_color }
|
||||
options={ [
|
||||
{ label: 'Default', value: null },
|
||||
{ label: 'Primary', value: 'text-primary' },
|
||||
{ label: 'Secondary', value: 'text-secondary' },
|
||||
{ label: 'Success', value: 'text-success' },
|
||||
{ label: 'Danger', value: 'text-danger' },
|
||||
{ label: 'Warning', value: 'text-warning' },
|
||||
{ label: 'Info', value: 'text-info' },
|
||||
{ label: 'Light', value: 'text-light' },
|
||||
{ label: 'Dark', value: 'text-dark' },
|
||||
] }
|
||||
onChange={ ( value ) => onChange( 'prepend_intro_color', value ) }
|
||||
/>
|
||||
</areoi.components.PanelRow>
|
||||
}
|
||||
|
||||
</areoi.components.PanelBody>
|
||||
|
||||
{ areoi.Background( areoi, attributes, onChange ) }
|
||||
|
||||
{ areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
|
||||
|
||||
</areoi.editor.InspectorControls>
|
||||
|
||||
{ areoi.DisplayBackground( areoi, attributes ) }
|
||||
|
||||
<div className={ areoi.helper.GetClassNameStr( [ container, 'h-100' ] ) }>
|
||||
<div className={ areoi.helper.GetClassNameStr( row_classes ) }>
|
||||
<div className="col">
|
||||
|
||||
<div className={ areoi.helper.GetClassNameStr( prepend_row_classes ) }>
|
||||
<div className={ areoi.helper.GetClassNameStr( prepend_col_classes ) }>
|
||||
|
||||
{
|
||||
attributes.prepend_display_heading &&
|
||||
|
||||
<div className={ attributes.prepend_heading_color }>
|
||||
<areoi.editor.RichText
|
||||
tagName={ attributes.prepend_heading_level }
|
||||
value={ attributes.prepend_heading }
|
||||
allowedFormats={ [ 'core/bold', 'core/italic' ] }
|
||||
onChange={ ( value ) => onChange( 'prepend_heading', value ) }
|
||||
placeholder={ 'Heading...' }
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
attributes.prepend_display_intro &&
|
||||
|
||||
<div className={ attributes.prepend_intro_color }>
|
||||
<areoi.editor.RichText
|
||||
tagName="p"
|
||||
value={ attributes.prepend_intro }
|
||||
allowedFormats={ [ 'core/bold', 'core/italic' ] }
|
||||
onChange={ ( value ) => onChange( 'prepend_intro', value ) }
|
||||
placeholder={ 'Intro text...' }
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={ areoi.helper.GetClassNameStr( [ 'row', 'areoi-content-grid-columns', 'areoi-content-grid-columns-' + columns ] ) }>
|
||||
|
||||
<areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
);
|
||||
},
|
||||
save: () => {
|
||||
return (
|
||||
<areoi.editor.InnerBlocks.Content/>
|
||||
);
|
||||
},
|
||||
} );
|
||||
@@ -0,0 +1,599 @@
|
||||
{
|
||||
"apiVersion": 2,
|
||||
"name": "areoi/content-grid",
|
||||
"title": "Content Grid",
|
||||
"parent": null,
|
||||
"category": "areoi-strips",
|
||||
"description": "Choose from 2 different grid layouts to display your content.",
|
||||
"textdomain": "default",
|
||||
"keywords": [ "areoi", "bootstrap", "strips" ],
|
||||
"example": {
|
||||
"attributes": {
|
||||
"preview": true
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"preview": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"anchor": {
|
||||
"type": "string",
|
||||
"default": false
|
||||
},
|
||||
"block_id": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
|
||||
"exclude_divider": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"exclude_pattern": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"change_pattern_color": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"pattern_color": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"hex": "#fff"
|
||||
}
|
||||
},
|
||||
"exclude_transition": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"exclude_parallax": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
|
||||
"layout": {
|
||||
"type": "string",
|
||||
"default": "grid"
|
||||
},
|
||||
"style": {
|
||||
"type": "string",
|
||||
"default": "card"
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"default": "areoi-medium"
|
||||
},
|
||||
"media_fit": {
|
||||
"type": "string",
|
||||
"default": "cover"
|
||||
},
|
||||
"media_height": {
|
||||
"type": "string",
|
||||
"default": "50"
|
||||
},
|
||||
"media_width": {
|
||||
"type": "string",
|
||||
"default": "100"
|
||||
},
|
||||
"media_align": {
|
||||
"type": "string",
|
||||
"default": "center"
|
||||
},
|
||||
"columns": {
|
||||
"type": "string",
|
||||
"default": "3"
|
||||
},
|
||||
"container": {
|
||||
"type": "string",
|
||||
"default": "container"
|
||||
},
|
||||
|
||||
"prepend_display_heading": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"prepend_heading_level": {
|
||||
"type": "string",
|
||||
"default": "h2"
|
||||
},
|
||||
"prepend_heading": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_heading_color": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_display_intro": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"prepend_intro": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_intro_color": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_text_align_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_text_align_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_text_align_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_text_align_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_text_align_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_text_align_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_horizontal_align_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_horizontal_align_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_horizontal_align_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_horizontal_align_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_horizontal_align_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_horizontal_align_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_col_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_col_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_col_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_col_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_col_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"prepend_col_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
|
||||
"vertical_align_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"vertical_align_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"vertical_align_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"vertical_align_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"vertical_align_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"vertical_align_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"utilities_bg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"utilities_text": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"utilities_border": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"background_display": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_color": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"rgb": {
|
||||
"r": 0,
|
||||
"g": 0,
|
||||
"b": 0,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"background_image": {
|
||||
"type": "object",
|
||||
"default": null
|
||||
},
|
||||
"background_video": {
|
||||
"type": "object",
|
||||
"default": null
|
||||
},
|
||||
"background_display_overlay": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_overlay": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"rgb": {
|
||||
"r": 0,
|
||||
"g": 0,
|
||||
"b": 0,
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"background_horizontal_align": {
|
||||
"type": "string",
|
||||
"default": "justify-content-start"
|
||||
},
|
||||
|
||||
"height_dimension_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"height_unit_xs": {
|
||||
"type": "string",
|
||||
"default": "px"
|
||||
},
|
||||
"padding_top_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_right_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_bottom_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_left_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_top_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_right_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_bottom_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_left_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"hide_xs": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_hide_xs": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_col_xs": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
|
||||
"height_dimension_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"height_unit_sm": {
|
||||
"type": "string",
|
||||
"default": "px"
|
||||
},
|
||||
"padding_top_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_right_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_bottom_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_left_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_top_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_right_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_bottom_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_left_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"hide_sm": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_hide_sm": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_col_sm": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
|
||||
"height_dimension_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"height_unit_md": {
|
||||
"type": "string",
|
||||
"default": "px"
|
||||
},
|
||||
"padding_top_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_right_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_bottom_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_left_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_top_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_right_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_bottom_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_left_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"hide_md": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_hide_md": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_col_md": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
|
||||
"height_dimension_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"height_unit_lg": {
|
||||
"type": "string",
|
||||
"default": "px"
|
||||
},
|
||||
"padding_top_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_right_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_bottom_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_left_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_top_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_right_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_bottom_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_left_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"hide_lg": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_hide_lg": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_col_lg": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
|
||||
"height_dimension_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"height_unit_xl": {
|
||||
"type": "string",
|
||||
"default": "px"
|
||||
},
|
||||
"padding_top_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_right_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_bottom_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_left_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_top_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_right_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_bottom_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_left_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"hide_xl": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_hide_xl": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_col_xl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
|
||||
"height_dimension_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"height_unit_xxl": {
|
||||
"type": "string",
|
||||
"default": "px"
|
||||
},
|
||||
"padding_top_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_right_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_bottom_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"padding_left_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_top_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_right_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_bottom_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"margin_left_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
},
|
||||
"hide_xxl": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_hide_xxl": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"background_col_xxl": {
|
||||
"type": "string",
|
||||
"default": null
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"anchor": true,
|
||||
"align": true,
|
||||
"html": false
|
||||
},
|
||||
"editorScript": "areoi-blocks",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:../../build/style.css"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
@@ -0,0 +1,274 @@
|
||||
.areoi-content-grid {
|
||||
max-width: 100%;
|
||||
padding: 20px 0;
|
||||
border: 1px dashed #ddd;
|
||||
}
|
||||
.areoi-media-grid {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.areoi-content-grid-item {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
border: 1px dashed #ddd;
|
||||
}
|
||||
.areoi-content-grid-item .wp-block[data-align=center]>.wp-block-image {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.areoi-content-grid-item .card {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.areoi-content-grid-item .card .background .container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid .container .row .col .areoi-prepend-row,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid .container .areoi-content-grid-row {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Media grid
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding-top: calc(var(--bs-gutter-x) * .5);
|
||||
padding-bottom: calc(var(--bs-gutter-x) * .5);
|
||||
position: relative;
|
||||
}
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > div,
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > div > img,
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > a > img {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
transform: translate( -50%, -50% );
|
||||
object-fit: cover;
|
||||
}
|
||||
.areoi-media-grid .areoi-content-grid-columns figcaption {
|
||||
display: none;
|
||||
}
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > figcaption {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: calc(var(--bs-gutter-x) * .5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Card size
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-card-extra-small.areoi-content-grid-item,
|
||||
.areoi-card-extra-small.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 20vh;
|
||||
}
|
||||
.areoi-card-small.areoi-content-grid-item,
|
||||
.areoi-card-small.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 40vh;
|
||||
}
|
||||
.areoi-card-medium.areoi-content-grid-item,
|
||||
.areoi-card-medium.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 60vh;
|
||||
}
|
||||
.areoi-card-large.areoi-content-grid-item,
|
||||
.areoi-card-large.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 80vh;
|
||||
}
|
||||
.areoi-card-extra-large.areoi-content-grid-item,
|
||||
.areoi-card-extra-large.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Media size
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-content-grid-item .card-img-top {
|
||||
display: none;
|
||||
height: 40vh;
|
||||
}
|
||||
.areoi-extra-small .areoi-content-grid-item .card-img-top,
|
||||
.areoi-extra-small.areoi-content-grid-item .card-img-top {
|
||||
height: 10vh;
|
||||
}
|
||||
.areoi-small .areoi-content-grid-item .card-img-top,
|
||||
.areoi-small.areoi-content-grid-item .card-img-top {
|
||||
height: 20vh;
|
||||
}
|
||||
.areoi-medium .areoi-content-grid-item .card-img-top,
|
||||
.areoi-medium.areoi-content-grid-item .card-img-top {
|
||||
height: 30vh;
|
||||
}
|
||||
.areoi-extra-large .areoi-content-grid-item .card-img-top,
|
||||
.areoi-extra-large.areoi-content-grid-item .card-img-top {
|
||||
height: 50vh;
|
||||
}
|
||||
.areoi-content-grid-item .has-image .card-img-top,
|
||||
.areoi-content-grid-item.has-image .card-img-top {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Media layout
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-media .areoi-media-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.areoi-media .areoi-media-container img,
|
||||
.areoi-media .areoi-media-container video {
|
||||
max-width: unset;
|
||||
max-height: unset;
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate( -50%, -50% );
|
||||
}
|
||||
.areoi-media .areoi-media-container.start:not(.cover, .contain) img,
|
||||
.areoi-media .areoi-media-container.start:not(.cover, .contain) video {
|
||||
top: 50%;
|
||||
left: 1rem;
|
||||
transform: translate( 0, -50% );
|
||||
}
|
||||
.areoi-media .areoi-media-container.end:not(.cover, .contain) img,
|
||||
.areoi-media .areoi-media-container.end:not(.cover, .contain) video {
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: 1rem;
|
||||
transform: translate( 0, -50% );
|
||||
}
|
||||
.areoi-media .areoi-media-container.cover img,
|
||||
.areoi-media .areoi-media-container.cover video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.areoi-media .areoi-media-container.contain img,
|
||||
.areoi-media .areoi-media-container.contain video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Grid layout
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid-full > div > .row > figure {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid > div > .row > .col > .areoi-content-grid-columns > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-post-grid > div > .row > .col > .areoi-content-grid-columns,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-media-grid > div > .row > .col > .areoi-content-grid-columns {
|
||||
display: grid !important;
|
||||
grid-auto-rows: 1fr;
|
||||
min-height: 100px;
|
||||
}
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-1 > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-post-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-1,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-media-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-2 > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-post-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-2,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-media-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-3 > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-post-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-3,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-media-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-4 > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-post-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-4,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-media-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-4 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-5 > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-post-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-5,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-media-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-5 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.block-editor-block-list__layout.is-root-container .areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-6 > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-post-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-6,
|
||||
.block-editor-block-list__layout.is-root-container .areoi-media-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-6 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(5),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(9) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(4),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(8),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(12) {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(7) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(6) {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(9) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(8) {
|
||||
grid-column-start: 4;
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(9) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(8) {
|
||||
grid-column-start: 4;
|
||||
grid-column-end: 7;
|
||||
}
|
||||
@@ -0,0 +1,316 @@
|
||||
.areoi-content-grid-item .aligncenter {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.areoi-content-grid-item {
|
||||
padding-top: calc(var(--bs-gutter-x) * .5);
|
||||
padding-bottom: calc(var(--bs-gutter-x) * .5);
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Media grid
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding-top: calc(var(--bs-gutter-x) * .5);
|
||||
padding-bottom: calc(var(--bs-gutter-x) * .5);
|
||||
position: relative;
|
||||
}
|
||||
.areoi-media-grid.areoi-content-grid-full .areoi-content-grid-columns > figure {
|
||||
padding: 0;
|
||||
}
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > div,
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > div > img,
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > a > img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
transform: translate( -50%, -50% );
|
||||
object-fit: cover;
|
||||
}
|
||||
.areoi-media-grid .areoi-content-grid-columns figcaption {
|
||||
display: none;
|
||||
}
|
||||
.areoi-media-grid .areoi-content-grid-columns figure > figcaption {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: calc(var(--bs-gutter-x) * .5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Item size
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-content-grid-item .card-body > div {
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Card size
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-card-extra-small.areoi-content-grid-item,
|
||||
.areoi-card-extra-small.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 20vh;
|
||||
}
|
||||
.areoi-card-small.areoi-content-grid-item,
|
||||
.areoi-card-small.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 40vh;
|
||||
}
|
||||
.areoi-card-medium.areoi-content-grid-item,
|
||||
.areoi-card-medium.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 60vh;
|
||||
}
|
||||
.areoi-card-large.areoi-content-grid-item,
|
||||
.areoi-card-large.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 80vh;
|
||||
}
|
||||
.areoi-card-extra-large.areoi-content-grid-item,
|
||||
.areoi-card-extra-large.areoi-media-grid .areoi-content-grid-columns figure {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Media size
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-content-grid-item .card-img-top {
|
||||
display: none;
|
||||
height: 40vh;
|
||||
}
|
||||
.areoi-extra-small .areoi-content-grid-item .card-img-top {
|
||||
height: 10vh;
|
||||
}
|
||||
.areoi-small .areoi-content-grid-item .card-img-top {
|
||||
height: 20vh;
|
||||
}
|
||||
.areoi-medium .areoi-content-grid-item .card-img-top {
|
||||
height: 30vh;
|
||||
}
|
||||
.areoi-extra-large .areoi-content-grid-item .card-img-top {
|
||||
height: 50vh;
|
||||
}
|
||||
.areoi-content-grid-item.has-image .card-img-top {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Media layout
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-media .areoi-media-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.areoi-media .areoi-media-container img,
|
||||
.areoi-media .areoi-media-container video {
|
||||
max-width: unset;
|
||||
max-height: unset;
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate( -50%, -50% );
|
||||
}
|
||||
.areoi-media .areoi-media-container.start:not(.cover, .contain) img,
|
||||
.areoi-media .areoi-media-container.start:not(.cover, .contain) video {
|
||||
top: 50%;
|
||||
left: 1rem;
|
||||
transform: translate( 0, -50% );
|
||||
}
|
||||
.areoi-media .areoi-media-container.end:not(.cover, .contain) img,
|
||||
.areoi-media .areoi-media-container.end:not(.cover, .contain) video {
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: 1rem;
|
||||
transform: translate( 0, -50% );
|
||||
}
|
||||
.areoi-media .areoi-media-container.cover img,
|
||||
.areoi-media .areoi-media-container.cover video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.areoi-media .areoi-media-container.contain img,
|
||||
.areoi-media .areoi-media-container.contain video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* Grid size
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns,
|
||||
.areoi-media-grid > div > figure {
|
||||
display: grid !important;
|
||||
grid-auto-rows: 1fr;
|
||||
min-height: 100px;
|
||||
}
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-1,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-2,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-3,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-4,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-5,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-6 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* SM Grid size
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
@media only screen and ( min-width: 576px ) {
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-2,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-3,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-4,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-5,
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-6 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(odd),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(even),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(odd),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(even),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(odd),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(even),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(odd),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(even) {
|
||||
grid-column-start: auto;
|
||||
grid-column-end: auto;
|
||||
}
|
||||
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(4),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(7),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(4),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(7),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(4),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(7),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(4),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(7)
|
||||
{
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------
|
||||
* LG Grid size
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
@media only screen and ( min-width: 992px ) {
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(odd),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(even),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(odd),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(even),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(odd),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(even),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(odd),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(even) {
|
||||
grid-column-start: auto;
|
||||
grid-column-end: auto;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(5),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(9) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(4),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(8),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-3 .areoi-content-grid-item:nth-of-type(12) {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-4 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item,
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(4),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(7) {
|
||||
grid-column-start: auto;
|
||||
grid-column-end: auto;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(7) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-4 .areoi-content-grid-item:nth-of-type(6) {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-5 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(9) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-5 .areoi-content-grid-item:nth-of-type(8) {
|
||||
grid-column-start: 4;
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.areoi-content-grid > div > .row > .col > .areoi-content-grid-columns.areoi-content-grid-columns-6 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(1),
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(9) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
.areoi-content-grid-masonry .areoi-content-grid-columns-6 .areoi-content-grid-item:nth-of-type(8) {
|
||||
grid-column-start: 4;
|
||||
grid-column-end: 7;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user