Plugin Tabs noticias

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/Alignment.js

@@ -0,0 +1,117 @@
+import classNames from 'classnames';
+
+import { __, _x } from '@wordpress/i18n';
+
+import { useSelect } from '@wordpress/data';
+
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+import {
+    alignNone,
+    positionCenter,
+    positionLeft,
+    positionRight,
+    stretchFullWidth,
+    stretchWide,
+} from '@wordpress/icons';
+
+export const BLOCK_ALIGNMENTS_CONTROLS = {
+    none: {
+        icon: 'align-none',
+        title: __( 'None', 'Alignment option' ),
+    },
+    wide: {
+        icon: stretchWide,
+        title: __( 'Wide width' ),
+    },
+    full: {
+        icon: stretchFullWidth,
+        title: __( 'Full width' ),
+    },
+    left: {
+        icon: positionLeft,
+        title: __( 'Align left' ),
+    },
+    center: {
+        icon: positionCenter,
+        title: __( 'Align center' ),
+    },
+    right: {
+        icon: positionRight,
+        title: __( 'Align right' ),
+    },
+};
+
+export const DEFAULT_CONTROL = 'none';
+
+export const POPOVER_PROPS = {
+    isAlternate: true,
+};
+
+const Alignment = ( areoi, attributes, onChange ) => {
+
+    const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ attributes.align ];
+    const defaultAlignmentControl =
+        BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
+
+    const UIComponent = areoi.components.ToolbarDropdownMenu;
+    const commonProps = {
+        icon: activeAlignmentControl
+            ? activeAlignmentControl.icon
+            : defaultAlignmentControl.icon,
+        label: __( 'Align' ),
+    };
+
+    function getItems( onClose )
+    {
+        var output = [];
+
+        for ( const [key, value] of Object.entries( BLOCK_ALIGNMENTS_CONTROLS ) ) {
+            
+            var isSelected = key === attributes.align || ( ! attributes.align && key === 'none' );
+            
+            var new_output = (
+                <areoi.components.MenuItem
+                    key={ key }
+                    icon={ value.icon }
+                    iconPosition="left"
+                    className={ classNames(
+                        'components-dropdown-menu__menu-item',
+                        {
+                            'is-active': isSelected,
+                        }
+                    ) }
+                    isSelected={ isSelected }
+                    onClick={ () => {
+                        onChange( 'align', key );
+                        onClose();
+                    } }
+                    role="menuitemradio"
+                >
+                    { value.title }
+                </areoi.components.MenuItem>
+            );
+            output.push( new_output );
+        }
+
+        return output;
+    }
+
+    const extraProps = {
+        toggleProps: { describedBy: __( 'Change alignment' ) },
+        popoverProps: POPOVER_PROPS,
+        children: ( { onClose } ) => {
+            return (
+                <>
+                    <areoi.components.MenuGroup className="block-editor-block-alignment-control__menu-group">
+                        { getItems( onClose ) }
+                    </areoi.components.MenuGroup>
+                </>
+            );
+        },
+    };
+
+    return <UIComponent { ...commonProps } { ...extraProps } />;
+}
+
+export default Alignment;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/Background.js

@@ -0,0 +1,84 @@
+const Background = ( areoi, attributes, onChange ) => {
+    return (
+        <areoi.components.PanelBody title={ 'Background' } initialOpen={ false }>
+            <areoi.components.PanelRow className={ 'areoi-panel-row ' + ( !attributes.background_display ? 'areoi-panel-row-no-border' : '' ) }>
+                <areoi.components.ToggleControl 
+                    label={ 'Display Background' }
+                    help="Toggle on to display a background and all available background options."
+                    checked={ attributes.background_display }
+                    onChange={ ( value ) => onChange( 'background_display', value ) }
+                />
+            </areoi.components.PanelRow>
+
+            { attributes.background_display &&
+                <>
+                    {
+                        Object.keys( attributes ).indexOf( 'background_horizontal_align' ) !== -1 &&
+                        <areoi.components.PanelRow className="areoi-panel-row">
+                            <areoi.components.SelectControl
+                                label="Horizontal Align"
+                                labelPosition="top"
+                                help="Align the background to the left of the strip, in the center or to the right. This will be applied for all devices."
+                                value={ attributes.background_horizontal_align }
+                                options={ [
+                                    { label: 'Left', value: 'justify-content-start' },
+                                    { label: 'Center', value: 'justify-content-center' },
+                                    { label: 'Right', value: 'justify-content-end' }
+                                ] }
+                                onChange={ ( val ) => onChange( 'background_horizontal_align', val ) }
+                            />
+                        </areoi.components.PanelRow>
+                    }
+
+                    {
+                        Object.keys( attributes ).indexOf( 'background_utility' ) !== -1 &&
+                        <areoi.components.PanelRow className="areoi-panel-row">
+                            <areoi.components.SelectControl
+                                label="Color (Utility Class)"
+                                labelPosition="top"
+                                help="Use the Bootstrap background utilities to change the background. This will override any colors added via the color picker."
+                                value={ attributes.background_utility }
+                                options={ [
+                                    { label: 'None', value: '' },
+                                    { label: 'Primary', value: 'bg-primary' },
+                                    { label: 'Secondary', value: 'bg-secondary' },
+                                    { label: 'Success', value: 'bg-success' },
+                                    { label: 'Danger', value: 'bg-danger' },
+                                    { label: 'Warning', value: 'bg-warning' },
+                                    { label: 'Info', value: 'bg-info' },
+                                    { label: 'Light', value: 'bg-light' },
+                                    { label: 'Dark', value: 'bg-dark' },
+                                    { label: 'Body', value: 'bg-body' },
+                                ] }
+                                onChange={ ( value ) => onChange( 'background_utility', value ) }
+                            />
+
+                        </areoi.components.PanelRow>
+                    }
+
+                    {
+                        ( Object.keys( attributes ).indexOf( 'background_utility' ) === -1 || !attributes.background_utility ) &&
+                        areoi.ColorPicker( areoi, attributes, onChange, 'background_color', 'Color' )
+                    }
+
+                    { areoi.MediaUpload( areoi, attributes, onChange, 'Image', 'image', 'background_image' ) }
+
+                    { areoi.MediaUpload( areoi, attributes, onChange, 'Video', 'video', 'background_video' ) }
+
+                    <areoi.components.ToggleControl 
+                        label={ 'Display Overlay' }
+                        help="Toggle on to add an overlay over the top of any image or video added to the background."
+                        checked={ attributes.background_display_overlay }
+                        onChange={ ( value ) => onChange( 'background_display_overlay', value ) }
+                    />
+
+                    { attributes.background_display_overlay &&
+                        areoi.ColorPicker( areoi, attributes, onChange, 'background_overlay', 'Overlay' )
+                    }                    
+                </>
+            }
+        </areoi.components.PanelBody>
+    );
+}
+
+export default Background;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/ColorPicker.js

@@ -0,0 +1,45 @@
+import { colord, Colord } from 'colord';
+
+const ColorPicker = ( areoi, attributes, onChange, key, label ) => {
+
+    var new_color = null 
+
+    function testonChange( key, value )
+    {
+        var color = value;
+        
+        if ( !value.hex ) {
+            color = {
+                hex: value,
+                hsl: colord( value ).toHsl(),
+                hsv: colord( value ).toHsv(),
+                oldHue: colord( value ).hue(),
+                rgb: colord( value ).toRgb(),
+                source: 'hex'
+            }
+        }
+        
+        onChange( key, color );
+    }
+    
+    return (
+        <areoi.components.PanelRow className="areoi-panel-row areoi-panel-row-color">
+            <label>{ label }</label>
+            
+            <div className="areoi-color-picker">
+                <areoi.components.ColorPicker
+                    color={ attributes[key] }
+                    onChangeComplete={ ( val ) => testonChange( key, val ) }
+                />
+
+                <areoi.components.ColorPalette
+                    colors={ areoi_vars.colors }
+                    value={ new_color }
+                    onChange={ ( val ) => testonChange( key, val ) }
+                />
+            </div>
+        </areoi.components.PanelRow>
+    );
+}
+
+export default ColorPicker;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/Colors.js

@@ -0,0 +1,41 @@
+const Colors = ( areoi, attributes, onChange ) => {
+    return (
+        <>
+            <areoi.components.PanelRow className="areoi-panel-row">
+                <areoi.components.SelectControl
+                    label="Background"
+                    labelPosition="top"
+                    help="Use the Bootstrap background utilities to change the background of a card."
+                    value={ attributes.background }
+                    options={ JSON.parse( areoi_vars.utility_bg ) }
+                    onChange={ ( value ) => onChange( 'background', value ) }
+                />
+
+            </areoi.components.PanelRow>
+
+            <areoi.components.PanelRow className="areoi-panel-row">
+                <areoi.components.SelectControl
+                    label="Text Color"
+                    labelPosition="top"
+                    help="Use the Bootstrap text color utilities to change the text color of a card."
+                    value={ attributes.text_color }
+                    options={ JSON.parse( areoi_vars.utility_text ) }
+                    onChange={ ( value ) => onChange( 'text_color', value ) }
+                />
+            </areoi.components.PanelRow>
+
+            <areoi.components.PanelRow>
+                <areoi.components.SelectControl
+                    label="Border Color"
+                    labelPosition="top"
+                    help="Use border utilities to change just the border-color of a card."
+                    value={ attributes.border_color }
+                    options={ JSON.parse( areoi_vars.utility_border ) }
+                    onChange={ ( value ) => onChange( 'border_color', value ) }
+                />
+            </areoi.components.PanelRow>
+        </>
+    );
+}
+
+export default Colors;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/Core.js

@@ -0,0 +1,76 @@
+import * as blocks from '@wordpress/blocks';
+import * as components from '@wordpress/components';
+import * as compose from '@wordpress/compose';
+import * as editor from '@wordpress/block-editor';
+import * as element from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import * as icon from '@wordpress/icons';
+import * as keycodes from '@wordpress/keycodes';
+
+
+import * as helper from './Helpers.js';
+
+// Custom Components
+import ResponsiveTabPanel from './ResponsiveTabPanel.js';
+import MediaUpload from './MediaUpload.js';
+import ItemMediaUpload from './ItemMediaUpload.js';
+import MediaGallery from './MediaGallery.js';
+import Items from './Items.js';
+import Alignment from './Alignment.js';
+import URLPicker from './URLPicker.js'
+
+// Setting Groups
+import Background from './Background.js';
+import ColorPicker from './ColorPicker.js';
+import Utilities from './Utilities.js';
+import Colors from './Colors.js';
+
+// Device Setting Groups
+import DeviceBackground from './DeviceBackground.js';
+import DeviceLayout from './DeviceLayout.js';
+
+// Editor Displays
+import DisplayBackground from './DisplayBackground.js';
+import DisplayPreview from './DisplayPreview.js';
+import DisplayVisibility from './DisplayVisibility.js';
+
+const el = element.createElement;
+const blockIcon = el('svg', { width: 20, height: 20 },
+  el('path', { d: "M9.5,0.4L0.4,21.2l0,0c2.9,0,5.6-1.8,6.8-4.4l7.2-16.3H9.5z" } ),
+  el('path', { d: "M15.4,16.5c1.9,0,3.7,0.7,5,2.1l-5-11.3l-5,11.3C11.7,17.3,13.5,16.5,15.4,16.5z" } )
+);
+
+const directory = areoi_vars.plugin_url + 'blocks/';
+
+export {
+    blocks,
+    components,
+    compose,
+    editor,
+    element,
+    icon,
+    keycodes,
+    blockIcon,
+    directory,
+    __,
+    helper,
+    ResponsiveTabPanel,
+    MediaUpload,
+    ItemMediaUpload,
+    MediaGallery,
+    Items,
+    Alignment,
+    URLPicker,
+
+    Background,
+    Utilities,
+    ColorPicker,
+    Colors,
+
+    DeviceBackground,
+    DeviceLayout,
+
+    DisplayBackground,
+    DisplayPreview,
+    DisplayVisibility
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/DeviceBackground.js

@@ -0,0 +1,35 @@
+const DeviceBackground = ( areoi, attributes, onChange, tab ) => {
+    return (
+        <>
+        {
+            !attributes['hide_' + tab.name] && attributes.background_display &&
+
+            <areoi.components.PanelBody title={ 'Background (' + tab.title + ')' } initialOpen={ false }>
+                <areoi.components.PanelRow className={ 'areoi-panel-row ' + ( attributes['background_hide_' + tab.name] ? 'areoi-panel-row-no-border' : '' ) }>
+                    <areoi.components.ToggleControl 
+                        label={ 'Hide Background on ' + tab.title }
+                        help={ 'Hide the background for this block on ' + tab.title + ' devices. This will only hide the background from this specific device unless you alter the setting on each device.' }
+                        checked={ attributes['background_hide_' + tab.name] }
+                        onChange={ ( value ) => onChange( 'background_hide_' + tab.name, value ) }
+                    />
+                </areoi.components.PanelRow>
+                
+                { attributes.background_display && !attributes['background_hide_' + tab.name] &&
+                    <areoi.components.PanelRow className="areoi-panel-row areoi-panel-row-no-border">
+                        <areoi.components.SelectControl
+                            label="Columns"
+                            labelPosition="top"
+                            help="Specify how many columns you would like the background to span on this device."
+                            value={ attributes['background_col_' + tab.name] }
+                            options={ areoi.helper.GetCols( 'col-' + tab.name, '' ) }
+                            onChange={ ( val ) => onChange( 'background_col_' + tab.name, val ) }
+                        />
+                    </areoi.components.PanelRow>
+                }
+            </areoi.components.PanelBody>
+        }
+        </>
+    );
+}
+
+export default DeviceBackground;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/DeviceLayout.js

@@ -0,0 +1,133 @@
+const DeviceLayout = ( areoi, attributes, onChange, tab ) => {
+
+    var append = '';
+    if ( tab.name != 'default' ) {
+        append = '_' + tab.name;
+    }
+
+    return (
+        <areoi.components.PanelBody title={ 'Display (' + tab.title + ')' } initialOpen={ false }>
+            <areoi.components.PanelRow className={ 'areoi-panel-row ' + ( attributes['hide_' + tab.name] ? 'areoi-panel-row-no-border' : '' ) }>
+                <areoi.components.ToggleControl 
+                    label={ 'Hide on ' + tab.title }
+                    help={ 'Hide this block on ' + tab.title + ' devices. This will only hide the block from this specific device unless you alter the setting on each device.' }
+                    checked={ attributes['hide_' + tab.name] }
+                    onChange={ ( value ) => onChange( 'hide_' + tab.name, value ) }
+                />
+            </areoi.components.PanelRow>
+
+            {
+                !attributes['hide_' + tab.name] && 
+
+                <>
+                    <areoi.components.PanelRow className="areoi-panel-row">
+                        <label className="areoi-panel-row__label">Height</label>
+                        <table>
+                            <tr>
+                                <td>
+                                    <areoi.components.TextControl
+                                        label="Dimensions"
+                                        value={ attributes['height_dimension' + append] }
+                                        onChange={ ( value ) => onChange( 'height_dimension' + append, value ) }
+                                    />
+                                </td>
+                                <td class="areoi-field-reset">
+                                    <areoi.components.SelectControl
+                                        label="Units"
+                                        labelPosition="top"
+                                        value={ attributes['height_unit' + append] }
+                                        options={ [
+                                            { label: 'px', value: 'px' },
+                                            { label: '%', value: '%' },
+                                            { label: 'vh', value: 'vh' },
+                                            { label: 'rem', value: 'rem' },
+                                        ] }
+                                        onChange={ ( value ) => onChange( 'height_unit' + append, value ) }
+                                    />
+                                </td>
+                            </tr>
+                        </table>
+                        <p className="components-base-control__help css-1gbp77-StyledHelp">Dimenions will be applied to all devices greater than this one unless overridden in each devices settings.</p>
+                    </areoi.components.PanelRow>
+
+                    <areoi.components.PanelRow className="areoi-panel-row">
+                        <label className="areoi-panel-row__label">Padding ({areoi_vars.display_units})</label>
+                        <table>
+                            <tr>
+                                <td width="25%">
+                                    <areoi.components.TextControl
+                                        label="Top"
+                                        value={ attributes['padding_top' + append] }
+                                        onChange={ ( value ) => onChange( 'padding_top' + append, value ) }
+                                    />
+                                </td>
+                                <td width="25%">
+                                    <areoi.components.TextControl
+                                        label="Right"
+                                        value={ attributes['padding_right' + append] }
+                                        onChange={ ( value ) => onChange( 'padding_right' + append, value ) }
+                                    />
+                                </td>
+                                <td width="25%">
+                                    <areoi.components.TextControl
+                                        label="Bottom"
+                                        value={ attributes['padding_bottom' + append] }
+                                        onChange={ ( value ) => onChange( 'padding_bottom' + append, value ) }
+                                    />
+                                </td>
+                                <td width="25%">
+                                    <areoi.components.TextControl
+                                        label="Left"
+                                        value={ attributes['padding_left' + append] }
+                                        onChange={ ( value ) => onChange( 'padding_left' + append, value ) }
+                                    />
+                                </td>
+                            </tr>
+                        </table>
+                        <p className="components-base-control__help css-1gbp77-StyledHelp">Padding will be applied to all devices greater than this one unless overridden in each devices settings.</p>
+                    </areoi.components.PanelRow>
+
+                    <areoi.components.PanelRow className="areoi-panel-row areoi-panel-row-no-border">
+                        <label className="areoi-panel-row__label">Margin ({areoi_vars.display_units})</label>
+                        <table>
+                            <tr>
+                                <td width="25%">
+                                    <areoi.components.TextControl
+                                        label="Top"
+                                        value={ attributes['margin_top' + append] }
+                                        onChange={ ( value ) => onChange( 'margin_top' + append, value ) }
+                                    />
+                                </td>
+                                <td width="25%">
+                                    <areoi.components.TextControl
+                                        label="Right"
+                                        value={ attributes['margin_right' + append] }
+                                        onChange={ ( value ) => onChange( 'margin_right' + append, value ) }
+                                    />
+                                </td>
+                                <td width="25%">
+                                    <areoi.components.TextControl
+                                        label="Bottom"
+                                        value={ attributes['margin_bottom' + append] }
+                                        onChange={ ( value ) => onChange( 'margin_bottom' + append, value ) }
+                                    />
+                                </td>
+                                <td width="25%">
+                                    <areoi.components.TextControl
+                                        label="Left"
+                                        value={ attributes['margin_left' + append] }
+                                        onChange={ ( value ) => onChange( 'margin_left' + append, value ) }
+                                    />
+                                </td>
+                            </tr>
+                        </table>
+                        <p className="components-base-control__help css-1gbp77-StyledHelp">Margin will be applied to all devices greater than this one unless overridden in each devices settings.</p>
+                    </areoi.components.PanelRow>
+                </>
+            }
+
+        </areoi.components.PanelBody>
+    );
+}
+
+export default DeviceLayout;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/DisplayBackground.js

@@ -0,0 +1,63 @@
+const DisplayBackground = ( areoi, attributes, onChange, tab ) => {
+    return (
+        <div>
+        { attributes.background_display &&
+            <div className={ areoi.helper.GetClassNameStr( [ 
+                'background'
+            ] ) }>
+                <div className="container-fluid">
+                    <div className={ areoi.helper.GetClassNameStr( [ 
+                            'row',
+                            'd-flex',
+                            attributes.background_horizontal_align 
+                        ] ) }>
+                        <div className={ areoi.helper.GetClassNameStr( [ 
+                            'col',
+                            attributes.background_col_xs,
+                            attributes.background_col_sm,
+                            attributes.background_col_md,
+                            attributes.background_col_lg,
+                            attributes.background_col_xl,
+                            attributes.background_col_xxl 
+                        ] ) }>
+                            { 
+                                attributes.background_color && 
+                                <div className={ areoi.helper.GetClassNameStr( [ 
+                                    'background__color'
+                                ] ) } style={ {
+                                    background: areoi.helper.GetRGB( attributes.background_color.rgb )
+                                } }></div>
+                            }
+                            { 
+                                attributes.background_image && 
+                                <div 
+                                    className={ areoi.helper.GetClassNameStr( [ 'background__image' ] ) } 
+                                    style={ { 
+                                        cssText: 'background-image: url( ' + attributes.background_image.url + ' );'
+                                    } }
+                                ></div>
+                            }
+                            { 
+                                attributes.background_video && 
+                                <video>
+                                    <source src={ attributes.background_video.url } />
+                                </video>
+                            }
+                            { 
+                                attributes.background_overlay && attributes.background_display_overlay && 
+                                <div className={ areoi.helper.GetClassNameStr( [ 
+                                    'background__overlay'
+                                ] ) } style={ {
+                                    background: areoi.helper.GetRGB( attributes.background_overlay.rgb )
+                                } }></div>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        }
+        </div>
+    );
+}
+
+export default DisplayBackground;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/DisplayPreview.js

@@ -0,0 +1,13 @@
+const DisplayPreview = ( areoi, attributes, onChange, block ) => {
+
+    return (
+        <>
+            { 
+                attributes.preview &&  
+                <img src={ areoi.directory + block + '/cover.png'} />
+            }
+        </>
+    );
+}
+
+export default DisplayPreview;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/DisplayVisibility.js

@@ -0,0 +1,15 @@
+const DisplayVisibility = ( areoi, attributes, onChange, tab ) => {
+
+    return (
+        <areoi.components.PanelBody title={ 'Display (' + tab.title + ')' } initialOpen={ false }>
+            <areoi.components.ToggleControl 
+                label={ 'Hide on ' + tab.title }
+                help={ 'Hide this block on ' + tab.title + ' devices. This will only hide the block from this specific device unless you alter the setting on each device.' }
+                checked={ attributes['hide_' + tab.name] }
+                onChange={ ( value ) => onChange( 'hide_' + tab.name, value ) }
+            />
+        </areoi.components.PanelBody>
+    );
+}
+
+export default DisplayVisibility;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/Helpers.js

@@ -0,0 +1,132 @@
+export const GetClassName = ( classes ) => {
+    let newClasses = [];
+    classes.forEach(element => {
+        if ( typeof element !== 'undefined' && element ) {
+            newClasses.push( element );
+        }
+    });
+    return newClasses;
+}
+
+export const GetClassNameCol = ( classes, isFlex ) => {
+    let newClasses = [];
+    classes.forEach(element => {
+        if ( typeof element !== 'undefined' && element ) {
+            console.log(isFlex)
+            if ( areoi_vars.is_grid && !isFlex ) {
+                element = element.replace("col-", 'g-col-');
+                element = element.replace("offset-", 'g-start-');
+            }
+
+            newClasses.push( element );
+        }
+    });
+    return newClasses;
+}
+
+export const GetClassNameStr = ( classes ) => {
+    let newClasses = '';
+    classes.forEach(element => {
+        if ( typeof element !== 'undefined' && element ) {
+            newClasses += element + ' ';
+        }
+    });
+    return newClasses;
+}
+
+export const GetStyles = ( attributes ) => {
+
+    var devices = [ 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' ];
+
+    let styles = '';
+
+    devices.forEach( device => {
+        styles += ( attributes['height_dimension_' + device] ? 'height: ' + attributes['height_dimension_' + device] + attributes['height_unit_' + device] + ';' : '' );
+        styles += ( attributes['padding_top_' + device] ? 'padding-top: ' + attributes['padding_top_' + device] + areoi_vars.display_units + ';' : '' );
+        styles += ( attributes['padding_right_' + device] ? 'padding-right: ' + attributes['padding_right_' + device] + areoi_vars.display_units + ';' : '' );
+        styles += ( attributes['padding_bottom_' + device] ? 'padding-bottom: ' + attributes['padding_bottom_' + device] + areoi_vars.display_units + ';' : '' );
+        styles += ( attributes['padding_left_' + device] ? 'padding-left: ' + attributes['padding_left_' + device] + areoi_vars.display_units + ';' : '' );
+        styles += ( attributes['margin_top_' + device] ? 'margin-top: ' + attributes['margin_top_' + device] + areoi_vars.display_units + ';' : '' );
+        styles += ( attributes['margin_right_' + device] ? 'margin-right: ' + attributes['margin_right_' + device] + areoi_vars.display_units + ';' : '' );
+        styles += ( attributes['margin_bottom_' + device] ? 'margin-bottom: ' + attributes['margin_bottom_' + device] + areoi_vars.display_units + ';' : '' );
+        styles += ( attributes['margin_left_' + device] ? 'margin-left: ' + attributes['margin_left_' + device] + areoi_vars.display_units + ';' : '' );
+
+        if ( areoi_vars.is_grid ) {
+            styles += ( attributes['grid_rows_' + device] ? '--bs-rows: ' + attributes['grid_rows_' + device] + ';' : '' );
+
+            if ( attributes['row_cols_' + device] && attributes['row_cols_' + device] != 'Default' ) {
+                var cols = attributes['row_cols_' + device].match(/\d+$/)[0];
+                if ( cols ) {
+                    styles += '--bs-columns: ' + cols + ';';
+                }
+            }
+
+            styles += ( attributes['grid_gap_dimension_' + device] ? '--bs-gap: ' + attributes['grid_gap_dimension_' + device] + attributes['grid_gap_unit_' + device] + ';' : '' );
+            styles += ( attributes['grid_row_gap_dimension_' + device] ? '--bs-row-gap: ' + attributes['grid_row_gap_dimension_' + device] + attributes['grid_row_gap_unit_' + device] + ';' : '' );
+        
+            styles += ( attributes['grid_row_' + device] ? '--bs-grid-row: ' + attributes['grid_row_' + device] + ';' : '' );
+        }
+    })
+
+    return styles;
+}
+
+export const GetRGB = ( values ) => {
+    
+    let rgb = 'rgba( ' + values.r + ', ' + values.g + ', ' + values.b + ', ' + values.a + ' )';
+    
+    return rgb;
+}
+
+export const GetCols = ( field, key ) => {
+    if ( field == 'col-xs' ) {
+        field = 'col';
+    }
+    if ( key == 'xs' ) {
+        key = null;
+    }
+    const device = field + ( key ? '-' + key : '' );
+
+    var cols = [];
+
+    if ( field == 'row-cols' ) {
+
+        cols.push({ label: 'Default', value: null });
+
+        for (var i = 0; i <= areoi_vars.grid_rows; i++ ) {
+            if ( i > 0 ) {
+                cols.push({ label: i, value: device + '-' + i });
+            }
+        }
+
+        return cols;
+    } else {
+
+        cols.push({ label: 'Default', value: null });
+
+        for (var i = 0; i <= areoi_vars.grid_columns; i++ ) {
+            cols.push({ label: i, value: device + '-' + i });
+        }
+
+        cols.push({ label: 'Auto', value: device + '-auto' });
+
+        return cols;
+    }
+}
+
+export const GetGridCols = ( field, key ) => {
+    if ( key == 'xs' ) {
+        key = null;
+    }
+    const device = field + ( key ? '-' + key : '' );
+
+    var cols = [];
+
+    cols.push({ label: 'Default', value: null });
+
+    for (var i = 1; i <= areoi_vars.grid_columns; i++ ) {
+        cols.push({ label: i, value: device + '-' + i });
+    }
+
+    return cols;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/ItemMediaUpload.js

@@ -0,0 +1,52 @@
+const ItemMediaUpload = ( areoi, attributes, onChangeItem, label, type, key, index, attribute_key ) => {
+    return (
+        <areoi.components.PanelRow className="areoi-panel-row">
+            
+            <label>{ label }</label>
+            
+            <areoi.editor.MediaUploadCheck>
+                <areoi.editor.MediaUpload
+                    label="Image"
+                    allowedTypes={ [type] }
+                    onSelect={ ( val ) => onChangeItem( index, key, val ) }
+                    value={ attributes[attribute_key][index][key] ? attributes[attribute_key][index][key].id : null }
+                    render={({ open}) => (
+                        <areoi.components.Button 
+                            className={ 'editor-post-featured-image__toggle areoi-components-button-img' }
+                            onClick={ open }
+                        >
+                            { !attributes[attribute_key][index][key] && areoi.__('Choose ' + label, 'awp') }
+
+                            { type == 'image' && attributes[attribute_key][index][key] != undefined && 
+                                <areoi.components.ResponsiveWrapper
+                                    naturalWidth={ attributes[attribute_key][index][key].width }
+                                    naturalHeight={ attributes[attribute_key][index][key].height }
+                                >
+                                    <img src={attributes[attribute_key][index][key].url} />
+                                </areoi.components.ResponsiveWrapper>
+                            }
+
+                            { type == 'video' && attributes[attribute_key][index][key] != undefined && 
+                                <video>
+                                    <source src={ attributes[attribute_key][index][key].url } />
+                                </video>
+                            }
+
+                        </areoi.components.Button>
+                    )}
+                />
+            </areoi.editor.MediaUploadCheck>
+
+            {attributes[attribute_key][index][key] && 
+                <areoi.editor.MediaUploadCheck>
+                    <areoi.components.Button onClick={ ( image ) => onChangeItem( index, key, null ) } isLink isDestructive>
+                        {areoi.__('Remove ' + label, 'awp')}
+                    </areoi.components.Button>
+                </areoi.editor.MediaUploadCheck>
+            }
+
+        </areoi.components.PanelRow>
+    );
+}
+
+export default ItemMediaUpload;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/Items.js

@@ -0,0 +1,505 @@
+import { __ } from '@wordpress/i18n';
+import icons from '../icon/icons.json';
+
+const Items = ( areoi, attributes, onChange, attribute_label, attribute_key, active_key ) => {
+
+    function Items() 
+    {
+        function addItem()
+        {
+            var items = [...attributes[attribute_key]];
+
+            var new_item = {
+                'id': items.length+1,
+                'heading': null,
+                'introduction': null,
+                'include_read_more': false,
+                'include_cta': false,
+                'cta': null,
+                'cta_size': null,
+                'url': null,
+                'opensInNewTab': null,
+                'heading_color': null,
+                'introduction_color': null,
+                'cta_color': null,
+                'background_color': null,
+                'video': null,
+                'image': null,
+                'include_icon': null,
+                'icon': null,
+                'icon_style': null,
+                'icon_size': null,
+                'icon_search': null
+            };
+            items.push( new_item );
+            
+            onChange( attribute_key, items );
+
+            onChange( active_key, (items.length-1).toString() )
+        }
+
+        function removeItem( index )
+        {
+            var items = [...attributes[attribute_key]];
+
+            items.splice( index, 1 );
+            
+            onChange( attribute_key, items );
+        }
+
+        function onChangeItem( index, key, value ) 
+        {
+            var items = [...attributes[attribute_key]];
+            items[index][key] = value;
+            onChange( attribute_key, items );
+        }
+
+        const IconControl = areoi.compose.compose(
+            wp.data.withSelect( function( select, props ) {
+                var search = props.attributes['icon_search'];
+                var icons = props.icons;
+                var i = props.i;
+                if ( search ) {
+                    icons = icons.filter(icon => icon.includes(search));
+                }
+                return {
+                    icons,
+                    i
+                }
+            } ) )( function( props ) {
+                
+                var attributes = props.attributes;
+                var icons = props.icons;
+                var i = props.i;
+
+                var icon_output = [];
+                icons.forEach((icon) => {
+
+                    var key = 'icon';
+
+                    var new_output = 
+                    <div 
+                        onClick={ () => onChangeItem( i, 'icon', icon ) }
+                        className={ 'areoi-icon-list-item' + ( attributes[key] == icon ? ' selected' : '' ) }
+                    >
+                        <i className={ icon }></i> 
+                        { icon }
+                    </div>
+                    icon_output.push( new_output );
+                });
+
+                return (
+                    <div class="areoi-icon-list">
+                        { icon_output }
+                    </div>
+                );
+            }
+
+        );
+
+        var output = [];
+
+        var newOutput = (
+            <div className="areoi-device-specific">
+                <p><strong>{ attribute_label }</strong></p>
+                <p>You can manage the content that will be displayed in each of your block { attribute_label }.</p>
+                
+                {
+                    attributes[active_key] === "" &&
+                    <areoi.components.Button variant="secondary" class="button" onClick={ () => addItem() }>Add Item</areoi.components.Button>
+                }                
+
+                {
+                    attributes[active_key] !== "" &&
+                    <areoi.components.Button variant="primary" class="button" onClick={ () => onChange( active_key, "" ) }>Save and Preview</areoi.components.Button>
+                }
+            </div>
+        );
+        output.push( newOutput );
+        
+        attributes[attribute_key].forEach( ( item, i ) => {
+
+            var title = 'Item (' + (attributes[attribute_key][i].heading ? attributes[attribute_key][i].heading.substr( 0, 15 ) + '...' : item.id) + ')';
+
+            let iconProps = {
+                className: areoi.helper.GetClassNameStr( [
+                    attributes[attribute_key][i].icon_style,
+                    attributes[attribute_key][i].icon,
+                ] ),
+                style: { 'font-size': attributes[attribute_key][i].icon_size + 'px' }
+            };
+
+            if ( attributes[active_key] !== "" ) {
+
+                if ( attributes[active_key] != i ) {
+                    return;
+                }
+
+                if ( !attributes[attribute_key][i].hasOwnProperty( 'include_icon' ) ) {
+                    onChangeItem( i, 'include_icon', false )
+                    onChangeItem( i, 'icon', null )
+                    onChangeItem( i, 'icon_style', null )
+                    onChangeItem( i, 'icon_size', null )
+                    onChangeItem( i, 'icon_search', null )
+                }
+
+                var newOutput = (
+                    <>
+                        <areoi.components.PanelBody title={ __( 'Content: ' + title ) } initialOpen={ true }>
+
+                            <areoi.components.BaseControl label={ __( 'Heading' ) }>
+                                <areoi.editor.RichText
+                                    tagName={ 'h3' }
+                                    inlineToolbar={ false }
+                                    value={ attributes[attribute_key][i].heading }
+                                    onChange={ ( value ) => onChangeItem( i, 'heading', value ) }
+                                    placeholder={ __( 'Enter heading...' ) }
+                                />
+                            </areoi.components.BaseControl>
+
+                            <areoi.components.BaseControl label={ __( 'Introduction' ) }>
+                                <areoi.editor.RichText
+                                    tagName={ 'div' }
+                                    multiline='p'
+                                    inlineToolbar={ false }
+                                    value={ attributes[attribute_key][i].introduction }
+                                    onChange={ ( value ) => onChangeItem( i, 'introduction', value ) }
+                                    placeholder={ __( 'Add a short paragraph...' ) }
+                                />
+                            </areoi.components.BaseControl> 
+
+                            <areoi.components.PanelRow>
+                                <areoi.components.ToggleControl 
+                                    label={ __( 'Include Read More' ) }
+                                    checked={ attributes[attribute_key][i].include_read_more }
+                                    onChange={ ( value ) => onChangeItem( i, 'include_read_more', value ) }
+                                />
+                            </areoi.components.PanelRow> 
+
+                            <areoi.components.PanelRow>
+                                <areoi.components.ToggleControl 
+                                    label={ __( 'Include Call to Action' ) }
+                                    checked={ attributes[attribute_key][i].include_cta }
+                                    onChange={ ( value ) => onChangeItem( i, 'include_cta', value ) }
+                                />
+                            </areoi.components.PanelRow>
+
+                            {
+                                attributes[attribute_key][i].include_cta &&
+                                <>
+                                    <areoi.components.BaseControl label={ __( 'Call to Action' ) }>
+                                        <areoi.editor.RichText
+                                                tagName={ 'p' }
+                                                inlineToolbar={ false }
+                                                value={ attributes[attribute_key][i].cta }
+                                                onChange={ ( value ) => onChangeItem( i, 'cta', value ) }
+                                                placeholder={ __( 'Add a CTA...' ) }
+                                            />
+                                    </areoi.components.BaseControl> 
+
+                                    <areoi.components.PanelRow>
+                                        <areoi.components.SelectControl
+                                            label="Call to Action Size"
+                                            labelPosition="top"
+                                            help={ __( 'Use the Bootstrap button utilities to change the size of the cta.' ) }
+                                            value={ attributes[attribute_key][i].cta_size }
+                                            options={ [
+                                                { label: 'Small', value: 'btn-sm' },
+                                                { label: 'Medium', value: 'btn-md' },
+                                                { label: 'Large', value: 'btn-lg' },
+                                            ] }
+                                            onChange={ ( value ) => onChangeItem( i, 'cta_size', value ) }
+                                        />
+                                    </areoi.components.PanelRow>
+
+                                    <div className="areoi-link-control">
+                                        <label class="components-truncate components-text components-input-control__label">Call to Action URL</label>
+                                        <areoi.editor.__experimentalLinkControl
+                                            searchInputPlaceholder="Search here..."
+                                            value={ {
+                                                url: attributes[attribute_key][i].url,
+                                                opensInNewTab: attributes[attribute_key][i].opensInNewTab
+                                            } }
+                                            onChange={ ( newUrl ) => {
+                                                onChangeItem( i, 'url', newUrl.url )
+                                                onChangeItem( i, 'opensInNewTab', newUrl.opensInNewTab )
+                                            } }
+                                            onRemove={ () => {
+                                                onChangeItem( i, 'url', '' )
+                                                onChangeItem( i, 'opensInNewTab', false )
+                                            } }
+                                        >
+                                        </areoi.editor.__experimentalLinkControl>
+                                    </div>
+                                </>
+                            }
+
+                        </areoi.components.PanelBody>
+
+                        <areoi.components.PanelBody title={ __( 'Colors: ' + title ) } initialOpen={ false }>
+
+                            {
+                                attributes[attribute_key][i].heading &&
+                                <areoi.components.PanelRow>
+                                    <areoi.components.SelectControl
+                                        label={ __( 'Heading Color' ) }
+                                        labelPosition="top"
+                                        help={ __( 'Use the Bootstrap text color utilities to change the heading color.' ) }
+                                        value={ attributes[attribute_key][i].heading_color }
+                                        options={ [
+                                            { label: 'Default', value: "" },
+                                            { 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 ) => onChangeItem( i, 'heading_color', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+                            }
+                            {
+                                attributes[attribute_key][i].introduction &&
+                                <areoi.components.PanelRow>
+                                    <areoi.components.SelectControl
+                                        label={ __( 'Introduction Color' ) }
+                                        labelPosition="top"
+                                        help={ __( 'Use the Bootstrap text color utilities to change the introduction color.' ) }
+                                        value={ attributes[attribute_key][i].introduction_color }
+                                        options={ [
+                                            { label: 'Default', value: "" },
+                                            { 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 ) => onChangeItem( i, 'introduction_color', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+                            }
+                            {
+                                attributes[attribute_key][i].cta &&
+                                <areoi.components.PanelRow>
+                                    <areoi.components.SelectControl
+                                        label={ __( 'Call to Action Color' ) }
+                                        labelPosition="top"
+                                        help={ __( 'Use the Bootstrap text color utilities to change the cta color.' ) }
+                                        value={ attributes[attribute_key][i].cta_color }
+                                        options={ [
+                                            { label: 'Default', value: "" },
+                                            { label: 'Primary', value: 'btn-primary' },
+                                            { label: 'Secondary', value: 'btn-secondary' },
+                                            { label: 'Success', value: 'btn-success' },
+                                            { label: 'Danger', value: 'btn-danger' },
+                                            { label: 'Warning', value: 'btn-warning' },
+                                            { label: 'Info', value: 'btn-info' },
+                                            { label: 'Light', value: 'btn-light' },
+                                            { label: 'Dark', value: 'btn-dark' },
+                                        ] }
+                                        onChange={ ( value ) => onChangeItem( i, 'cta_color', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+                            }
+
+                            <areoi.components.PanelRow>
+                                <areoi.components.SelectControl
+                                    label={ __( 'Background Color' ) }
+                                    labelPosition="top"
+                                    help={ __( 'Use the Bootstrap bg color utilities to change the background color.' ) }
+                                    value={ attributes[attribute_key][i].background_color }
+                                    options={ [
+                                        { label: 'Default', value: "" },
+                                        { label: 'Primary', value: 'bg-primary' },
+                                        { label: 'Secondary', value: 'bg-secondary' },
+                                        { label: 'Success', value: 'bg-success' },
+                                        { label: 'Danger', value: 'bg-danger' },
+                                        { label: 'Warning', value: 'bg-warning' },
+                                        { label: 'Info', value: 'bg-info' },
+                                        { label: 'Light', value: 'bg-light' },
+                                        { label: 'Dark', value: 'bg-dark' },
+                                    ] }
+                                    onChange={ ( value ) => onChangeItem( i, 'background_color', value ) }
+                                />
+                            </areoi.components.PanelRow>
+
+                        </areoi.components.PanelBody>
+
+                        <areoi.components.PanelBody title={ __( 'Media: ' + title ) } initialOpen={ false }>
+                                    
+                            { areoi.ItemMediaUpload( areoi, attributes, onChangeItem, 'Image', 'image', 'image', i, attribute_key ) }
+
+                            { areoi.ItemMediaUpload( areoi, attributes, onChangeItem, 'Video', 'video', 'video', i, attribute_key ) }
+                            
+                            <areoi.components.PanelRow>
+                                <areoi.components.ToggleControl 
+                                    label={ __( 'Include Icon' ) }
+                                    checked={ attributes[attribute_key][i].include_icon }
+                                    onChange={ ( value ) => onChangeItem( i, 'include_icon', value ) }
+                                />
+                            </areoi.components.PanelRow> 
+
+                            {
+                                attributes[attribute_key][i].include_icon &&
+                                <>
+                                    <areoi.components.PanelRow className="areoi-panel-row">
+                                        <areoi.components.SelectControl
+                                            label="Style"
+                                            labelPosition="top"
+                                            help="Choose the colour of your icon from the available theme colours."
+                                            value={ attributes[attribute_key][i].icon_style }
+                                            options={ [
+                                                { label: 'Default', value: 'text-primary' },
+                                                { 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 ) => onChangeItem( i, 'icon_style', value ) }
+                                        />
+                                    </areoi.components.PanelRow>
+
+                                    <areoi.components.PanelRow className="areoi-panel-row">
+                                        <areoi.components.SelectControl
+                                            label="Size"
+                                            labelPosition="top"
+                                            help="Choose the size to diaply your icon. Eaxtra small is 12px, Small is 24px, Medium is 36px, Large is 48px, Extra Large is 60px and Extra Extra Large is 80px."
+                                            value={ attributes[attribute_key][i].icon_size }
+                                            options={ [
+                                                { label: 'Extra Small', value: '12' },
+                                                { label: 'Small', value: '24' },
+                                                { label: 'Medium', value: '36' },
+                                                { label: 'Large', value: '48' },
+                                                { label: 'Extra Large', value: '60' },
+                                                { label: 'Extra Extra Large', value: '80' },
+                                            ] }
+                                            onChange={ ( value ) => onChangeItem( i, 'icon_size', value ) }
+                                        />
+                                    </areoi.components.PanelRow>
+
+                                    <div class="components-panel__row">
+                                        <div className="components-base-control">
+                                            <label>Icon</label>
+                                            
+                                            <areoi.components.TextControl className="areoi-icon-base-control"
+                                                placeholder="Search Icons"
+                                                labelPosition="top"
+                                                help=""
+                                                value={ attributes[attribute_key][i].icon_search }
+                                                onChange={ ( value ) => onChangeItem( i, 'icon_search', value ) }
+                                            />
+
+                                            {
+                                                attributes[attribute_key][i].icon && 
+                                                <div className={ 'areoi-icon-list-item selected highlighted' }>
+                                                    <i className={ attributes[attribute_key][i].icon }></i>
+                                                    { attributes[attribute_key][i].icon }
+                                                </div>
+                                            }
+                                        </div>
+                                    </div>
+                                    <IconControl attributes={attributes[attribute_key][i]} icons={icons} i={i} />
+                                </>
+                            }   
+
+                        </areoi.components.PanelBody>
+
+                    </>
+                );
+                output.push( newOutput );
+
+            } else {
+                var newOutput = (
+                    <div class="item areoi-gallery-item">
+                        <div class="areoi-galery-item-label">
+                            <p>{ title }</p>
+                            
+                            <a href="#" onClick={ () => {
+                                
+                                onChange( active_key, i.toString() )
+
+                            } }>Edit Item</a>
+
+                            <a href="#" className="areoi-remove-link" onClick={ () => {
+
+                                var items = [...attributes[attribute_key]];
+                                items.splice( i, 1 );
+                                
+                                onChange( attribute_key, items )
+
+                            } }>Remove Item</a>
+                        </div>
+                        <div class="areoi-galery-item-arrows">
+                            <button onClick={ () => {
+
+                                var items = [...attributes[attribute_key]];
+                                var to = i;
+                                var from = i-1;
+
+                                if ( from < 0 ) {
+                                    from = 0;
+                                }
+                                
+                                items.splice(to, 0, items.splice(from, 1)[0]);
+                                
+                                onChange( attribute_key, items )
+
+                            } }>
+                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="components-panel__arrow" aria-hidden="true" focusable="false"><path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path></svg>
+                            </button>
+
+                            <button onClick={ () => {
+
+                                var items = [...attributes[attribute_key]];
+                                var to = i;
+                                var from = i+1;
+
+                                if ( from < 0 ) {
+                                    from = 0;
+                                }
+                                
+                                items.splice(to, 0, items.splice(from, 1)[0]);
+                                
+                                onChange( attribute_key, items )
+
+                            } }>
+                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="components-panel__arrow" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg>
+                            </button>
+                        </div>
+                    </div>
+                );
+
+                output.push( newOutput );
+            }
+        } );
+
+        var newOutput = (
+            <div className="areoi-device-specific">
+                <strong>End { attribute_label }</strong>
+            </div>
+        );
+        output.push( newOutput );
+
+        return output;
+    }
+
+    return (
+        <div className="areoi-gallery-container">
+        <div className="areoi-gallery areoi-gallery-items">
+                { Items() }
+            </div>
+        </div>
+    );
+}
+
+export default Items;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/MediaGallery.js

@@ -0,0 +1,128 @@
+const MediaGallery = ( areoi, attributes, onChange, label, types, key ) => {
+
+    function MediaGallery() {
+        var output = [];
+
+        if ( attributes[key].length ) {
+            attributes[key].forEach( ( item, index ) => {
+                var newOutput = (
+                    <div class="item areoi-gallery-item">
+                        <div class="areoi-gallery-item-media">
+                            {
+                                item.type == 'image' &&
+                                <img src={ item.url } />
+                            }
+                            {
+                                item.type == 'video' &&
+                                <video src={ item.url }></video>
+                            }
+                        </div>
+                        <div class="areoi-galery-item-label">
+                            <p>{ item.filename ? item.filename.substring( 0, 15 ) + '...' : '' }</p>
+                            <a href="#" className="areoi-remove-link" onClick={ () => {
+
+                                var images = [...attributes[key]];
+                                images.splice( index, 1 );
+                                
+                                onChange( key, images )
+
+                            } }>Remove Media</a>
+                        </div>
+                        <div class="areoi-galery-item-arrows">
+                            <button onClick={ () => {
+
+                                var images = [...attributes[key]];
+                                var to = index;
+                                var from = index-1;
+
+                                if ( from < 0 ) {
+                                    from = 0;
+                                }
+                                
+                                images.splice(to, 0, images.splice(from, 1)[0]);
+
+                                var newImages = [];
+                                for (var i in images) {
+                                    if ( typeof images[i] != 'undefined' ) {
+                                        newImages.push(images[i]);
+                                    }
+                                }
+                                
+                                onChange( key, newImages )
+
+                            } }>
+                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="components-panel__arrow" aria-hidden="true" focusable="false"><path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path></svg>
+                            </button>
+
+                            <button onClick={ () => {
+
+                                var images = [...attributes[key]];
+                                var to = index;
+                                var from = index+1;
+
+                                if ( from < 0 ) {
+                                    from = 0;
+                                }
+                                
+                                images.splice(to, 0, images.splice(from, 1)[0]);
+
+                                var newImages = [];
+                                for (var i in images) {
+                                    if ( typeof images[i] != 'undefined' ) {
+                                        newImages.push(images[i]);
+                                    }
+                                }
+                                
+                                onChange( key, newImages )
+
+                            } }>
+                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="components-panel__arrow" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg>
+                            </button>
+                        </div>
+                    </div>
+                );
+
+                output.push( newOutput );
+            } )
+        }
+
+        return output;
+    }
+
+    return (
+        <areoi.components.PanelRow>
+            
+            <areoi.editor.MediaUploadCheck>
+                <areoi.editor.MediaUpload
+                    label={ label }
+                    multiple={ true }
+                    onSelect={ ( items ) => {
+                        onChange( key, attributes[key].concat( items ) )
+                    } }
+                    value={ '' }
+                    allowedTypes={ types }
+                    render={({ open }) => (
+                        <div className="areoi-gallery-container">
+
+                            <areoi.components.Button 
+                                className={ 'editor-post-featured-image__toggle areoi-components-button-img' }
+                                onClick={ open }
+                            >
+                                { areoi.__('Add Media to  ' + label ) }
+
+                            </areoi.components.Button>
+
+                            <div className="areoi-gallery">
+                                { MediaGallery() }
+                            </div>
+
+                        </div>
+                    )}
+                />
+            </areoi.editor.MediaUploadCheck>
+
+        </areoi.components.PanelRow>
+    );
+}
+
+export default MediaGallery;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/MediaUpload.js

@@ -0,0 +1,52 @@
+const MediaUpload = ( areoi, attributes, onChange, label, type, key ) => {
+    return (
+        <areoi.components.PanelRow className="areoi-panel-row">
+            
+            <label>{ label }</label>
+            
+            <areoi.editor.MediaUploadCheck>
+                <areoi.editor.MediaUpload
+                    label="Image"
+                    allowedTypes={ [type] }
+                    onSelect={ ( val ) => onChange( key, val ) }
+                    value={ attributes[key] != undefined && attributes[key] ? attributes[key].id : null }
+                    render={({ open}) => (
+                        <areoi.components.Button 
+                            className={ 'editor-post-featured-image__toggle areoi-components-button-img' }
+                            onClick={ open }
+                        >
+                            { (!attributes[key] || !attributes[key].id) && areoi.__('Choose ' + label, 'awp') }
+
+                            { type == 'image' && attributes[key] != undefined && attributes[key].id && 
+                                <areoi.components.ResponsiveWrapper
+                                    naturalWidth={ attributes[key].width }
+                                    naturalHeight={ attributes[key].height }
+                                >
+                                    <img src={attributes[key].url} />
+                                </areoi.components.ResponsiveWrapper>
+                            }
+
+                            { type == 'video' && attributes[key] != undefined && attributes[key].id && 
+                                <video>
+                                    <source src={ attributes[key].url } />
+                                </video>
+                            }
+
+                        </areoi.components.Button>
+                    )}
+                />
+            </areoi.editor.MediaUploadCheck>
+
+            { attributes[key] != undefined && attributes[key] && attributes[key].id && 
+                <areoi.editor.MediaUploadCheck>
+                    <areoi.components.Button onClick={ ( image ) => onChange( key, {} ) } isLink isDestructive>
+                        {areoi.__('Remove ' + label, 'awp')}
+                    </areoi.components.Button>
+                </areoi.editor.MediaUploadCheck>
+            }
+
+        </areoi.components.PanelRow>
+    );
+}
+
+export default MediaUpload;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/ResponsiveTabPanel.js

@@ -0,0 +1,147 @@
+import * as areoi from '../_components/Core.js';
+import { 
+    TabPanel, 
+} from '@wordpress/components';
+
+function reset(meta, props, is_device)
+{
+    const {
+        attributes,
+        setAttributes
+    } = props;
+
+    var meta_attrs = meta.attributes;
+    var terms = ['xs','sm','md','lg','xl','xxl'];
+
+    for (const [key, value] of Object.entries(attributes)) {
+        var meta_current = meta_attrs[key];
+        var is_reset = false;
+
+        if ( ( is_device == 1 || is_device == 2 ) && !terms.some(term => key.includes( term ) ) ) is_reset = true;
+        if ( ( is_device == 1 || is_device == 3 ) && terms.some(term => key.includes( term ) ) ) is_reset = true;
+
+        if ( is_reset && meta_current && meta_current.default != value ) {
+            setAttributes( { [key]: meta_current.default } );
+        }
+    }
+}
+
+function get_class_name(meta, props, size)
+{
+    const {
+        attributes,
+        setAttributes
+    } = props;
+
+    var meta_attrs = meta.attributes;
+
+    var is_highlight = false;
+
+    var class_name = 'tab-' + size;
+
+    for (const [key, value] of Object.entries(attributes)) {
+        var meta_current = meta_attrs[key];
+        if ( key.includes( size ) ) {
+            if ( meta_current && meta_current.default != value ) {
+                is_highlight = true;
+            }
+        }
+    }
+    if ( is_highlight ) {
+        class_name += ' areoi-tab-highlight';
+    }
+
+    return class_name;
+}
+
+const ResetPanel = ( meta, props ) => {
+    return (
+        <div>
+            <div className="areoi-device-specific">
+                <p><strong>Reset Settings</strong></p>
+                <p>Use the buttons below to quickly reset multiple settings at once. 'All' will reset all of the Bootstrap Settings, 'Global' will reset settings outside of Device Specific and 'Devices' will reset all settings under Device Specific.</p>
+                <button onClick={() => reset(meta, props, 1)} className="button">All</button>&nbsp;
+                <button onClick={() => reset(meta, props, 2)} className="button">Global</button>&nbsp;
+                <button onClick={() => reset(meta, props, 3)} className="button">Devices</button>
+            </div>
+        </div>
+    );
+}
+
+const ResponsiveTabPanel = ( tabDevice, meta, props ) => {
+
+    const {
+        attributes,
+        setAttributes,
+    } = props;
+
+    function onChange( key, value ) {
+        setAttributes( { [key]: value } );
+    }
+
+    return (
+
+        <div>
+            <areoi.components.PanelBody title={ 'Block ID' } initialOpen={ false }>
+                <areoi.components.TextControl
+                    label="Block ID"
+                    value={ attributes['block_id'] }
+                    onChange={ ( value ) => onChange( 'block_id', value ) }
+                />
+            </areoi.components.PanelBody>
+            <div className="areoi-device-specific">
+                <p><strong>Start Device Specific Settings</strong></p>
+                <p>Device specific settings allow you to control elements across every device. When you change a setting within a device the tab will be highlighted green.</p>
+            </div>
+            <TabPanel
+                className="responsive-tab-panel"
+                activeClass="active-tab"
+                tabs={ [
+                    {
+                        name: 'xs',
+                        title: 'XS',
+                        className: get_class_name(meta, props, 'xs'),
+                    },
+                    {
+                        name: 'sm',
+                        title: 'SM',
+                        className: get_class_name(meta, props, 'sm'),
+                    },
+                    {
+                        name: 'md',
+                        title: 'MD',
+                        className: get_class_name(meta, props, 'md'),
+                    },
+                    {
+                        name: 'lg',
+                        title: 'LG',
+                        className: get_class_name(meta, props, 'lg'),
+                    },
+                    {
+                        name: 'xl',
+                        title: 'XL',
+                        className: get_class_name(meta, props, 'xl'),
+                    },
+                    {
+                        name: 'xxl',
+                        title: 'XXL',
+                        className: get_class_name(meta, props, 'xxl'),
+                    },
+                ] }
+            >
+            
+                { ( tab ) => {
+                    return tabDevice( tab );
+                }}
+            </TabPanel>
+            <div className="areoi-device-specific">
+                <strong>End Device Specific Settings</strong>
+            </div>
+
+            { ResetPanel( meta, props ) }
+
+        </div>
+    );
+}
+
+export default ResponsiveTabPanel;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/URLPicker.js

@@ -0,0 +1,121 @@
+function URLPicker( {
+    areoi,
+    isSelected,
+    url,
+    urlTitle,
+    setAttributes,
+    opensInNewTab,
+    onToggleOpenInNewTab,
+    anchorRef,
+    richTextRef,
+} ) {
+    const [ isEditingURL, setIsEditingURL ] = areoi.element.useState( false );
+    const isURLSet = !! url;
+
+    const startEditing = ( event ) => {
+        event.preventDefault();
+        setIsEditingURL( true );
+    };
+
+    const unlink = () => {
+        setAttributes( {
+            url: undefined,
+            linkTarget: undefined,
+            rel: undefined,
+        } );
+        setIsEditingURL( false );
+    };
+
+    areoi.element.useEffect( () => {
+        if ( ! isSelected ) {
+            setIsEditingURL( false );
+        }
+    }, [ isSelected ] );
+
+    const isLinkControlVisible = isSelected && ( isEditingURL || isURLSet );
+    
+    const linkControl = isLinkControlVisible && (
+        <areoi.components.Popover
+            position="bottom center"
+            onClose={ () => {
+                setIsEditingURL( false );
+                richTextRef.current?.focus();
+            } }
+            anchorRef={ anchorRef?.current }
+            focusOnMount={ isEditingURL ? 'firstElement' : false }
+        >
+            <areoi.editor.__experimentalLinkControl
+                className="wp-block-navigation-link__inline-link-input"
+                value={ { url, opensInNewTab, urlTitle } }
+                onChange={ ( {
+                    url: newURL = '',
+                    opensInNewTab: newOpensInNewTab,
+                    urlTitle: newTitle = ''
+                } ) => {
+                    setAttributes( { url: newURL, url_title: newTitle } );
+
+                    if ( opensInNewTab !== newOpensInNewTab ) {
+                        onToggleOpenInNewTab( newOpensInNewTab );
+                    }
+                } }
+                onRemove={ () => {
+                    unlink();
+                    richTextRef.current?.focus();
+                } }
+                forceIsEditingLink={ isEditingURL }
+            />
+            <div style={{
+                padding: '0 16px 16px 16px'
+            }}>
+                <areoi.components.TextControl
+                    label="Title"
+                    value={ urlTitle }
+                    onChange={ ( value ) => {
+                        setAttributes( { 'url_title': value } )
+                    } }
+                />
+            </div>
+        </areoi.components.Popover>
+    );
+
+    return (
+        <>
+            <areoi.editor.BlockControls group="block">
+                { ! isURLSet && (
+                    <areoi.components.ToolbarButton
+                        name="link"
+                        icon={ areoi.icon.link }
+                        title={ areoi.__( 'Link' ) }
+                        shortcut={ areoi.keycodes.displayShortcut.primary( 'k' ) }
+                        onClick={ startEditing }
+                    />
+                ) }
+                { isURLSet && (
+                    <areoi.components.ToolbarButton
+                        name="link"
+                        icon={ areoi.icon.linkOff }
+                        title={ areoi.__( 'Unlink' ) }
+                        shortcut={ areoi.keycodes.displayShortcut.primaryShift( 'k' ) }
+                        onClick={ unlink }
+                        isActive={ true }
+                    />
+                ) }
+            </areoi.editor.BlockControls>
+            { isSelected && (
+                <areoi.components.KeyboardShortcuts
+                    bindGlobal
+                    shortcuts={ {
+                        [ areoi.keycodes.rawShortcut.primary( 'k' ) ]: startEditing,
+                        [ areoi.keycodes.rawShortcut.primaryShift( 'k' ) ]: () => {
+                            unlink();
+                            richTextRef.current?.focus();
+                        },
+                    } }
+                />
+            ) }
+            { linkControl }
+        </>
+    );
+}
+
+export default URLPicker;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_components/Utilities.js

@@ -0,0 +1,43 @@
+const Utilities = ( areoi, attributes, onChange ) => {
+    
+    return (
+        <areoi.components.PanelBody title={ 'Utilities' } initialOpen={ false }>
+            <p>Utility clases will be added as base styles, but if you change settings such as background color further down the utility classes will be overriden.</p>
+            <areoi.components.PanelRow className="areoi-panel-row">
+                <areoi.components.SelectControl
+                    label="Background"
+                    labelPosition="top"
+                    help="Use the Bootstrap background utilities to change the background of a card."
+                    value={ attributes.utilities_bg }
+                    options={ JSON.parse( areoi_vars.utility_bg ) }
+                    onChange={ ( value ) => onChange( 'utilities_bg', value ) }
+                />
+
+            </areoi.components.PanelRow>
+
+            <areoi.components.PanelRow className="areoi-panel-row">
+                <areoi.components.SelectControl
+                    label="Text Color"
+                    labelPosition="top"
+                    help="Use the Bootstrap text color utilities to change the text color of a card."
+                    value={ attributes.utilities_text }
+                    options={ JSON.parse( areoi_vars.utility_text ) }
+                    onChange={ ( value ) => onChange( 'utilities_text', value ) }
+                />
+            </areoi.components.PanelRow>
+
+            <areoi.components.PanelRow>
+                <areoi.components.SelectControl
+                    label="Border Color"
+                    labelPosition="top"
+                    help="Use border utilities to change just the border-color of a card."
+                    value={ attributes.utilities_border }
+                    options={ JSON.parse( areoi_vars.utility_border ) }
+                    onChange={ ( value ) => onChange( 'utilities_border', value ) }
+                />
+            </areoi.components.PanelRow>
+        </areoi.components.PanelBody>
+    );
+}
+
+export default Utilities;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_partials/background.php

@@ -0,0 +1,64 @@
+<?php 
+$background_row_class 	= areoi_get_class_name_str( array(
+	( !empty( $attributes['background_horizontal_align'] ) ? $attributes['background_horizontal_align'] : '' )
+));
+
+$background_col_class 	= 	areoi_get_class_name_str( array(
+	( !empty( $attributes['background_col_xs'] ) ? $attributes['background_col_xs'] : '' ),
+	( !empty( $attributes['background_col_sm'] ) ? $attributes['background_col_sm'] : '' ),
+	( !empty( $attributes['background_col_md'] ) ? $attributes['background_col_md'] : '' ),
+	( !empty( $attributes['background_col_lg'] ) ? $attributes['background_col_lg'] : '' ),
+	( !empty( $attributes['background_col_xl'] ) ? $attributes['background_col_xl'] : '' ),
+	( !empty( $attributes['background_col_xxl'] ) ? $attributes['background_col_xxl'] : '' )
+));
+
+$background_utility = !empty( $attributes['background_utility'] ) ? esc_attr( $attributes['background_utility'] ) : '';
+
+$background = '';
+
+$background_pattern = '';
+if ( areoi_is_lightspeed() ) {
+	$background_pattern = include( AREOI__PLUGIN_DIR . 'blocks/_partials/patterns.php' );
+}
+
+if ( !empty( $attributes['background_display'] ) ) {
+	$background = '
+		<div class="areoi-background ' . $background_utility . ' ' . areoi_get_background_display_class_str( $attributes, 'block' )  . '">
+			<div class="container-fluid" style="padding: 0;">
+				<div class="row ' . $background_row_class . '">
+					<div class="col ' . $background_col_class . '">
+			            ' . ( !empty( $attributes['background_color'] ) && !$background_utility ? 
+	                        '<div class="' . areoi_get_class_name_str( array( 
+		                            'areoi-background__color'
+		                        ) ) . '" 
+	                        	style="background: ' . esc_attr( areoi_get_rgba_str( $attributes['background_color']['rgb'] ) ) . '">
+	                        </div>'  : ''
+	                    ) . '
+
+	                    ' . ( !empty( $attributes['background_image'] ) ? 
+	                        '
+	                        	<div class="areoi-background__image" style="background-image:url(' . esc_url( $attributes['background_image']['url'] ) . ')"></div>
+	                        '  : ''
+	                    ) . '
+
+	                    ' . ( !empty( $attributes['background_video'] ) ? 
+	                        '<video autoplay loop playsinline muted>
+	                            <source src="' . esc_url( $attributes['background_video']['url'] ) . '" />
+	                        </video>'  : ''
+	                    ) . '
+
+	                    ' . ( !empty( $attributes['background_display_overlay'] ) && !empty( $attributes['background_overlay'] ) ? 
+	                        '<div class="' . areoi_get_class_name_str( array( 
+		                            'areoi-background__overlay'
+		                        ) ) . '" 
+	                        	style="background: ' . esc_attr( areoi_get_rgba_str( $attributes['background_overlay']['rgb'] ) ) . '">
+	                        </div>'  : ''
+	                    ) . '
+	    			</div>
+	    		</div>
+	    	</div>
+	    </div>
+	';
+}
+
+return $background . $background_pattern;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/_partials/patterns.php

@@ -0,0 +1,26 @@
+<?php 
+$has_pattern 			= areoi2_get_option( 'areoi-lightspeed-styles-strip-pattern', false );
+if ( lightspeed_get_attribute( 'pattern', null ) ) $has_pattern = lightspeed_get_attribute( 'pattern', null );
+
+$background_pattern 	= '';
+
+if ( $has_pattern && !empty( $allow_pattern ) && empty( $attributes['exclude_pattern'] ) ) {
+
+	$background_color = !empty( $attributes['background_utility'] ) ? $attributes['background_utility'] : 'bg-body';
+	if ( empty( $attributes['background_utility'] ) && !empty( $attributes['background_color']['rgb'] ) ) $background_color = $attributes['background_color']['rgb'];
+	$contrast = lightspeed_get_contrast_color( $background_color );
+	
+	$pattern_color = 'rgba( 0, 0, 0, 0.1 )';
+	if ( $contrast == '#FFFFFF' ) {
+		$pattern_color = 'rgba( 255, 255, 255, 0.2 )';
+	}
+
+	if ( !empty( $attributes['change_pattern_color'] ) && !empty( $attributes['pattern_color']['hex'] ) ) $pattern_color = $attributes['pattern_color']['hex'];
+	
+	$background_pattern_template 	= lightspeed_get_patterns_directory( $has_pattern );
+	if ( $background_pattern_template && file_exists( $background_pattern_template ) ) {
+		ob_start(); include( $background_pattern_template ); $background_pattern .= ob_get_clean();
+	}
+}
+
+return $background_pattern;

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/accordion-item.php

@@ -0,0 +1,67 @@
+<?php
+function areoi_render_block_accordion_item( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'accordion-item',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' )
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'block' ) 
+	);
+
+	$button_class = areoi_get_class_name_str( array( 
+		'accordion-button',
+		( !empty( $attributes['open'] ) ? '' : 'collapsed' ),
+	) );
+
+	$body_class = areoi_get_class_name_str( array( 
+		'accordion-collapse',
+		'collapse',
+		( !empty( $attributes['open'] ) ? 'show' : '' ),
+	) );
+	$always_open = '';
+	if ( empty( $attributes['always_open'] ) ) {
+		$always_open = 'data-bs-parent=".block-' . esc_attr( $attributes['parent_id'] ) . '"';
+	}
+
+	$heading = esc_attr( $attributes['heading'] );
+
+	if ( !in_array( $heading, ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'] )) {
+		$heading = 'h3';
+	}
+
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">
+
+			<' . $heading . ' 
+				class="accordion-header" 
+				id="block-' . esc_attr( $attributes['block_id'] ) . '-header"
+			>
+				<button 
+					class="' . $button_class . '" 
+					type="button" 
+					data-bs-toggle="collapse" 
+					data-bs-target="#block-' . esc_attr( $attributes['block_id'] ) . '-collapse" 
+					aria-expanded="' . ( empty( $attributes['open'] ) ? 'false' : 'true' ) . '" 
+					aria-controls="block-' . esc_attr( $attributes['block_id'] ) . '-collapse"
+				>
+					' . wp_kses_post( $attributes['title'] ) . '
+				</button>
+			</' . $heading . '>
+
+			<div 
+				id="block-' . esc_attr( $attributes['block_id'] ) . '-collapse" 
+				class="' . $body_class . '" 
+				aria-labelledby="block-' . esc_attr( $attributes['block_id'] ) . '-header"
+				' . $always_open . '
+			>
+				<div class="accordion-body">
+					' . $content . ' 
+				</div>
+			</div>
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/accordion-item/block.js

@@ -0,0 +1,136 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = null;
+const BLOCKS_TEMPLATE = null;
+
+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="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,5v3H5V5H19z M19,10v4H5v-4H19z M5,19v-3h14v3H5z"/></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 } );
+        }
+
+        const parentBlocks      = wp.data.select( 'core/block-editor' ).getBlockParents(props.clientId); 
+        const parentAttributes  = wp.data.select('core/block-editor').getBlocksByClientId(parentBlocks);
+        
+        var parent_id = false;
+        parentAttributes.forEach(element => {
+            if ( element.name == 'areoi/accordion' ) {
+                parent_id = element.attributes.block_id;
+            }
+        });
+        if ( parent_id ) {
+            setAttributes( { parent_id: parent_id } );
+        }
+
+        const classes = [
+            'accordion-item'
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'accordion-item' ) }
+
+                { !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 className="areoi-panel-row">
+                                    <areoi.components.ToggleControl 
+                                        label={ 'Open' }
+                                        help="The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion."
+                                        checked={ attributes['open'] }
+                                        onChange={ ( value ) => onChange( 'open', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                                <areoi.components.PanelRow className="areoi-panel-row">
+                                    <areoi.components.ToggleControl 
+                                        label={ 'Always Open' }
+                                        help="Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened."
+                                        checked={ attributes['always_open'] }
+                                        onChange={ ( value ) => onChange( 'always_open', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                                <areoi.components.PanelRow>
+                                    <areoi.components.SelectControl
+                                        label="Heading"
+                                        labelPosition="top"
+                                        help="Specify the element type to apply to the accordion header."
+                                        value={ attributes.heading }
+                                        options={ [
+                                            { label: 'Default', value: 'h1' },
+                                            { label: 'H1', value: 'h1' },
+                                            { label: 'H2', value: 'h2' },
+                                            { label: 'H3', value: 'h3' },
+                                            { label: 'H4', value: 'h4' },
+                                            { label: 'H5', value: 'h5' },
+                                            { label: 'H6', value: 'h6' },
+                                            { label: 'p', value: 'p' },
+                                        ] }
+                                        onChange={ ( value ) => onChange( 'heading', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <div className="accordion-header">
+                            <areoi.editor.RichText
+                                tagName={ attributes.heading }
+                                className="accordion-button"
+                                value={ attributes.title }
+                                allowedFormats={ [ 'core/bold', 'core/italic' ] }
+                                onChange={ ( value ) => onChange( 'title', value ) }
+                                placeholder={ areoi.__( 'Heading...' ) }
+                                style={ { display: 'block' } }
+                            />
+                        </div>
+                        <div className="accordion-collapse collapse show">
+                            <div className="accordion-body">
+                                <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                            </div>
+                        </div>
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/accordion-item/block.json

@@ -0,0 +1,82 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/accordion-item",
+	"title": "Accordion Item",
+	"parent": [ "areoi/accordion" ],
+	"category": "areoi-components",
+	"description": "Add individual accordion items within an accordion.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+		"parent_id": {
+			"type": "string",
+			"default": null
+		},
+		"heading": {
+			"type": "string",
+			"default": "h3"
+		},
+		"title": {
+			"type": "string",
+			"default": true
+		},
+		"open": {
+			"type": "boolean",
+			"default": false
+		},
+		"always_open": {
+			"type": "boolean",
+			"default": false
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/accordion-item/index.css

@@ -0,0 +1,3 @@
+.accordion-header * {
+    margin: 0 !important;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/accordion.php

@@ -0,0 +1,21 @@
+<?php
+function areoi_render_block_accordion( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'accordion',
+			( !empty( $attributes['flush'] ) ? $attributes['flush'] : '' ),
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' )
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'block' ) 
+	);
+
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">
+			' . $content . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/accordion/block.js

@@ -0,0 +1,87 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = [ 'areoi/accordion-item' ];
+const BLOCKS_TEMPLATE = [
+    [ 'areoi/accordion-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="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,5v3H5V5H19z M19,10v4H5v-4H19z M5,19v-3h14v3H5z"/></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 } );
+        }
+
+        const classes = [
+            'accordion',
+            attributes.flush
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'accordion' ) }
+
+                { !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="Flush"
+                                        labelPosition="top"
+                                        help="Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container."
+                                        value={ attributes.flush }
+                                        options={ [
+                                            { label: 'Default', value: null },
+                                            { label: 'Flush', value: 'accordion-flush' },
+                                        ] }
+                                        onChange={ ( value ) => onChange( 'flush', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/accordion/block.json

@@ -0,0 +1,66 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/accordion",
+	"title": "Accordion",
+	"parent": null,
+	"category": "areoi-components",
+	"description": "Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "component" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+		"flush": {
+			"type": "string",
+			"default": null
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/accordion/index.css

@@ -0,0 +1,4 @@
+.wp-block-areoi-accordion {
+    min-height: 40px;
+    border:  1px dashed #ccc;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/alert.php

@@ -0,0 +1,31 @@
+<?php
+function areoi_render_block_alert( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'alert',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+			( !empty( $attributes['style'] ) ? $attributes['style'] : 'alert-primary' ),
+			( !empty( $attributes['close'] ) ? 'alert-dismissible fade show' : '' ),
+			( !empty( $attributes['icon'] ) ? 'd-flex align-items-center' : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'flex' ) 
+	);
+
+	$width = ( !empty( $attributes['icon']['width'] ) ? esc_attr( $attributes['icon']['width'] ) : 50 );
+	$height = ( !empty( $attributes['icon']['height'] ) ? esc_attr( $attributes['icon']['height'] ) : 50 );
+	$alt = ( !empty( $attributes['icon']['alt'] ) ? esc_attr( $attributes['icon']['alt'] ) : '' );
+
+	$close = !empty( $attributes['close'] ) ? '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' : '';
+	$icon = !empty( $attributes['icon'] ) ? '<img class="icon bi flex-shrink-0 me-2" src="' . esc_url( $attributes['icon']['url'] ) . '" width="' . $width . '" height="' . $height . '" alt="' . $alt . '">' : '';
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '" role="alert">
+			' . $icon . '
+			<div>' . $content . '</div>
+			' . $close . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/alert/block.js

@@ -0,0 +1,125 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = null;
+const BLOCKS_TEMPLATE = null;
+
+const blockIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/></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 } );
+        }
+
+        const classes = [
+            'alert',
+            attributes.style,
+            attributes.close ? 'alert-dismissible fade show' : '',
+            attributes.icon ? 'd-flex align-items-center' : ''
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'alert' ) }
+
+                { !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 className="areoi-panel-row">
+                                    <areoi.components.SelectControl
+                                        label="Style"
+                                        labelPosition="top"
+                                        help="Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success)."
+                                        value={ attributes.style }
+                                        options={ [
+                                            { label: 'Default', value: 'alert-primary' },
+                                            { label: 'Primary', value: 'alert-primary' },
+                                            { label: 'Secondary', value: 'alert-secondary' },
+                                            { label: 'Success', value: 'alert-success' },
+                                            { label: 'Danger', value: 'alert-danger' },
+                                            { label: 'Warning', value: 'alert-warning' },
+                                            { label: 'Info', value: 'alert-info' },
+                                            { label: 'Light', value: 'alert-light' },
+                                            { label: 'Dark', value: 'alert-dark' },
+                                        ] }
+                                        onChange={ ( value ) => onChange( 'style', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                                { areoi.MediaUpload( areoi, attributes, onChange, 'Icon', 'image', 'icon' ) }
+
+                                <areoi.components.PanelRow>
+                                    <areoi.components.ToggleControl 
+                                        label={ 'Display Close Button' }
+                                        help="Add a close button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button."
+                                        checked={ attributes.close }
+                                        onChange={ ( value ) => onChange( 'close', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+                                
+
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        {   attributes.icon &&
+                            <img 
+                                class="icon bi flex-shrink-0 me-2" 
+                                src={ attributes.icon.url }
+                                width={ attributes.icon.width }
+                                height={ attributes.icon.height }
+                                alt={ attributes.icon.alt }
+                            />
+                        }
+
+                        {   attributes.close &&
+                            <button 
+                                type="button" 
+                                class="btn-close" 
+                                data-bs-dismiss="alert" 
+                                aria-label="Close">
+                            </button>
+                        }
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/alert/block.json

@@ -0,0 +1,74 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/alert",
+	"title": "Alert",
+	"parent": null,
+	"category": "areoi-components",
+	"description": "Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+		"style": {
+			"type": "string",
+			"default": "alert-primary"
+		},
+		"close": {
+			"type": "boolean",
+			"default": false
+		},
+		"icon": {
+			"type": "object",
+			"default": false
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/alert/index.css

@@ -0,0 +1,8 @@
+.alert .icon {
+    width: 24px;
+    height: auto;
+    display: block;
+}
+.alert :last-child {
+    margin-bottom: 0 !important;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner-item.php

@@ -0,0 +1,99 @@
+<?php
+function areoi_render_block_banner_item( $attributes, $content ) 
+{	
+	$allow_pattern = true;
+	
+	$parent 	= areoi_get_parent_block( $attributes['parent_id'] );
+	$layout 	= !empty( $parent['attrs']['layout'] ) ? esc_attr( $parent['attrs']['layout'] ) : 'grid';
+	$container 	= $layout == 'grid' ? 'container-fluid' : 'container';
+	$size 		= !empty( $parent['attrs']['size'] ) ? esc_attr( $parent['attrs']['size'] ) : 'areoi-large';
+
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'areoi-banner-item',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' )
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'block' ) 
+	);
+
+	$background 	= include( AREOI__PLUGIN_DIR . '/blocks/_partials/background.php' );
+
+	$url = null;
+	if ( !empty( $attributes['url'] ) ) {
+		$url = '
+			<a class="areoi-full-link"
+		';
+		if ( !empty( $attributes['url'] ) ) {
+			$url .= ' href="' . esc_url( $attributes['url'] ) . '"';
+		}
+		if ( !empty( $attributes['url_title'] ) ) {
+			$url .= ' title="' . esc_attr( $attributes['url_title'] ) . '"';
+		}
+		if ( !empty( $attributes['rel'] ) ) {
+			$url .= ' rel="' . esc_attr( $attributes['rel'] ) . '"';
+		}
+		if ( !empty( $attributes['linkTarget'] ) ) {
+			$url .= ' target="' . esc_attr( $attributes['linkTarget'] ) . '"';
+		}
+		$url .= '></a>';
+	}
+
+	$media = '';
+
+	if ( !empty( $attributes['image'] ) || !empty( $attributes['video'] ) ) {
+		$media .= '<div class="col-12 col-lg-6">';
+
+			if ( !empty( $attributes['image'] ) ) {
+				$media .= '<img src="' . esc_url( $attributes['image']['url'] ) . '" width="' . esc_attr( $attributes['image']['width'] ) . '" height="' . esc_attr( $attributes['image']['height'] ) . '" alt="' . esc_attr( $attributes['image']['alt'] ) . '" class="img-fluid areoi-banner-media" />';
+			}
+
+			if ( !empty( $attributes['video'] ) ) {
+				$media .= '<video class="img-fluid areoi-banner-media" autoplay loop playsinline muted>';
+					$media .= '<source src="' . esc_url( $attributes['video']['url'] ) . '" />';
+				$media .= '</video>';
+			}
+
+		$media .= '</div>';
+	}
+
+	switch ( $layout ) {
+		case 'grid':
+			
+			$output = '
+				<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . ' d-flex">
+					' . $background . '
+					<div class="areoi-banner-content flex-grow-1">
+						' . $content . ' 
+					</div>
+					' . $url . '
+				</div>
+			';
+
+			break;
+		
+		default:
+			
+
+			$output = '
+				<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . ' position-relative">
+
+					' . $background . '
+
+					<div class="' . $container . ' h-100 position-relative">
+						<div class="row justify-content-' . ( $media ? 'between' : 'center text-center' ) . ' align-items-center h-100">
+							<div class="col-11 col-md-8 col-lg-6 col-xl-5">
+								' . $content . ' 
+							</div>
+							' . $media . ' 
+							' . $url . '
+						</div>
+					</div>
+				</div>
+			';
+
+			break;
+	}
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner-item/block.js

@@ -0,0 +1,174 @@
+import * as areoi from '../_components/Core.js';
+import * as grid from './template-parts-js/grid.js';
+import * as stacked from './template-parts-js/stacked.js';
+import * as carousel from './template-parts-js/carousel.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS    = [ 'core/heading', 'core/paragraph', 'areoi/button', 'core/image', 'core/video', 'areoi/icon' ];
+const BLOCKS_TEMPLATE   = null;
+const NEW_TAB_REL       = 'noreferrer noopener';
+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="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,5v3H5V5H19z M19,10v4H5v-4H19z M5,19v-3h14v3H5z"/></svg>;
+
+areoi.blocks.registerBlockType( meta, {
+    icon: blockIcon,
+    edit: props => {
+        const {
+            attributes,
+            setAttributes,
+            className,
+            isSelected,
+            onReplace,
+            mergeBlocks,
+            clientId
+        } = props;
+
+        const { block_id } = attributes;
+        if ( !block_id ) {
+            setAttributes( { block_id: clientId } );
+        }
+
+        const parentBlocks      = wp.data.select( 'core/block-editor' ).getBlockParents(props.clientId); 
+        const parentAttributes  = wp.data.select('core/block-editor').getBlocksByClientId(parentBlocks);
+        
+        var parent_id = false;
+        parentAttributes.forEach(element => {
+            if ( element.name == 'areoi/banner' ) {
+                parent_id = element.attributes.block_id;
+            }
+        });
+        if ( parent_id ) {
+            setAttributes( { parent_id: parent_id } );
+        }
+
+        let parent          = wp.data.select( 'core/block-editor' ).getBlock( parent_id ).attributes,
+            layout          = parent['layout'] ? parent['layout'] : 'stacked',
+            container       = layout == 'grid' ? 'container-fluid' : 'container';
+        
+        const classes = [
+            'banner-item'
+        ];
+
+        const {
+            linkTarget,
+            rel,
+            text,
+            url,
+            url_title
+        } = attributes;
+        const onSetLinkRel = areoi.element.useCallback(
+            ( value ) => {
+                setAttributes( { rel: value } );
+            },
+            [ setAttributes ]
+        );
+
+        const onToggleOpenInNewTab = areoi.element.useCallback(
+            ( value ) => {
+                const newLinkTarget = value ? '_blank' : undefined;
+
+                let updatedRel = rel;
+                if ( newLinkTarget && ! rel ) {
+                    updatedRel = NEW_TAB_REL;
+                } else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
+                    updatedRel = undefined;
+                }
+
+                setAttributes( {
+                    linkTarget: newLinkTarget,
+                    rel: updatedRel,
+                } );
+            },
+            [ rel, setAttributes ]
+        );
+
+        const ref = areoi.element.useRef();
+        const richTextRef = areoi.element.useRef();
+        const blockProps = areoi.editor.useBlockProps( {
+            ref,
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            var append = ( tab.name == 'xs' ? '' : '-' + tab.name );
+
+            return (
+                <div>
+                    { areoi.DeviceLayout( areoi, attributes, onChange, tab ) }
+
+                    { areoi.DeviceBackground( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'banner-item' ) }
+
+                { !attributes.preview &&
+                    <div { ...blockProps } data-anchor={ attributes.anchor ? ' : #' + attributes.anchor : '' }>
+                        <areoi.editor.InspectorControls key="setting">
+
+                            { areoi.Background( areoi, attributes, onChange ) }
+
+                            { layout != 'grid' &&
+                                <areoi.components.PanelBody title={ 'Media' } initialOpen={ false }>
+
+                                    { areoi.MediaUpload( areoi, attributes, onChange, 'Image', 'image', 'image' ) }
+
+                                    { areoi.MediaUpload( areoi, attributes, onChange, 'Video', 'video', 'video' ) }
+
+                                </areoi.components.PanelBody>
+                            }
+
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        
+
+                        { layout == 'stacked' &&
+                            <>
+                                { stacked.render( areoi, attributes, container, BLOCKS_TEMPLATE, ALLOWED_BLOCKS ) }
+                            </>
+                        }
+                        
+                        { layout == 'grid' &&
+                            <>
+                                { grid.render( areoi, attributes, container, BLOCKS_TEMPLATE, ALLOWED_BLOCKS ) }
+                            </>
+                        }
+                        
+                        { layout == 'carousel' &&
+                            <>
+                                { carousel.render( areoi, attributes, container, BLOCKS_TEMPLATE, ALLOWED_BLOCKS ) }
+                            </>
+                        }
+
+                        <areoi.URLPicker
+                            areoi={ areoi }
+                            url={ url }
+                            urlTitle={ url_title }
+                            setAttributes={ setAttributes }
+                            isSelected={ isSelected }
+                            opensInNewTab={ linkTarget === '_blank' }
+                            onToggleOpenInNewTab={ onToggleOpenInNewTab }
+                            anchorRef={ ref }
+                            richTextRef={ richTextRef }
+                        />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner-item/block.json

@@ -0,0 +1,472 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/banner-item",
+	"title": "Banner Item",
+	"parent": [ "areoi/banner" ],
+	"category": "areoi-strips",
+	"description": "Add individual banner items within a banner.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+		"parent_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
+	    },
+
+		"image": {
+			"type": "object",
+			"default": null
+		},
+		"video": {
+			"type": "object",
+			"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"
+	    },
+
+	    "background_hide_xs": {
+	        "type": "boolean",
+	        "default": false
+	    },
+	    "background_col_xs": {
+	        "type": "string",
+	        "default": null
+	    },
+
+	    "background_hide_sm": {
+	        "type": "boolean",
+	        "default": false
+	    },
+	    "background_col_sm": {
+	        "type": "string",
+	        "default": null
+	    },
+
+	    "background_hide_md": {
+	        "type": "boolean",
+	        "default": false
+	    },
+	    "background_col_md": {
+	        "type": "string",
+	        "default": null
+	    },
+
+	    "background_hide_lg": {
+	        "type": "boolean",
+	        "default": false
+	    },
+	    "background_col_lg": {
+	        "type": "string",
+	        "default": null
+	    },
+
+	    "background_hide_xl": {
+	        "type": "boolean",
+	        "default": false
+	    },
+	    "background_col_xl": {
+	        "type": "string",
+	        "default": null
+	    },
+
+	    "background_hide_xxl": {
+	        "type": "boolean",
+	        "default": false
+	    },
+	    "background_col_xxl": {
+	        "type": "string",
+	        "default": null
+	    },
+
+	    "url": {
+	        "type": "string",
+	        "default": null
+	    },
+	    "title": {
+	        "type": "string",
+	        "default": null
+	    },
+	    "linkTarget": {
+	        "type": "string",
+	        "default": null
+	    },
+	    "rel": {
+	        "type": "string",
+	        "default": null
+	    },
+
+	    "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
+		},
+		
+		"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
+		},
+		
+		"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
+		},
+
+		"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
+		},
+
+		"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
+		},
+
+		"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
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner-item/template-parts-js/carousel.js

@@ -0,0 +1,41 @@
+function render( areoi, attributes, container, BLOCKS_TEMPLATE, ALLOWED_BLOCKS )
+{
+	var has_media = (attributes['image'] && attributes['image'] != null) || (attributes['video'] && attributes['video'] != null);
+	return (
+				
+		<>
+			{ areoi.DisplayBackground( areoi, attributes ) }
+
+			<div className={ areoi.helper.GetClassNameStr( [ 'container' ] ) }>
+				<div className={ areoi.helper.GetClassNameStr( [ 'row', 'h-100', 'align-items-center', 'justify-content-' + ( has_media ? 'between' : 'center text-center' ) ] ) }>
+					
+					<div class="col-11 col-md-8 col-lg-6 col-xl-5 position-relative">
+						<div className={ areoi.helper.GetClassNameStr( [ 'areoi-banner-content', 'flex-grow-1' ] ) }>
+							<areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+						</div>
+					</div>
+
+					{
+						has_media &&
+						<div class="col-11 col-md-8 col-lg-6 col-xl-5 position-relative">						
+							{ attributes['image'] && attributes['image']['url'] && 
+	                            <img src={ attributes['image']['url'] } class="img-fluid" />
+	                        }
+
+							{ attributes['video'] && attributes['video']['url'] &&
+			                    <video>
+			                        <source src={ attributes['video']['url'] } />
+			                    </video>
+			                }
+						</div>
+					}
+
+				</div>
+			</div>
+		</>
+	);
+}
+
+export {
+	render
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner-item/template-parts-js/grid.js

@@ -0,0 +1,17 @@
+function render( areoi, attributes, container, BLOCKS_TEMPLATE, ALLOWED_BLOCKS )
+{
+	return (
+				
+		<div class="col position-relative">
+			{ areoi.DisplayBackground( areoi, attributes ) }
+
+			<div className={ areoi.helper.GetClassNameStr( [ 'areoi-banner-content', 'flex-grow-1' ] ) }>
+				<areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+			</div>
+		</div>
+	);
+}
+
+export {
+	render
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner-item/template-parts-js/stacked.js

@@ -0,0 +1,41 @@
+function render( areoi, attributes, container, BLOCKS_TEMPLATE, ALLOWED_BLOCKS )
+{
+	var has_media = attributes['image'] || attributes['video'];
+	return (
+				
+		<>
+			{ areoi.DisplayBackground( areoi, attributes ) }
+
+			<div className={ areoi.helper.GetClassNameStr( [ 'container' ] ) }>
+				<div className={ areoi.helper.GetClassNameStr( [ 'row', 'h-100', 'align-items-center', 'justify-content-' + ( has_media ? 'between' : 'center text-center' ) ] ) }>
+					
+					<div class="col-11 col-md-8 col-lg-6 col-xl-5 position-relative">
+						<div className={ areoi.helper.GetClassNameStr( [ 'areoi-banner-content', 'flex-grow-1' ] ) }>
+							<areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+						</div>
+					</div>
+
+					{
+						has_media &&
+						<div class="col-11 col-md-8 col-lg-6 col-xl-5 position-relative">						
+							{ attributes['image'] && attributes['image']['url'] && 
+	                            <img src={ attributes['image']['url'] } class="img-fluid" />
+	                        }
+
+							{ attributes['video'] && attributes['video']['url'] &&
+			                    <video>
+			                        <source src={ attributes['video']['url'] } />
+			                    </video>
+			                }
+						</div>
+					}
+
+				</div>
+			</div>
+		</>
+	);
+}
+
+export {
+	render
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner.php

@@ -0,0 +1,50 @@
+<?php
+function areoi_render_block_banner( $attributes, $content ) 
+{
+	if ( !$content ) return $content;
+
+	libxml_use_internal_errors(true);
+	$dom 	= new DOMDocument;
+	$dom->encoding = 'utf-8';
+	$dom->loadHTML( utf8_decode( $content ) );
+	$xpath 	= new DOMXpath($dom);
+	$items 	= $xpath->query('//div[contains(@class, "banner-item")]');
+	libxml_use_internal_errors(false);
+
+	$layout 		= !empty( $attributes['layout'] ) ? esc_attr( $attributes['layout'] ) : 'grid';
+	$container 		= !empty( $attributes['container'] ) ? esc_attr( $attributes['container'] ) : 'container';
+	$has_follows 	= $items->count() > 3 ? 'banner-grid-has-follows' : '';
+
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'areoi-banner-' . $layout,
+			$has_follows,
+			( !empty( $attributes['size'] ) ? $attributes['size'] : '' ),
+			( !empty( $attributes['align'] ) ? 'align' . $attributes['align'] : '' ),
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'block' ) 
+	);
+ 	
+ 	$output = '<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">';
+
+		$contents = array();
+		if ( !empty( $items ) ) {
+			$item_count = $items->count();
+
+			foreach ( $items as $item_key => $item ) {
+				$newdoc = new DOMDocument();
+				$cloned = $item->cloneNode( true );
+			    $newdoc->appendChild($newdoc->importNode($cloned,TRUE));
+			    $contents[] = $newdoc->saveHTML();
+			}
+
+			$path = AREOI__PLUGIN_DIR . 'blocks/banner/template-parts/' . $layout . '.php';
+			if ( file_exists( $path ) ) include( $path );
+		}
+
+	$output .= '</div>';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/block.js

@@ -0,0 +1,146 @@
+import * as areoi from '../_components/Core.js';
+import * as grid from './template-parts-js/grid.js';
+import * as stacked from './template-parts-js/stacked.js';
+import * as carousel from './template-parts-js/carousel.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = ['areoi/banner-item'];
+const BLOCKS_TEMPLATE = [
+    [ 'areoi/banner-item', {},
+        [
+            [ 'core/heading', { level: 1, content: 'Enter Heading' } ],
+            [ 'core/paragraph', { content: 'Enter description' } ],
+            [ 'areoi/button', {} ],
+        ]
+    ],
+    [ 'areoi/banner-item', {},
+        [
+            [ 'core/heading', { level: 2, content: 'Enter Heading' } ],
+        ]
+    ],
+    [ 'areoi/banner-item', {},
+        [
+            [ 'core/heading', { level: 2, content: 'Enter Heading' } ],
+        ]
+    ],
+];
+
+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="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,5v3H5V5H19z M19,10v4H5v-4H19z M5,19v-3h14v3H5z"/></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       = layout == 'grid' ? 'container-fluid' : 'container',
+            has_follows     = child_blocks.length > 3 ? 'areoi-banner-grid-has-follows' : '';
+        
+        const classes = [
+            'areoi-banner-' + layout,
+            has_follows,
+            ( attributes['size'] && attributes['size'] != 'Default' ? attributes['size'] : '' ),
+        ];
+        
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'banner' ) }
+
+                { !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 banner items you add within this banner."
+                                        value={ attributes.layout }
+                                        options={ [
+                                            { label: 'Carousel', value: 'carousel' },
+                                            { label: 'Stacked', value: 'stacked' },
+                                            { label: 'Grid', value: 'grid' },
+                                        ] }
+                                        onChange={ ( value ) => onChange( 'layout', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                                <areoi.components.PanelRow>
+                                    <areoi.components.SelectControl
+                                        label="Size"
+                                        labelPosition="top"
+                                        help="Choose a predefined size for your banner. Small is 50vh, Medium is 75vh and Large is 100vh."
+                                        value={ attributes.size }
+                                        options={ [
+                                            { label: 'Small', value: 'areoi-small' },
+                                            { label: 'Medium', value: 'areoi-medium' },
+                                            { label: 'Large', value: 'areoi-large' },
+                                        ] }
+                                        onChange={ ( value ) => onChange( 'size', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        { layout == 'stacked' &&
+                            <>
+                                { stacked.render( areoi, child_blocks, BLOCKS_TEMPLATE, ALLOWED_BLOCKS ) }
+                            </>
+                        }
+
+                        { layout == 'grid' &&
+                            <>
+                                { grid.render( areoi, child_blocks, BLOCKS_TEMPLATE, ALLOWED_BLOCKS ) }
+                            </>
+                        }
+
+                        { layout == 'carousel' &&
+                            <>
+                                { carousel.render( areoi, child_blocks, BLOCKS_TEMPLATE, ALLOWED_BLOCKS ) }
+                            </>
+                        }
+                        
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/block.json

@@ -0,0 +1,70 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/banner",
+	"title": "Banner",
+	"parent": null,
+	"category": "areoi-strips",
+	"description": "Choose from 3 different banner layouts with background images and videos.",
+	"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
+		},
+		"layout": {
+			"type": "string",
+			"default": "grid"
+		},
+		"size": {
+			"type": "string",
+			"default": "areoi-large"
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": true,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/index.css

@@ -0,0 +1,107 @@
+.areoi-banner-item {
+	min-height: 100px;
+}
+
+.areoi-banner-grid {
+	height: calc( 100vh + 80px );
+	padding: 0 20px;
+	border: 1px dashed #ddd;
+}
+.areoi-banner-grid.areoi-small {
+	height: 50vh;
+}
+.areoi-banner-grid.areoi-medium {
+	height: 75vh;
+}
+.areoi-banner-grid > div {
+	height: 100%;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+}
+.areoi-banner-grid > div > .row > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	display: grid;
+	grid-auto-rows: 1fr;
+	grid-template-columns: 1fr 1fr 1fr;
+}
+.areoi-banner-grid > div > .row > .block-editor-inner-blocks > .block-editor-block-list__layout > .banner-item {
+	width: 100%;
+	padding: 20px 0;
+	border: 1px dashed #ddd;
+}
+.areoi-banner-grid > div > .row > .block-editor-inner-blocks > .block-editor-block-list__layout > .banner-item:first-of-type {
+	grid-column-start: 1;
+	grid-column-end: 3;
+	grid-row-start: 1;
+  	grid-row-end: 3;
+}
+.areoi-banner-grid > div > .row > .block-editor-inner-blocks > .block-editor-block-list__layout > .banner-item > .col {
+	height: 100%;
+	align-items: flex-end;
+	padding: 30px;
+	display: flex;
+}
+.areoi-banner-grid .areoi-banner-content {
+	max-width: 500px;
+	position: relative;
+	padding-bottom: calc(var(--bs-gutter-x) * .5);
+}
+.areoi-banner-grid .areoi-banner-content :last-child  {
+	margin-bottom: 0;
+}
+
+
+.areoi-banner-stacked {
+	padding: 0 20px;
+	border: 1px dashed #ddd;
+}
+.areoi-banner-stacked .banner-item {
+	height: 100vh;
+	border: 1px dashed #ddd;
+	padding: 20px 0;
+}
+.areoi-banner-stacked.areoi-small .banner-item {
+	height: 50vh;
+}
+.areoi-banner-stacked.areoi-medium .banner-item {
+	height: 75vh;
+}
+.areoi-banner-stacked .banner-item > .container,
+.areoi-banner-stacked .banner-item > .container > .row {
+	height: 100%;
+}
+.block-editor-block-list__layout.is-root-container .banner-item > .container > .row,
+.block-editor-block-list__layout.is-root-container .banner-item > .container > .row.justify-content-center:not(.background .row) {
+	display: flex !important;
+}
+
+
+
+.areoi-banner-carousel {
+	padding: 0 20px;
+	border: 1px dashed #ddd;
+}
+.areoi-banner-carousel .banner-item {
+	height: 100vh;
+	border: 1px dashed #ddd;
+	padding: 20px 0;
+}
+.areoi-banner-carousel.areoi-small .banner-item {
+	height: 50vh;
+}
+.areoi-banner-carousel.areoi-medium .banner-item {
+	height: 75vh;
+}
+.areoi-banner-carousel .banner-item > .container,
+.areoi-banner-carousel .banner-item > .container > .row {
+	height: 100%;
+}
+.block-editor-block-list__layout.is-root-container .areoi-banner-carousel .banner-item > .container > .row {
+	display: flex !important;
+}
+.block-editor-block-list__layout.is-root-container .areoi-banner-carousel .banner-item:not(:first-of-type) {
+	display: none;
+}
+.block-editor-block-list__layout.is-root-container .areoi-banner-carousel.is-selected .banner-item,
+.block-editor-block-list__layout.is-root-container .areoi-banner-carousel.has-child-selected .banner-item {
+	display: block;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/style.css

@@ -0,0 +1,103 @@
+.areoi-banner-grid {
+	height: 200vh;
+}
+.areoi-banner-grid.areoi-small {
+	height: 100vh;
+}
+.areoi-banner-grid.areoi-medium {
+	height: 150vh;
+}
+.areoi-banner-grid > div {
+	height: 100%;
+}
+.areoi-banner-grid > div > .row {
+	display: grid;
+	grid-auto-rows: 1fr;
+	grid-template-columns: 1fr;
+}
+.areoi-banner-grid > div > .row > .col:first-of-type {
+	grid-column-start: 1;
+	grid-column-end: 2;
+	grid-row-start: 1;
+  	grid-row-end: 3;
+}
+.areoi-banner-grid .areoi-banner-item {
+	height: 100%;
+	align-items: flex-end;
+}
+.areoi-banner-grid .areoi-banner-content {
+	position: relative;
+	margin: 0 auto;
+	padding-bottom: calc(2rem + var(--bs-gutter-x) * .5);
+}
+.areoi-banner-grid .areoi-banner-content :last-child  {
+	margin-bottom: 0;
+}
+
+@media only screen and ( min-width: 576px ) {
+	.areoi-banner-grid {
+		height: 100vh;
+	}
+	.areoi-banner-grid.areoi-small {
+		height: 50vh;
+	}
+	.areoi-banner-grid.areoi-medium {
+		height: 75vh;
+	}
+	.areoi-banner-grid > div > .row {
+		grid-template-columns: 1fr 1fr;
+	}
+	.areoi-banner-grid > div > .row > .col:first-of-type {
+		grid-column-end: 3;
+	}
+	.areoi-banner-grid .areoi-banner-content {
+		max-width: 540px;
+		padding: 2rem calc(var(--bs-gutter-x) * .5);
+    	margin: 0;
+	}
+}
+
+@media only screen and ( min-width: 992px ) {
+	.areoi-banner-grid > div > .row {
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+	.areoi-banner-grid .areoi-banner-content {
+		max-width: 500px;
+		padding: calc(2rem + var(--bs-gutter-x) * .5) 2rem;
+	}
+}
+
+
+
+.areoi-banner-stacked .areoi-banner-item {
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+}
+.areoi-banner-stacked.areoi-small .areoi-banner-item {
+	min-height: 50vh;
+}
+.areoi-banner-stacked.areoi-medium .areoi-banner-item {
+	min-height: 75vh;
+}
+.areoi-banner-stacked .areoi-banner-item .areoi-banner-media {
+	margin: 1rem 0;
+}
+
+
+
+.areoi-banner-carousel .areoi-banner-item {
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	padding: 100px 0;
+}
+.areoi-banner-carousel.areoi-small .areoi-banner-item {
+	height: 50vh;
+}
+.areoi-banner-carousel.areoi-medium .areoi-banner-item {
+	height: 75vh;
+}
+.areoi-banner-carousel .areoi-banner-item .areoi-banner-media {
+	margin: 1rem 0;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/template-parts-js/carousel.js

@@ -0,0 +1,18 @@
+function render( areoi, child_blocks, BLOCKS_TEMPLATE, ALLOWED_BLOCKS )
+{
+	var item_count = child_blocks.length;
+	
+	if ( item_count ) {
+
+		return (
+
+			<div class="areoi-strip">
+				<areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+			</div>
+		);
+	}
+}
+
+export {
+	render
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/template-parts-js/grid.js

@@ -0,0 +1,20 @@
+function render( areoi, child_blocks, BLOCKS_TEMPLATE, ALLOWED_BLOCKS )
+{
+	var item_count = child_blocks.length;
+	
+	if ( item_count ) {
+
+		return (
+
+			<div className={ areoi.helper.GetClassNameStr( [ 'container-fluid' ] ) }>
+				<div className={ areoi.helper.GetClassNameStr( [ 'row', 'h-100' ] ) }>
+					<areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+				</div>
+			</div>
+		);
+	}
+}
+
+export {
+	render
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/template-parts-js/stacked.js

@@ -0,0 +1,18 @@
+function render( areoi, child_blocks, BLOCKS_TEMPLATE, ALLOWED_BLOCKS )
+{
+	var item_count = child_blocks.length;
+	
+	if ( item_count ) {
+
+		return (
+
+			<div class="areoi-strip">
+				<areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+			</div>
+		);
+	}
+}
+
+export {
+	render
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/template-parts/carousel.php

@@ -0,0 +1,25 @@
+<?php 
+ob_start();
+?>
+	
+	<div id="<?php echo areoi_return_id( $attributes ) ?>-carousel" class="carousel slide" data-bs-ride="carousel">
+
+		<div class="carousel-indicators">
+			<?php foreach ( $contents as $content_key => $content ) : ?>
+				<button type="button" data-bs-target="#<?php echo areoi_return_id( $attributes ) ?>-carousel" data-bs-slide-to="<?php echo $content_key; ?>" class="<?php echo $content_key == 0 ? 'active' : '' ?>" aria-label="Slide <?php echo $content_key + 1; ?>"></button>
+			<?php endforeach; ?>
+		</div>
+
+		<div class="carousel-inner">
+			<?php foreach ( $contents as $content_key => $content ) : ?>
+				<div class="carousel-item <?php echo $content_key == 0 ? 'active' : '' ?>">
+					<?php echo $content ?>
+				</div>
+			<?php endforeach; ?>
+		</div>
+
+	</div>
+
+<?php
+$output .= ob_get_contents();
+ob_end_clean();

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/template-parts/grid.php

@@ -0,0 +1,17 @@
+<?php 
+ob_start();
+?>
+
+<div class="container-fluid">
+	<div class="row h-100">
+		<?php foreach ( $contents as $content_key => $content ) : ?>
+			<div class="col position-relative">
+				<?php echo $content; ?>
+			</div>
+		<?php endforeach; ?>
+	</div>
+</div>
+
+<?php
+$output .= ob_get_contents();
+ob_end_clean();

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/banner/template-parts/stacked.php

@@ -0,0 +1,9 @@
+<?php 
+ob_start();
+
+foreach ( $contents as $content_key => $content ) :
+	echo $content;
+endforeach;
+
+$output .= ob_get_contents();
+ob_end_clean();

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/breadcrumb.php

@@ -0,0 +1,42 @@
+<?php
+function areoi_render_block_breadcrumb( $attributes, $content ) 
+{
+	$breadcrumbs = areoi_generate_breadcrumbs( $attributes );
+
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'breadcrumb',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'flex' ) 
+	);
+
+	$divider = "style=\"--bs-breadcrumb-divider: '" . esc_attr( htmlentities( $attributes['divider'] ) ) . "';\"";
+
+	$list = '';
+	if ( !empty( $breadcrumbs ) ) {
+		foreach ( $breadcrumbs as $breadcrumb_key => $breadcrumb ) {
+			if ( $breadcrumb['active'] ) {
+				$list .= '<li class="breadcrumb-item active" aria-current="page">' . wp_kses_post( $breadcrumb['label'] ) . '</li>';
+			} else {
+				$list .= '<li class="breadcrumb-item"><a href="' . esc_url( $breadcrumb['permalink'] ) . '">' . wp_kses_post( $breadcrumb['label'] ) . '</a></li>';
+			}
+		}
+	}
+	
+	$output = '
+		<nav  
+			' . areoi_return_id( $attributes ) . ' 
+			class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '" 
+			aria-label="breadcrumb"
+			' . $divider . '
+		>
+			<ol class="breadcrumb">
+				' . $list . '
+			</ol>
+		</nav>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/breadcrumb/block.js

@@ -0,0 +1,93 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = null;
+const BLOCKS_TEMPLATE = null;
+
+const blockIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></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 } );
+        }
+
+        const classes = [
+            'breadcrumb',
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) + '--bs-breadcrumb-divider: \'' + attributes.divider + '\';' }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'breadcrumb' ) }
+
+                { !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.TextControl
+                                        label="Divider"
+                                        help="Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time."
+                                        value={ attributes.divider }
+                                        onChange={ ( value ) => onChange( 'divider', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                                <areoi.components.PanelRow>
+                                    <areoi.components.ToggleControl
+                                        label="Use Front Page Title"
+                                        help="If checked the title of the front page will be used in place of Home."
+                                        checked={ attributes.is_front_page }
+                                        onChange={ ( value ) => onChange( 'is_front_page', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                       
+                        <ol class="breadcrumb">
+                            <li class="breadcrumb-item"><a href="#">{ attributes['is_front_page'] ? 'Front Page Title' : 'Home' }</a></li>
+                            <li class="breadcrumb-item active">About</li>
+                        </ol>
+        
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/breadcrumb/block.json

@@ -0,0 +1,70 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/breadcrumb",
+	"title": "Breadcrumb",
+	"parent": null,
+	"category": "areoi-components",
+	"description": "Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+		"divider": {
+			"type": "string",
+			"default": "/"
+		},
+		"is_front_page": {
+			"type": "boolean",
+			"default": false
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/breadcrumb/index.css

@@ -0,0 +1,4 @@
+.wp-block-areoi-breadcrumb {
+    border:  1px dashed #ccc;
+    padding: 10px;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/button-group.php

@@ -0,0 +1,21 @@
+<?php
+function areoi_render_block_button_group( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+			( !empty( $attributes['style'] ) ? $attributes['style'] : 'btn-group' ),
+			( !empty( $attributes['size'] ) ? $attributes['size'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'inline-flex' ) 
+	);
+
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">
+			' . $content . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/button-group/block.js

@@ -0,0 +1,105 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = [ 'areoi/button' ];
+const BLOCKS_TEMPLATE = [ 
+    ['areoi/button', {} ],
+    ['areoi/button', {} ]
+];
+
+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"><g><rect fill="none" height="24" width="24" x="0" y="0"/></g><g><g><path d="M19,13H5c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-4C21,13.9,20.1,13,19,13z M19,19H5v-4h14V19z"/><path d="M19,3H5C3.9,3,3,3.9,3,5v4c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,9H5V5h14V9z"/></g></g></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 } );
+        }
+
+        const classes = [
+            attributes.size,
+            attributes.style
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'button-group' ) }
+
+                { !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 className="areoi-panel-row">
+                                    <areoi.components.SelectControl
+                                        label="Style"
+                                        labelPosition="top"
+                                        help="Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here."
+                                        value={ attributes.style }
+                                        options={ [
+                                            { label: 'Default', value: 'btn-group' },
+                                            { label: 'Horizontal', value: 'btn-group' },
+                                            { label: 'Vertical', value: 'btn-group-vertical' },
+                                        ] }
+                                        onChange={ ( value ) => onChange( 'style', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                                <areoi.components.PanelRow>
+                                    <areoi.components.SelectControl
+                                        label="Size"
+                                        help="Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups."
+                                        labelPosition="top"
+                                        value={ attributes.size }
+                                        options={ [
+                                            { label: 'Default', value: null },
+                                            { label: 'Small', value: 'btn-group-sm' },
+                                            { label: 'Medium', value: null },
+                                            { label: 'Large', value: 'btn-group-lg' },
+                                        ] }
+                                        onChange={ ( value ) => onChange( 'size', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/button-group/block.json

@@ -0,0 +1,70 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/button-group",
+	"title": "Button Group",
+	"parent": null,
+	"category": "areoi-components",
+	"description": "Group a series of buttons together on a single line or stack them in a vertical column.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+		"style": {
+			"type": "string",
+			"default": "btn-group"
+		},
+		"size": {
+			"type": "string",
+			"default": null
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/button-group/index.css

@@ -0,0 +1,48 @@
+.wp-block-areoi-button-group {
+    border:  1px dashed #ccc;
+    min-height: 28px;
+    padding: 28px 0 !important;
+}
+.wp-block-areoi-button-group.btn-group-vertical {
+    padding: 28px 0;
+}
+.wp-block-areoi-button-group.btn-group .wp-block-areoi-button {
+    display: inline-block;
+}
+
+/* Horizontal */
+.btn-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .btn,
+.btn-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .btn-group {
+    position: relative;
+    flex: 1 1 auto;
+}
+
+.btn-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not(:last-of-type):not(.dropdown-toggle) .btn {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.btn-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not(:first-of-type) .btn {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    margin-left: -1px;
+}
+
+/* Vertical */
+.btn-group-vertical > .block-editor-inner-blocks > .block-editor-block-list__layout {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+}
+.btn-group-vertical > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not(:last-child):not(.dropdown-toggle) .btn {
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+.btn-group-vertical > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not(:first-child):not(.dropdown-toggle) .btn {
+    border-top-right-radius: 0 !important;
+    border-top-left-radius: 0 !important;
+}
+.btn-group-vertical > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block .btn {
+    width: 100%;
+    margin: 0;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/button.php

@@ -0,0 +1,142 @@
+<?php
+function areoi_render_block_button( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'btn',
+			'areoi-has-url',
+			'position-relative',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+			( !empty( $attributes['style'] ) ? $attributes['style'] : '' ),
+			( !empty( $attributes['size'] ) ? $attributes['size'] : '' ),
+			( !empty( $attributes['dropdown'] ) ? 'dropdown-toggle' : '' ),
+			( !empty( $attributes['text_wrap'] ) ? $attributes['text_wrap'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'inline-block' )
+		. ' ' . 
+		areoi_get_display_block_class_str( $attributes, 'inline-block' )
+	);
+
+	$badge_class = areoi_get_class_name_str( array( 
+		'badge',
+		( !empty( $attributes['badge_style'] ) ? $attributes['badge_style'] : '' ),
+		( !empty( $attributes['badge_background'] ) ? $attributes['badge_background'] : '' ),
+		( !empty( $attributes['badge_text_color'] ) ? $attributes['badge_text_color'] : '' ),
+		( !empty( $attributes['badge_classes'] ) ? $attributes['badge_classes'] : '' ),
+	) );
+
+	$dropdown_class = areoi_get_class_name_str( array( 
+		'dropdown-menu',
+		( !empty( $attributes['dropdown_style'] ) ? $attributes['dropdown_style'] : '' ),
+		( !empty( $attributes['dropdown_menu_alignment'] ) ? $attributes['dropdown_menu_alignment'] : '' )
+	) );
+
+	$tooltip = null;
+	if ( !empty( $attributes['tooltip'] ) ) {
+		$tooltip = '
+			data-bs-placement="' . esc_attr( $attributes['tooltip_direction'] ) . '"
+			data-bs-toggle="tooltip"
+			data-bs-html="true"	
+			title="' . esc_attr( $attributes['tooltip_content'] ) . '"
+		';
+	}
+
+	$badge = null;
+	if ( !empty( $attributes['badge'] ) ) {
+		$badge = '
+			<span 
+				class="' . $badge_class . '"
+			>
+				' . wp_kses_post( $attributes['badge_content'] ) . '
+			</span>
+		';
+	}
+
+	$icon = null;
+	if ( !empty( $attributes['include_icon'] ) && !empty( $attributes['icon'] ) && !empty( $attributes['icon_size'] ) ) {
+		$icon_margin = !empty( $attributes['icon_position'] ) && $attributes['icon_position'] == 'prepend' ? 'me-3' : 'ms-3';
+		$icon_size = !empty( $attributes['icon_size'] ) ? esc_attr( $attributes['icon_size'] ) : '24'; 
+		$icon = '
+			<i class="' . esc_attr( $attributes['icon'] ) . ' ' . $icon_margin . ' align-middle " style="font-size: ' . $icon_size . 'px;"></i>
+		';
+	}
+
+	$button_open = '
+		<' . esc_attr( $attributes['type'] ) . ' 
+			' . areoi_return_id( $attributes ) . '
+			class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '"
+	';
+	if ( !empty( $attributes['url'] ) ) {
+		$button_open .= ' href="' . esc_url( $attributes['url'] ) . '"';
+	}
+	if ( !empty( $attributes['url_title'] ) ) {
+		$button_open .= ' title="' . esc_attr( $attributes['url_title'] ) . '"';
+	}
+	if ( !empty( $attributes['rel'] ) ) {
+		$button_open .= ' rel="' . esc_attr( $attributes['rel'] ) . '"';
+	}
+	if ( !empty( $attributes['linkTarget'] ) ) {
+		$button_open .= ' target="' . esc_attr( $attributes['linkTarget'] ) . '"';
+	}
+	if ( !empty( $attributes['dropdown'] ) ) {
+		$button_open .= ' data-bs-toggle="dropdown"';
+		$button_open .= ' data-bs-auto-close="' . esc_attr( $attributes['dropdown_auto_close'] ) . '"';
+	}
+
+	if ( !empty( $attributes['url'] ) && !empty( $attributes['link_to_modal'] ) && !areoi2_get_option( 'areoi-dashboard-global-bootstrap-js', 1 ) ) {
+		$button_open .= ' data-bs-toggle="modal"';
+		$button_open .= ' data-bs-target="' . esc_url( $attributes['url'] ) . '"';
+	}
+	$button_open .= ' ' . $tooltip . '>';
+
+	$output = '';
+
+	if ( !empty( $attributes['dropdown'] ) ) {
+		$output .= '
+			<div class="' . areoi_get_display_block_class_str( $attributes, 'inline-block' ) . ' ' . esc_attr( $attributes['dropdown_direction'] ) . '">
+		';
+	}
+		if ( !empty( $attributes['popover'] ) ) {
+			$output .= '
+				<span
+					class="popover-container ' . areoi_get_display_block_class_str( $attributes, 'inline-block' ) . '" 
+					data-bs-container="body"
+	                title="' . ( !empty($attributes['popover_title']) ? esc_attr( $attributes['popover_title'] ) : '') . '"
+	                data-bs-content="' . ( !empty($attributes['popover_content']) ? esc_attr( $attributes['popover_content'] ) : '') . '"
+	                data-bs-placement="' . ( !empty($attributes['popover_direction']) ? esc_attr( $attributes['popover_direction'] ) : '') . '"
+	                data-bs-trigger="focus ' . ( !empty($attributes['popover_trigger']) ? esc_attr( $attributes['popover_trigger'] ) : 'click') . '"
+	                data-bs-toggle="popover"
+	                tabindex="0"
+	            >
+			';
+		}
+
+			$output .= '
+				' . $button_open . '
+					' . ( !empty( $attributes['icon_position'] ) && $attributes['icon_position'] == 'prepend' && $icon ? $icon : '' ) . '
+					' . ( !empty( $attributes['text'] ) ? $attributes['text'] : '' ) . ' 
+					' . ( !empty( $attributes['icon_position'] ) && $attributes['icon_position'] == 'append' && $icon ? $icon : '' ) . '
+					' . $badge . ' 
+				</' . esc_attr( $attributes['type'] ) . '>
+			';
+
+		if ( !empty( $attributes['popover'] ) ) {
+			$output .= '</span>';
+		}
+
+	if ( !empty( $attributes['dropdown'] ) ) {
+
+			$output .= '
+				<div 
+					class="' . $dropdown_class . '" 
+					aria-labelledby="' . ( !empty( $attributes['anchor'] ) ? esc_attr( $attributes['anchor'] ) : '' ) . '"
+				>
+					' . $content . '
+				</div>';
+
+		$output .= '</div>';
+	}
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/button/block.js

@@ -0,0 +1,715 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+import icons from '../icon/icons.json';
+
+const ALLOWED_BLOCKS = [ 'areoi/dropdown-item' ];
+const BLOCKS_TEMPLATE = null;
+const NEW_TAB_REL = 'noreferrer noopener';
+
+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"><g><rect fill="none" height="24" width="24"/><path d="M22,9v6c0,1.1-0.9,2-2,2h-1l0-2h1V9H4v6h6v2H4c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h16C21.1,7,22,7.9,22,9z M14.5,19 l1.09-2.41L18,15.5l-2.41-1.09L14.5,12l-1.09,2.41L11,15.5l2.41,1.09L14.5,19z M17,14l0.62-1.38L19,12l-1.38-0.62L17,10l-0.62,1.38 L15,12l1.38,0.62L17,14z M14.5,19l1.09-2.41L18,15.5l-2.41-1.09L14.5,12l-1.09,2.41L11,15.5l2.41,1.09L14.5,19z M17,14l0.62-1.38 L19,12l-1.38-0.62L17,10l-0.62,1.38L15,12l1.38,0.62L17,14z"/></g></svg>;
+
+areoi.blocks.registerBlockType( meta, {
+    icon: blockIcon,
+    edit: props => {
+
+        const {
+            attributes,
+            setAttributes,
+            className,
+            isSelected,
+            onReplace,
+            mergeBlocks,
+            clientId
+        } = props;
+
+        const { block_id } = attributes;
+        if ( !block_id ) {
+            setAttributes( { block_id: clientId } );
+        }
+
+        const classes = [
+            'btn',
+            attributes.style,
+            attributes.size,
+            attributes.dropdown ? 'dropdown-toggle' : '',
+            attributes.block_xs ? 'd-xs-block' : 'd-xs-inline-block',
+            attributes.block_sm ? 'd-sm-block' : 'd-sm-inline-block',
+            attributes.block_md ? 'd-md-block' : 'd-md-inline-block',
+            attributes.block_lg ? 'd-lg-block' : 'd-lg-inline-block',
+            attributes.block_xl ? 'd-xl-block' : 'd-xl-inline-block',
+            attributes.block_xxl ? 'd-xxl-block' : 'd-xxl-inline-block',
+        ];
+
+        const block_classes = [
+            attributes.block_xs ? 'd-xs-block' : 'd-xs-inline-block',
+            attributes.block_sm ? 'd-sm-block' : 'd-sm-inline-block',
+            attributes.block_md ? 'd-md-block' : 'd-md-inline-block',
+            attributes.block_lg ? 'd-lg-block' : 'd-lg-inline-block',
+            attributes.block_xl ? 'd-xl-block' : 'd-xl-inline-block',
+            attributes.block_xxl ? 'd-xxl-block' : 'd-xxl-inline-block',
+        ];
+
+        const container_classes = [
+            attributes.block_xs ? 'd-xs-block' : 'd-xs-inline-block',
+            attributes.block_sm ? 'd-sm-block' : 'd-sm-inline-block',
+            attributes.block_md ? 'd-md-block' : 'd-md-inline-block',
+            attributes.block_lg ? 'd-lg-block' : 'd-lg-inline-block',
+            attributes.block_xl ? 'd-xl-block' : 'd-xl-inline-block',
+            attributes.block_xxl ? 'd-xxl-block' : 'd-xxl-inline-block',
+            'position-relative',
+            ( attributes.dropdown ? attributes.dropdown_direction : '' )
+        ];
+
+        const {
+            linkTarget,
+            rel,
+            text,
+            url,
+            url_title
+        } = attributes;
+        const onSetLinkRel = areoi.element.useCallback(
+            ( value ) => {
+                setAttributes( { rel: value } );
+            },
+            [ setAttributes ]
+        );
+
+        const onToggleOpenInNewTab = areoi.element.useCallback(
+            ( value ) => {
+                const newLinkTarget = value ? '_blank' : undefined;
+
+                let updatedRel = rel;
+                if ( newLinkTarget && ! rel ) {
+                    updatedRel = NEW_TAB_REL;
+                } else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
+                    updatedRel = undefined;
+                }
+
+                setAttributes( {
+                    linkTarget: newLinkTarget,
+                    rel: updatedRel,
+                } );
+            },
+            [ rel, setAttributes ]
+        );
+
+        const setButtonText = ( newText ) => {
+            // Remove anchor tags from button text content.
+            setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
+        };
+
+        const ref = areoi.element.useRef();
+        const richTextRef = areoi.element.useRef();
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassNameStr( block_classes ),
+            ref,
+        } );
+        const btnProps = {
+            className: areoi.helper.GetClassNameStr( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        };
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const IconControl = areoi.compose.compose(
+            wp.data.withSelect( function( select, props ) {
+                var search = props.attributes['icon_search'];
+                var icons = props.icons;
+                if ( search ) {
+                    icons = icons.filter(icon => icon.includes(search));
+                }
+                return {
+                    icons
+                }
+            } ) )( function( props ) {
+                
+                var attributes = props.attributes;
+                var icons = props.icons;
+
+                var icon_output = [];
+                icons.forEach((icon) => {
+
+                    var key = 'icon';
+
+                    var new_output = 
+                    <div 
+                        onClick={ () => setAttributes( { [key]: icon } ) }
+                        className={ 'areoi-icon-list-item' + ( attributes[key] == icon ? ' selected' : '' ) }
+                    >
+                        <i className={ icon }></i> 
+                        { icon }
+                    </div>
+                    icon_output.push( new_output );
+                });
+
+                return (
+                    <div class="areoi-icon-list">
+                        { icon_output }
+                    </div>
+                );
+            }
+
+        );
+
+        const iconProps = {
+            className: areoi.helper.GetClassNameStr( [
+                attributes.icon,
+                ( attributes.icon_position == 'append' ? 'ms-3' : 'me-3' ),
+                'align-middle'
+            ] ),
+            style: { 'font-size': attributes.icon_size + 'px' }
+        };
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    <areoi.components.PanelBody title={ 'Display (' + tab.title + ')' } initialOpen={ false }>
+                        <areoi.components.PanelRow className="areoi-panel-row">
+                            <areoi.components.ToggleControl 
+                                label={ 'Hide on ' + tab.title }
+                                help={ 'Hide this block on ' + tab.title + ' devices. This will only hide the block from this specific device unless you alter the setting on each device.' }
+                                checked={ attributes['hide_' + tab.name] }
+                                onChange={ ( value ) => onChange( 'hide_' + tab.name, value ) }
+                            />
+                        </areoi.components.PanelRow>
+
+                        <areoi.components.PanelRow>
+                            <areoi.components.ToggleControl 
+                                label={ 'Display Block on ' + tab.title }
+                                help="Make the button 100% width on this device. This will only display block the button from this specific device unless you alter the setting on each device."
+                                checked={ attributes['block_' + tab.name] }
+                                onChange={ ( value ) => onChange( 'block_' + tab.name, value ) }
+                            />
+                        </areoi.components.PanelRow>
+                    </areoi.components.PanelBody>
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'button' ) }
+
+                { !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 className="areoi-panel-row">
+                                        <areoi.components.SelectControl
+                                            label="Type"
+                                            labelPosition="top"
+                                            help="Choose the type of button element you would like to use."
+                                            value={ attributes.type }
+                                            options={ [
+                                                { label: '<a>', value: 'a' },
+                                                { label: '<button>', value: 'button' },
+                                            ] }
+                                            onChange={ ( value ) => onChange( 'type', value ) }
+                                        />
+                                    </areoi.components.PanelRow>
+
+                                    <areoi.components.PanelRow className="areoi-panel-row">
+                                        <areoi.components.SelectControl
+                                            label="Style"
+                                            labelPosition="top"
+                                            help="Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control."
+                                            value={ attributes.style }
+                                            options={ areoi_vars.btn_styles }
+                                            onChange={ ( value ) => onChange( 'style', value ) }
+                                        />
+                                    </areoi.components.PanelRow>
+
+                                    <areoi.components.PanelRow className="areoi-panel-row">
+                                        <areoi.components.SelectControl
+                                            label="Size"
+                                            labelPosition="top"
+                                            help="Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes."
+                                            value={ attributes.size }
+                                            options={ [
+                                                { label: 'Default', value: null },
+                                                { label: 'Small', value: 'btn-sm' },
+                                                { label: 'Medium', value: null },
+                                                { label: 'Large', value: 'btn-lg' },
+                                            ] }
+                                            onChange={ ( value ) => onChange( 'size', value ) }
+                                        />
+                                    </areoi.components.PanelRow>
+
+                                    <areoi.components.PanelRow>
+                                        <areoi.components.SelectControl
+                                            label="Text Wrap"
+                                            labelPosition="top"
+                                            help="If you don’t want the button text to wrap, you can add the .text-nowrap class to the button."
+                                            value={ attributes.text_wrap }
+                                            options={ [
+                                                { label: 'Default', value: null },
+                                                { label: 'Wrap', value: null },
+                                                { label: 'No Wrap', value: 'text-nowrap' }
+                                            ] }
+                                            onChange={ ( value ) => onChange( 'text_wrap', value ) }
+                                        />
+                                    </areoi.components.PanelRow> 
+
+                                    {
+                                        !areoi_vars['include_bootstrap_js'] &&
+
+                                        <areoi.components.PanelRow>
+                                            <areoi.components.ToggleControl 
+                                                label={ 'Link to Modal' }
+                                                help="Include relevant data tags for opening modals"
+                                                checked={ attributes.link_to_modal }
+                                                onChange={ ( value ) => onChange( 'link_to_modal', value ) }
+                                            />
+                                        </areoi.components.PanelRow>   
+                                    }                                
+
+                                </areoi.components.PanelBody>
+
+                                <areoi.components.PanelBody title={ 'Additional' } initialOpen={ false }>
+
+                                    {
+                                        !areoi_vars.exclude_icons &&
+
+                                        <areoi.components.PanelRow className={ 'areoi-panel-row' }>
+                                            <areoi.components.ToggleControl 
+                                                label={ 'Include Icon' }
+                                                help="Include a Bootstrap icon on your button"
+                                                checked={ attributes.include_icon }
+                                                onChange={ ( value ) => onChange( 'include_icon', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+                                    }
+                                    
+                                    <areoi.components.PanelRow className={ 'areoi-panel-row' }>
+                                        <areoi.components.ToggleControl 
+                                            label={ 'Include Badge' }
+                                            help="Badges are mainly used to highlight new or unread items"
+                                            checked={ attributes.badge }
+                                            onChange={ ( value ) => onChange( 'badge', value ) }
+                                        />
+                                    </areoi.components.PanelRow>
+
+                                    {
+                                        !attributes.tooltip && !attributes.dropdown &&
+                                        <areoi.components.PanelRow className={ !attributes.popover ? 'areoi-panel-row' : '' }>
+                                            <areoi.components.ToggleControl 
+                                                label={ 'Include Popover' }
+                                                help="Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element."
+                                                checked={ attributes.popover }
+                                                onChange={ ( value ) => onChange( 'popover', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+                                    }
+
+                                    {
+                                        !attributes.popover && !attributes.dropdown &&
+                                        <areoi.components.PanelRow className={ !attributes.tooltip ? 'areoi-panel-row' : '' }>
+                                            <areoi.components.ToggleControl 
+                                                label={ 'Include Tooltip' }
+                                                help="A small pop-up box that appears when the user moves the mouse pointer over an element"
+                                                checked={ attributes.tooltip }
+                                                onChange={ ( value ) => onChange( 'tooltip', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+                                    } 
+
+                                    {
+                                        !attributes.popover && !attributes.tooltip &&
+                                        <areoi.components.PanelRow>
+                                            <areoi.components.ToggleControl 
+                                                label={ 'Include Dropdown' }
+                                                help="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin."
+                                                checked={ attributes.dropdown }
+                                                onChange={ ( value ) => onChange( 'dropdown', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+                                    }
+
+                                </areoi.components.PanelBody>
+
+                                {
+                                    !areoi_vars.exclude_icons && attributes.include_icon &&
+                                    <areoi.components.PanelBody title={ 'Icon' } initialOpen={ false }>
+
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.SelectControl
+                                                label="Icon Position"
+                                                labelPosition="top"
+                                                help="Choose whether to prepend or append your icon."
+                                                value={ attributes.icon_position }
+                                                options={ [
+                                                    { label: 'Append', value: 'append' },
+                                                    { label: 'Prepend', value: 'prepend' },
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'icon_position', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.SelectControl
+                                                label="Icon Size"
+                                                labelPosition="top"
+                                                help="Choose the size to diaply your icon. Eaxtra small is 12px, Small is 24px, Medium is 36px, Large is 48px, Extra Large is 60px and Extra Extra Large is 80px."
+                                                value={ attributes.icon_size }
+                                                options={ [
+                                                    { label: 'Extra Small', value: '12' },
+                                                    { label: 'Small', value: '24' },
+                                                    { label: 'Medium', value: '36' },
+                                                    { label: 'Large', value: '48' },
+                                                    { label: 'Extra Large', value: '60' },
+                                                    { label: 'Extra Extra Large', value: '80' },
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'icon_size', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <div class="components-panel__row">
+                                            <div className="components-base-control">
+                                                <label>Icon</label>
+                                                
+                                                <areoi.components.TextControl className="areoi-icon-base-control"
+                                                    placeholder="Search Icons"
+                                                    labelPosition="top"
+                                                    help=""
+                                                    value={ attributes['icon_search'] }
+                                                    onChange={ ( value ) => onChange( 'icon_search', value ) }
+                                                />
+
+                                                {
+                                                    attributes['icon'] && 
+                                                    <div className={ 'areoi-icon-list-item selected highlighted' }>
+                                                        <i className={ attributes['icon'] }></i>
+                                                        { attributes['icon'] }
+                                                    </div>
+                                                }
+                                            </div>
+                                        </div>
+                                        <IconControl attributes={attributes} icons={icons} />
+
+                                    </areoi.components.PanelBody>
+                                }
+
+                                {
+                                    attributes.badge &&
+                                    <areoi.components.PanelBody title={ 'Badge' } initialOpen={ false }>
+
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.TextControl
+                                                label="Badge Content"
+                                                labelPosition="top"
+                                                help="The content you wish to display in the badge. This is usually a number."
+                                                value={ attributes.badge_content }
+                                                onChange={ ( value ) => onChange( 'badge_content', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.SelectControl
+                                                label="Badge Style"
+                                                labelPosition="top"
+                                                help="Use the .rounded-pill utility class to make badges more rounded with a larger border-radius."
+                                                value={ attributes.badge_style }
+                                                options={ [
+                                                    { label: 'Default', value: 'bg-primary' },
+                                                    { label: 'Rounded', value: 'rounded-pill' },
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'badge_style', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.SelectControl
+                                                label="Badge Background"
+                                                labelPosition="top"
+                                                help="Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap’s default .bg-light, you’ll likely need a text color utility like .text-dark for proper styling."
+                                                value={ attributes.badge_background }
+                                                options={ [
+                                                    { label: 'Default', value: 'bg-primary' },
+                                                    { label: 'Primary', value: 'bg-primary' },
+                                                    { label: 'Secondary', value: 'bg-secondary' },
+                                                    { label: 'Success', value: 'bg-success' },
+                                                    { label: 'Danger', value: 'bg-danger' },
+                                                    { label: 'Warning', value: 'bg-warning' },
+                                                    { label: 'Info', value: 'bg-info' },
+                                                    { label: 'Light', value: 'bg-light' },
+                                                    { label: 'Dark', value: 'bg-dark' },
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'badge_background', value ) }
+                                            />
+
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.SelectControl
+                                                label="Badge Text Color"
+                                                labelPosition="top"
+                                                help="Use our tect color utility classes to quickly change the appearance of a badge."
+                                                value={ attributes.badge_text_color }
+                                                options={ [
+                                                    { label: 'Default', value: 'text-primary' },
+                                                    { 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( 'badge_text_color', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow>
+                                            <areoi.components.TextControl
+                                                label="Additional Badge Classes"
+                                                labelPosition="top"
+                                                help="Use utilities to modify a .badge and position it in the corner of a link or button."
+                                                value={ attributes.badge_classes }
+                                                onChange={ ( value ) => onChange( 'badge_classes', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                    </areoi.components.PanelBody>
+                                }
+
+                                {
+                                    attributes.popover &&
+                                    <areoi.components.PanelBody title={ 'Popover' } initialOpen={ false }>
+                                    
+                                        <areoi.components.TextControl
+                                            label="Popover Title"
+                                            labelPosition="top"
+                                            help="Add the popover title content."
+                                            value={ attributes.popover_title }
+                                            onChange={ ( value ) => onChange( 'popover_title', value ) }
+                                        />
+
+                                        <areoi.components.TextareaControl
+                                            label="Popover Content"
+                                            labelPosition="top"
+                                            help="Add the main body content for the popover."
+                                            value={ attributes.popover_content }
+                                            onChange={ ( value ) => onChange( 'popover_content', value ) }
+                                        />
+
+                                        <areoi.components.SelectControl
+                                            label="Popover Direction"
+                                            labelPosition="top"
+                                            help="Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL."
+                                            value={ attributes.popover_direction }
+                                            options={ [
+                                                { label: 'Top', value: 'top' },
+                                                { label: 'Right', value: 'right' },
+                                                { label: 'Bottom', value: 'bottom' },
+                                                { label: 'Left', value: 'left' },
+                                            ] }
+                                            onChange={ ( value ) => onChange( 'popover_direction', value ) }
+                                        />
+
+                                        <areoi.components.SelectControl
+                                            label="Popover Trigger"
+                                            labelPosition="top"
+                                            help="By default a popover will be triggered when a user clicks on the element. But you can also set it so the trigger happens on hover."
+                                            value={ attributes.popover_trigger }
+                                            options={ [
+                                                { label: 'Default', value: null },
+                                                { label: 'Hover', value: 'hover' },
+                                            ] }
+                                            onChange={ ( value ) => onChange( 'popover_trigger', value ) }
+                                        />
+
+                                    </areoi.components.PanelBody>
+                                }
+
+                                {
+                                    attributes.tooltip &&
+                                    <areoi.components.PanelBody title={ 'Tooltip' } initialOpen={ false }>
+                                    
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.TextareaControl
+                                                label="Tooltip Content"
+                                                labelPosition="top"
+                                                help="Add the content to be displayed within the tooltip."
+                                                value={ attributes.tooltip_content }
+                                                onChange={ ( value ) => onChange( 'tooltip_content', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow>
+                                            <areoi.components.SelectControl
+                                                label="Tooltip Direction"
+                                                labelPosition="top"
+                                                help="Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL."
+                                                value={ attributes.tooltip_direction }
+                                                options={ [
+                                                    { label: 'Top', value: 'top' },
+                                                    { label: 'Right', value: 'right' },
+                                                    { label: 'Bottom', value: 'bottom' },
+                                                    { label: 'Left', value: 'left' },
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'tooltip_direction', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                    </areoi.components.PanelBody>
+                                }
+
+                                {
+                                    attributes.dropdown &&
+                                    <areoi.components.PanelBody title={ 'Dropdown' } initialOpen={ false }>
+                                            
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.SelectControl
+                                                label="Dropdown Style"
+                                                labelPosition="top"
+                                                help="Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark onto an existing .dropdown-menu. No changes are required to the dropdown items."
+                                                value={ attributes.dropdown_style }
+                                                options={ [
+                                                    { label: 'Default', value: null },
+                                                    { label: 'Dark', value: 'dropdown-menu-dark' },
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'dropdown_style', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.SelectControl
+                                                label="Dropdown Auto Close"
+                                                labelPosition="top"
+                                                help="By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown."
+                                                value={ attributes.dropdown_auto_close }
+                                                options={ [
+                                                    { label: 'True', value: 'true' },
+                                                    { label: 'Inside', value: 'inside' },
+                                                    { label: 'Outside', value: 'outside' },
+                                                    { label: 'False', value: 'false' }
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'dropdown_auto_close', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow className="areoi-panel-row">
+                                            <areoi.components.SelectControl
+                                                label="Dropdown Direction"
+                                                labelPosition="top"
+                                                help="Directions are mirrored when using Bootstrap in RTL, meaning .dropstart will appear on the right side."
+                                                value={ attributes.dropdown_direction }
+                                                options={ [
+                                                    { label: 'Top', value: 'dropup' },
+                                                    { label: 'Right', value: 'dropend' },
+                                                    { label: 'Bottom', value: 'dropdown' },
+                                                    { label: 'Left', value: 'dropstart' }
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'dropdown_direction', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                        <areoi.components.PanelRow>
+                                            <areoi.components.SelectControl
+                                                label="Dropdown Menu Alignment"
+                                                labelPosition="top"
+                                                help="Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning .dropdown-menu-end will appear on the left side."
+                                                value={ attributes.dropdown_menu_alignment }
+                                                options={ [
+                                                    { label: 'Default', value: null },
+                                                    { label: 'Right', value: 'dropdown-menu-end' },
+                                                ] }
+                                                onChange={ ( value ) => onChange( 'dropdown_menu_alignment', value ) }
+                                            />
+                                        </areoi.components.PanelRow>
+
+                                    </areoi.components.PanelBody>
+                                }
+
+                                { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                    
+                            </areoi.editor.InspectorControls>
+
+                            <div 
+                                title={ attributes.popover_title }
+                                data-bs-content={ attributes.popover_content }
+                                data-bs-placement={ attributes.popover_placement }
+                                data-bs-trigger={ 'focus ' + attributes.popover_trigger }
+                                data-bs-toggle="popover"
+                                className={ areoi.helper.GetClassNameStr( container_classes ) }
+                            >
+                                <div { ...btnProps }>
+                                    
+                                    {  attributes.icon && attributes.include_icon && attributes.icon_position == 'prepend' &&
+                                        <i { ...iconProps }></i>
+                                    }
+
+                                    <areoi.editor.RichText
+                                        ref={ richTextRef }
+                                        aria-label={ areoi.__( 'Button text' ) }
+                                        placeholder={ areoi.__( 'Add text…' ) }
+                                        value={ text }
+                                        onChange={ ( value ) => setButtonText( value ) }
+                                        withoutInteractiveFormatting
+                                        onSplit={ ( value ) =>
+                                            createBlock( 'areoi/button', {
+                                                ...attributes,
+                                                text: value,
+                                            } )
+                                        }
+                                        onReplace={ onReplace }
+                                        onMerge={ mergeBlocks }
+                                        identifier="text"
+                                    />
+
+                                    {
+                                        attributes.badge &&
+                                        <span
+                                            className={ areoi.helper.GetClassNameStr( [
+                                                'badge',
+                                                attributes.badge_background,
+                                                attributes.badge_text_color,
+                                                attributes.badge_classes,
+                                                attributes.badge_style
+                                            ] ) }
+                                        >
+                                            { attributes.badge_content }
+                                        </span>
+                                    }
+
+                                    {  attributes.icon && attributes.include_icon && attributes.icon_position == 'append' &&
+                                        <i { ...iconProps }></i>
+                                    }
+                                </div>
+
+                                {
+                                    attributes.dropdown &&
+                                    <div class={ 'dropdown-menu ' + ( attributes.dropdown_style ?  attributes.dropdown_style + ' ' : '' ) +  + ( attributes.dropdown_menu_alignment ?  attributes.dropdown_menu_alignment + ' ' : '' ) }>
+                                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                                    </div>
+                                }
+                            </div>
+                        </div>
+
+                        <areoi.URLPicker
+                            areoi={ areoi }
+                            url={ url }
+                            urlTitle={ url_title }
+                            setAttributes={ setAttributes }
+                            isSelected={ isSelected }
+                            opensInNewTab={ linkTarget === '_blank' }
+                            onToggleOpenInNewTab={ onToggleOpenInNewTab }
+                            anchorRef={ ref }
+                            richTextRef={ richTextRef }
+                        />
+                    </>
+                }
+            </>
+        );
+    },
+    save: ({ attributes, className }) => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/button/block.json

@@ -0,0 +1,472 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/button",
+	"title": "Button",
+	"parent": null,
+	"category": "areoi-components",
+	"description": "Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+		"type": {
+			"type": "string",
+			"default": "a"
+		},
+		"style": {
+			"type": "string",
+			"default": "btn-primary"
+		},
+		"size": {
+			"type": "string",
+			"default": null
+		},
+		"text_wrap": {
+			"type": "string",
+			"default": null
+		},
+		"link_to_modal": {
+			"type": "boolean",
+			"default": false
+		},
+		"url": {
+			"type": "string",
+			"default": null
+		},
+		"url_title": {
+	        "type": "string",
+	        "default": null
+	    },
+		"title": {
+			"type": "string",
+			"default": null
+		},
+		"text": {
+			"type": "string",
+			"default": null
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": null
+		},
+		"rel": {
+			"type": "string",
+			"default": null
+		},
+
+		"include_icon": {
+			"type": "boolean",
+			"default": false
+		},
+		"icon": {
+			"type": "string",
+			"default": "bi-activity"
+		},
+		"icon_size": {
+			"type": "string",
+			"default": "24"
+		},
+		"icon_position": {
+			"type": "string",
+			"default": "append"
+		},
+
+		"popover": {
+			"type": "boolean",
+			"default": false
+		},
+		"popover_title": {
+			"type": "string",
+			"default": null
+		},
+		"popover_content": {
+			"type": "string",
+			"default": null
+		},
+		"popover_direction": {
+			"type": "string",
+			"default": "top"
+		},
+		"popover_trigger": {
+			"type": "string",
+			"default": null
+		},
+
+		"tooltip": {
+			"type": "boolean",
+			"default": false
+		},
+		"tooltip_content": {
+			"type": "string",
+			"default": null
+		},
+		"tooltip_direction": {
+			"type": "string",
+			"default": "top"
+		},
+
+		"dropdown": {
+			"type": "boolean",
+			"default": false
+		},
+		"dropdown_auto_close": {
+			"type": "string",
+			"default": "true"
+		},
+		"dropdown_style": {
+			"type": "string",
+			"default": null
+		},
+		"dropdown_direction": {
+			"type": "string",
+			"default": "dropdown"
+		},
+		"dropdown_menu_alignment": {
+			"type": "string",
+			"default": null
+		},
+
+		"badge": {
+			"type": "boolean",
+			"default": false
+		},
+		"badge_style": {
+			"type": "string",
+			"default": null
+		},
+		"badge_background": {
+			"type": "string",
+			"default": null
+		},
+		"badge_text_color": {
+			"type": "string",
+			"default": null
+		},
+		"badge_content": {
+			"type": "string",
+			"default": null
+		},
+		"badge_classes": {
+			"type": "string",
+			"default": null
+		},
+
+		"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
+		},
+		"block_xs": {
+			"type": "boolean",
+			"default": false
+		},
+
+		"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
+		},
+		"block_sm": {
+			"type": "boolean",
+			"default": false
+		},
+
+		"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
+		},
+		"block_md": {
+			"type": "boolean",
+			"default": false
+		},
+
+		"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
+		},
+		"block_lg": {
+			"type": "boolean",
+			"default": false
+		},
+
+		"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
+		},
+		"block_xl": {
+			"type": "boolean",
+			"default": false
+		},
+
+		"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
+		},
+		"block_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/button/index.css

@@ -0,0 +1,24 @@
+@import url('../../src/bootstrap-icons-1.11.3/bootstrap-icons.css');
+
+.wp-block-areoi-button {
+	position: relative;
+	margin: 0 !important;
+	display: inline-block;
+}
+.wp-block-areoi-button .btn .rich-text {
+	display: inline;
+}
+.wp-block-areoi-button .badge {
+	margin: 0 5px;
+}
+.is-selected > .dropdown > .dropdown-menu,
+.has-child-selected > .dropdown > .dropdown-menu,
+.is-selected > .dropup > .dropdown-menu,
+.has-child-selected > .dropup > .dropdown-menu,
+.is-selected > .dropstart > .dropdown-menu,
+.has-child-selected > .dropstart > .dropdown-menu,
+.is-selected > .dropend > .dropdown-menu,
+.has-child-selected > .dropend > .dropdown-menu {
+	display: block !important;
+	z-index: 10 !important;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-body.php

@@ -0,0 +1,23 @@
+<?php
+function areoi_render_block_card_body( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'card-body',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+			( !empty( $attributes['background'] ) ? $attributes['background'] : '' ),
+			( !empty( $attributes['text_color'] ) ? $attributes['text_color'] : '' ),
+			( !empty( $attributes['border_color'] ) ? $attributes['border_color'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'block' ) 
+	);
+
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">
+			' . $content . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-body/block.js

@@ -0,0 +1,76 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = null;
+const BLOCKS_TEMPLATE = null;
+
+const blockIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"/></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 } );
+        }
+
+        const classes = [
+            'card-body',
+            attributes.background,
+            attributes.text_color,
+            attributes.border_color
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'card-body' ) }
+
+                { !attributes.preview &&
+                    <div { ...blockProps } data-anchor={ attributes.anchor ? ' : #' + attributes.anchor : '' }>
+                        <areoi.editor.InspectorControls key="setting">
+
+                            <areoi.components.PanelBody title={ 'Settings' } initialOpen={ false }>
+
+                                { areoi.Colors( areoi, attributes, onChange ) }
+
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+});

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-body/block.json

@@ -0,0 +1,75 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/card-body",
+	"title": "Card body",
+	"parent": [ "areoi/card" ],
+	"category": "areoi-components",
+	"description": "The building block of a card is the .card-body. Use it whenever you need a padded section within a card.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+
+		"background": {
+			"type": "string",
+			"default": null
+		},
+		"text_color": {
+			"type": "string",
+			"default": null
+		},
+		"border_color": {
+			"type": "string",
+			"default": null
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-body/index.css

@@ -0,0 +1,14 @@
+.card-body {
+	min-height: 28px;
+	margin:  0 !important;
+}
+.card-body :last-child {
+	margin: 0 !important;
+}
+.card > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+	margin: 0 !important;
+}
+.card.is-selected .card-img-overlay,
+.card.has-child-selected .card-img-overlay {
+	position: relative !important;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-footer.php

@@ -0,0 +1,23 @@
+<?php
+function areoi_render_block_card_footer( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'card-footer',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+			( !empty( $attributes['background'] ) ? $attributes['background'] : '' ),
+			( !empty( $attributes['text_color'] ) ? $attributes['text_color'] : '' ),
+			( !empty( $attributes['border_color'] ) ? $attributes['border_color'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'block' ) 
+	);
+
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">
+			' . $content . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-footer/block.js

@@ -0,0 +1,74 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = null;
+const BLOCKS_TEMPLATE = null;
+
+const blockIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"/></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 } );
+        }
+
+        const classes = [
+            'card-footer',
+            attributes.background,
+            attributes.text_color,
+            attributes.border_color
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'card-footer' ) }
+
+                { !attributes.preview &&
+                    <div { ...blockProps } data-anchor={ attributes.anchor ? ' : #' + attributes.anchor : '' }>
+                        <areoi.editor.InspectorControls key="setting">
+
+                            <areoi.components.PanelBody title={ 'Settings' } initialOpen={ false }>
+                                { areoi.Colors( areoi, attributes, onChange ) }
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+});

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-footer/block.json

@@ -0,0 +1,75 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/card-footer",
+	"title": "Card Footer",
+	"parent": [ "areoi/card" ],
+	"category": "areoi-components",
+	"description": "Add an optional footer within a card.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+
+		"background": {
+			"type": "string",
+			"default": null
+		},
+		"text_color": {
+			"type": "string",
+			"default": null
+		},
+		"border_color": {
+			"type": "string",
+			"default": null
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-footer/index.css

@@ -0,0 +1,10 @@
+.card-footer {
+	min-height: 28px;
+	margin:  0 !important;
+}
+.card-footer :last-child {
+	margin: 0 !important;
+}
+.card > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+	margin: 0 !important;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-group.php

@@ -0,0 +1,20 @@
+<?php
+function areoi_render_block_card_group( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'card-group',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'flex' ) 
+	);
+
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">
+			' . $content . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-group/block.js

@@ -0,0 +1,69 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = [ 'areoi/card' ];
+const BLOCKS_TEMPLATE = [ 
+    ['areoi/card', {} ]
+];
+
+const blockIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z"/></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 } );
+        }
+
+        const classes = [
+            'card-group'
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'card-group' ) }
+
+                { !attributes.preview &&
+                    <div { ...blockProps } data-anchor={ attributes.anchor ? ' : #' + attributes.anchor : '' }>
+                        <areoi.editor.InspectorControls key="setting">
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-group/block.json

@@ -0,0 +1,62 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/card-group",
+	"title": "Card Group",
+	"parent": null,
+	"category": "areoi-components",
+	"description": "Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-group/index.css

@@ -0,0 +1,32 @@
+.wp-block-areoi-card-group {
+    width: 100%;
+    border:  1px dashed #ccc;
+    min-height: 28px;
+}
+
+/* Horizontal */
+.card-group > .block-editor-inner-blocks {
+    width: 100%;
+}
+.card-group > .block-editor-inner-blocks > .block-editor-block-list__layout {
+    width: 100%;
+    position: relative;
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.card-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .card {
+    flex: 1 0 0%;
+    margin-bottom: 0;
+}
+.card-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .card:not(:last-of-type) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.card-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .card:not(:first-of-type) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    margin-left: -1px;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-header.php

@@ -0,0 +1,23 @@
+<?php
+function areoi_render_block_card_header( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'card-header',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+			( !empty( $attributes['background'] ) ? $attributes['background'] : '' ),
+			( !empty( $attributes['text_color'] ) ? $attributes['text_color'] : '' ),
+			( !empty( $attributes['border_color'] ) ? $attributes['border_color'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'block' ) 
+	);
+
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">
+			' . $content . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-header/block.js

@@ -0,0 +1,74 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = null;
+const BLOCKS_TEMPLATE = null;
+
+const blockIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"/></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 } );
+        }
+
+        const classes = [
+            'card-header',
+            attributes.background,
+            attributes.text_color,
+            attributes.border_color
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'card-header' ) }
+
+                { !attributes.preview &&
+                    <div { ...blockProps } data-anchor={ attributes.anchor ? ' : #' + attributes.anchor : '' }>
+                        <areoi.editor.InspectorControls key="setting">
+
+                            <areoi.components.PanelBody title={ 'Settings' } initialOpen={ false }>
+                                { areoi.Colors( areoi, attributes, onChange ) }
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+});

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-header/block.json

@@ -0,0 +1,75 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/card-header",
+	"title": "Card Header",
+	"parent": [ "areoi/card" ],
+	"category": "areoi-components",
+	"description": "Add an optional header within a card.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+
+		"background": {
+			"type": "string",
+			"default": null
+		},
+		"text_color": {
+			"type": "string",
+			"default": null
+		},
+		"border_color": {
+			"type": "string",
+			"default": null
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card-header/index.css

@@ -0,0 +1,10 @@
+.card-header {
+	min-height: 28px;
+	margin:  0 !important;
+}
+.card-header :last-child {
+	margin: 0 !important;
+}
+.card > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+	margin: 0 !important;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card.php

@@ -0,0 +1,23 @@
+<?php
+function areoi_render_block_card( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'card',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+			( !empty( $attributes['background'] ) ? $attributes['background'] : '' ),
+			( !empty( $attributes['text_color'] ) ? $attributes['text_color'] : '' ),
+			( !empty( $attributes['border_color'] ) ? $attributes['border_color'] : '' )
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'flex' ) 
+	);
+
+	$output = '
+		<div ' . areoi_return_id( $attributes ) . ' class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '">
+			' . $content . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card/block.js

@@ -0,0 +1,78 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = [ 'areoi/card-header', 'areoi/card-body', 'areoi/card-footer', 'areoi/list-group', 'core/image', 'core/video', 'core/post-featured-image' ];
+const BLOCKS_TEMPLATE = [
+    [ 'areoi/card-header', {} ],
+    [ 'areoi/card-body', {} ],
+    [ 'areoi/card-footer', {} ]
+];
+
+const blockIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"/></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 } );
+        }
+
+        const classes = [
+            'card',
+            attributes.background,
+            attributes.text_color,
+            attributes.border_color
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+
+        const tabDevice = ( tab ) => {
+            return (
+                <div>
+                    { areoi.DisplayVisibility( areoi, attributes, onChange, tab ) }
+                </div>
+            );
+        };
+
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'card' ) }
+
+                { !attributes.preview &&
+                    <div { ...blockProps } data-anchor={ attributes.anchor ? ' : #' + attributes.anchor : '' }>
+                        <areoi.editor.InspectorControls key="setting">
+
+                            <areoi.components.PanelBody title={ 'Settings' } initialOpen={ false }>
+                                { areoi.Colors( areoi, attributes, onChange ) }
+                            </areoi.components.PanelBody>
+
+                            { areoi.ResponsiveTabPanel( tabDevice, meta, props ) }
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+});

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card/block.json

@@ -0,0 +1,74 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/card",
+	"title": "Card",
+	"category": "areoi-components",
+	"description": "Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+
+		"background": {
+			"type": "string",
+			"default": null
+		},
+		"text_color": {
+			"type": "string",
+			"default": null
+		},
+		"border_color": {
+			"type": "string",
+			"default": null
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/card/index.css

@@ -0,0 +1,7 @@
+.wp-block-areoi-card {
+	padding: 0;
+}
+.wp-block-areoi-card.is-selected,
+.has-child-selected.wp-block-areoi-card {
+	padding: 28px 15px;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/carousel-item.php

@@ -0,0 +1,23 @@
+<?php
+function areoi_render_block_carousel_item( $attributes, $content ) 
+{
+	$class 			= 	trim( 
+		areoi_get_class_name_str( array( 
+			'carousel-item',
+			( !empty( $attributes['className'] ) ? $attributes['className'] : '' ),
+		) ) 
+		. ' ' . 
+		areoi_get_display_class_str( $attributes, 'block' ) 
+	);
+
+	$output = '
+		<div 
+			' . areoi_return_id( $attributes ) . '
+			class="' . areoi_format_block_id( $attributes['block_id'] ) . ' ' . $class . '"
+		>
+			' . $content . ' 
+		</div>
+	';
+
+	return $output;
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/carousel-item/block.js

@@ -0,0 +1,108 @@
+import * as areoi from '../_components/Core.js';
+import meta from './block.json';
+
+const ALLOWED_BLOCKS = null;
+const BLOCKS_TEMPLATE = [
+    [ 'areoi/strip', {
+        height_dimension_xs: '800',
+        height_unit_xs: 'px'
+    }, [
+        [ 'areoi/container', {
+            height_dimension_xs: '100',
+            height_unit_xs: '%'
+        }, [
+            [ 'areoi/row', {
+                height_dimension_xs: '100',
+                height_unit_xs: '%',
+                vertical_align: 'align-items-center',
+                horizontal_align: 'justify-content-center',
+            }, [
+                [ 'areoi/column', {
+                    col_xs: 'col-6'
+                } ]
+            ] ]
+        ] ]
+    ]]
+];
+
+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="M2,7h4v10H2V7z M7,19h10V5H7V19z M9,7h6v10H9V7z M18,7h4v10h-4V7z"/></svg>;
+
+areoi.blocks.registerBlockType( meta, {
+    icon: blockIcon,
+    icon: areoi.blockIcon,
+    edit: props => {
+        const {
+            attributes,
+            setAttributes,
+            clientId
+        } = props;
+
+        setAttributes( attributes );
+
+        const { block_id } = attributes;
+        if ( !block_id ) {
+            setAttributes( { block_id: clientId } );
+        }
+
+        const parentBlocks      = wp.data.select( 'core/block-editor' ).getBlockParents(props.clientId); 
+        const parentAttributes  = wp.data.select('core/block-editor').getBlocksByClientId(parentBlocks);
+        
+        var parent_id = false;
+        parentAttributes.forEach(element => {
+            if ( element.name == 'areoi/carousel' ) {
+                parent_id = element.attributes.block_id;
+            }
+        });
+        if ( parent_id ) {
+            setAttributes( { parent_id: parent_id } );
+        }
+
+        const classes = [
+            'carousel-item',
+            'active'
+        ];
+
+        const blockProps = areoi.editor.useBlockProps( {
+            className: areoi.helper.GetClassName( classes ),
+            style: { cssText: areoi.helper.GetStyles( attributes ) }
+        } );
+
+        function onChange( key, value ) {
+            setAttributes( { [key]: value } );
+        }
+ 
+        return (
+            <>
+                { areoi.DisplayPreview( areoi, attributes, onChange, 'carousel-item' ) }
+
+                { !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.TextControl 
+                                        label={ 'Interval' }
+                                        help="Add data-bs-interval to a .carousel-item to change the amount of time to delay between automatically cycling to the next item."
+                                        value={ attributes.interval }
+                                        onChange={ ( value ) => onChange( 'interval', value ) }
+                                    />
+                                </areoi.components.PanelRow>
+
+                                
+                            </areoi.components.PanelBody>
+                                
+                        </areoi.editor.InspectorControls>
+
+                        <areoi.editor.InnerBlocks template={ BLOCKS_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+                    </div>
+                }
+            </>
+        );
+    },
+    save: () => { 
+        return (
+            <areoi.editor.InnerBlocks.Content/>
+        );
+    },
+} );

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/carousel-item/block.json

@@ -0,0 +1,70 @@
+{
+	"apiVersion": 2,
+	"name": "areoi/carousel-item",
+	"title": "Carousel Item",
+	"parent": [ "areoi/carousel" ],
+	"category": "areoi-components",
+	"description": "Add as many carousel items to a carousel as you wish. Each carousel item can have different layouts and content.",
+	"textdomain": "default",
+	"keywords": [ "areoi", "bootstrap", "layout" ],
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	},
+	"attributes": {
+		"preview": {
+			"type": "boolean",
+			"default": false
+		},
+		"anchor": {
+			"type": "string",
+			"default": false
+		},
+		"block_id": {
+			"type": "string",
+			"default": null
+		},
+		"parent_id": {
+			"type": "string",
+			"default": null
+		},
+		"interval": {
+			"type": "string",
+			"default": 4000
+		},
+
+		"hide_xs": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_sm": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_md": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_lg": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xl": {
+			"type": "boolean",
+			"default": false
+		},
+		"hide_xxl": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": false,
+		"html": false
+	},
+	"editorScript": "areoi-blocks",
+    "editorStyle": "file:./index.css",
+    "style": "file:../../build/style.css"
+}

Wordpress/wordpress/wp-content/plugins/all-bootstrap-blocks/blocks/carousel-item/index.css

@@ -0,0 +1,8 @@
+.is-selected .wp-block-areoi-carousel-item,
+.has-child-selected .wp-block-areoi-carousel-item {
+    min-height: 40px;
+    padding: 28px 15px;
+    border:  1px dashed #ddd;
+    float: none !important;
+    margin-right: 0 !important;
+}