Skip to content

Commit

Permalink
Merge pull request #870 from publishpress/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@htmgarcia
htmgarcia authored Feb 14, 2022
2 parents 1e14814 + 30ad8b7 commit f62fa1e
Show file tree
Hide file tree
Showing 20 changed files with 1,020 additions and 103 deletions.
4 changes: 2 additions & 2 deletions src/advanced-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Plugin Name: PublishPress Blocks
* Plugin URI: https://publishpress.com/blocks/
* Description: PublishPress Blocks has everything you need to build professional websites with the Gutenberg editor.
* Version: 2.11.4
* Version: 2.11.5
* Tested up to: 5.9
* Author: PublishPress
* Author URI: https://publishpress.com/
Expand Down Expand Up @@ -39,7 +39,7 @@
defined('ABSPATH') || die;

if (! defined('ADVANCED_GUTENBERG_VERSION')) {
define('ADVANCED_GUTENBERG_VERSION', '2.11.4');
define('ADVANCED_GUTENBERG_VERSION', '2.11.5');
}

if (! defined('ADVANCED_GUTENBERG_PLUGIN')) {
Expand Down
134 changes: 128 additions & 6 deletions src/assets/blocks/advtabs/block.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
const { Component, Fragment } = wpElement;
const { registerBlockType, createBlock } = wpBlocks;
const { InspectorControls, RichText, PanelColorSettings, InnerBlocks } = wpBlockEditor;
const { Dashicon, Tooltip, PanelBody, RangeControl, SelectControl, Button } = wpComponents;
const { Dashicon, Tooltip, PanelBody, RangeControl, SelectControl, Button, TextControl } = wpComponents;
const { withDispatch, select, dispatch } = wp.data;
const { compose } = wpCompose;
const { times } = lodash;
Expand Down Expand Up @@ -103,6 +103,7 @@
pid: `advgb-tabs-${this.props.clientId}`,
} );
this.updateTabHeaders();
this.updateTabAnchors();
this.props.resetOrder();
}

Expand Down Expand Up @@ -146,6 +147,35 @@
childBlocks.forEach( childBlockId => updateBlockAttributes( childBlockId, {tabHeaders: tabHeaders} ) );
}

updateTabsAnchor(anchor, index) {
const { attributes, setAttributes, clientId } = this.props;
const { tabAnchors } = attributes;
const { updateBlockAttributes } = !wp.blockEditor ? dispatch( 'core/editor' ) : dispatch( 'core/block-editor' );
const { getBlockOrder } = !wp.blockEditor ? select( 'core/editor' ) : select( 'core/block-editor' );
const childBlocks = getBlockOrder(clientId);

let newAnchors = tabAnchors.map( ( item, idx ) => {
if ( index === idx ) {
item = anchor;
}
return item;
} );

setAttributes( { tabAnchors: newAnchors} );
updateBlockAttributes(childBlocks[index], {anchor: anchor});
this.updateTabAnchors();
}

updateTabAnchors() {
const { attributes, clientId } = this.props;
const { tabAnchors } = attributes;
const { updateBlockAttributes } = !wp.blockEditor ? dispatch( 'core/editor' ) : dispatch( 'core/block-editor' );
const { getBlockOrder } = !wp.blockEditor ? select( 'core/editor' ) : select( 'core/block-editor' );
const childBlocks = getBlockOrder(clientId);

childBlocks.forEach( childBlockId => updateBlockAttributes( childBlockId, {tabAnchors: tabAnchors} ) );
}

addTab() {
const { attributes, setAttributes, clientId } = this.props;
const { insertBlock } = !wp.blockEditor ? dispatch( 'core/editor' ) : dispatch( 'core/block-editor' );
Expand All @@ -156,6 +186,10 @@
tabHeaders: [
...attributes.tabHeaders,
'Tab header'
],
tabAnchors: [
...attributes.tabAnchors,
''
]
} );
this.props.resetOrder();
Expand All @@ -169,7 +203,8 @@

removeBlock(childBlocks[index], false);
setAttributes( {
tabHeaders: attributes.tabHeaders.filter( (vl, idx) => idx !== index )
tabHeaders: attributes.tabHeaders.filter( (vl, idx) => idx !== index ),
tabAnchors: attributes.tabAnchors.filter( (vl, idx) => idx !== index )
} );
this.updateTabsAttr({tabActive: 0});
this.props.resetOrder();
Expand All @@ -180,6 +215,7 @@
const { viewport } = this.state;
const {
tabHeaders,
tabAnchors,
tabActive,
tabActiveFrontend,
tabsStyleD,
Expand Down Expand Up @@ -364,7 +400,7 @@
borderRadius: borderRadius + 'px',
} }
>
<a style={ { color: headerTextColor } }
<a id={tabAnchors[index]} style={ { color: headerTextColor } }
onClick={ () => {
this.props.updateTabActive( index );
} }
Expand All @@ -386,6 +422,14 @@
</span>
</Tooltip>
)}
{advgbBlocks.advgb_pro === '1' && (
<TextControl
placeholder={ __( 'HTML Anchor', 'advanced-gutenberg' ) }
value={ tabAnchors[index] }
onChange={ ( value ) => this.updateTabsAnchor(value, index) }
className="advgb-floating-anchor-field"
/>
) }
</li>
) ) }
<li className="advgb-tab advgb-add-tab"
Expand Down Expand Up @@ -523,7 +567,15 @@
isTransform: {
type: 'boolean',
default: false
}
},
tabAnchors: {
type: 'array',
default: [
'',
'',
''
]
},
};

registerBlockType( 'advgb/adv-tabs', {
Expand Down Expand Up @@ -579,6 +631,7 @@
save: function ( { attributes } ) {
const {
tabHeaders,
tabAnchors,
tabActiveFrontend,
tabsStyleD,
tabsStyleT,
Expand All @@ -591,7 +644,7 @@
borderWidth,
borderColor,
borderRadius,
pid
pid,
} = attributes;
const blockClass = [
`advgb-tabs-wrapper`,
Expand All @@ -614,7 +667,7 @@
borderRadius: borderRadius + 'px',
} }
>
<a href={`#advgb-tabs-tab${index}`}
<a id={tabAnchors[index]} href={`#advgb-tabs-tab${index}`}
style={ { color: headerTextColor } }
>
<RichText.Content
Expand All @@ -641,6 +694,75 @@
);
},
deprecated: [
{
attributes: {
...tabBlockAttrs,
},
save: function ( { attributes } ) {
const {
tabHeaders,
tabActiveFrontend,
tabsStyleD,
tabsStyleT,
tabsStyleM,
headerBgColor,
headerTextColor,
bodyBgColor,
bodyTextColor,
borderStyle,
borderWidth,
borderColor,
borderRadius,
pid
} = attributes;
const blockClass = [
`advgb-tabs-wrapper`,
`advgb-tab-${tabsStyleD}-desktop`,
`advgb-tab-${tabsStyleT}-tablet`,
`advgb-tab-${tabsStyleM}-mobile`,
pid
].filter( Boolean ).join( ' ' );

return (
<div className={blockClass} data-tab-active={tabActiveFrontend}>
<ul className="advgb-tabs-panel">
{tabHeaders.map( ( header, index ) => (
<li key={ index } className="advgb-tab"
style={ {
backgroundColor: headerBgColor,
borderStyle: borderStyle,
borderWidth: borderWidth + 'px',
borderColor: borderColor,
borderRadius: borderRadius + 'px',
} }
>
<a href={`#advgb-tabs-tab${index}`}
style={ { color: headerTextColor } }
>
<RichText.Content
tagName="span"
value={ header }
/>
</a>
</li>
) ) }
</ul>
<div className="advgb-tab-body-wrapper"
style={ {
backgroundColor: bodyBgColor,
color: bodyTextColor,
borderStyle: borderStyle,
borderWidth: borderWidth + 'px',
borderColor: borderColor,
borderRadius: borderRadius + 'px',
} }
>
<InnerBlocks.Content />
</div>
</div>
);
}
},
{
attributes: {
...tabBlockAttrs,
Expand Down
78 changes: 75 additions & 3 deletions src/assets/blocks/advtabs/tab.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

componentDidMount() {
const { attributes, setAttributes } = this.props;
const {id, tabHeaders} = attributes;
const {id, tabHeaders, tabAnchors} = attributes;

if ( ! this.props.attributes.uniqueID ) {
this.props.setAttributes( {
Expand All @@ -65,6 +65,13 @@
setAttributes({
header: tabHeaders[id]
})

if(typeof tabAnchors !== 'undefined'){
setAttributes({
anchor: tabAnchors[id]
});
}

}

render() {
Expand Down Expand Up @@ -116,6 +123,9 @@
header: {
type: 'html',
},
anchor: {
type: 'string',
},
tabActive: {
type: 'number',
default: 0,
Expand All @@ -132,6 +142,14 @@
__( 'Tab 3', 'advanced-gutenberg' ),
]
},
tabAnchors: {
type: 'array',
default: [
'',
'',
''
]
},
uniqueID: {
type: 'string',
default: '',
Expand All @@ -143,7 +161,7 @@
keywords: [ __( 'tab', 'advanced-gutenberg' ) ],
edit: TabItemEdit,
save: function( { attributes } ) {
const {id, uniqueID, header} = attributes;
const {id, uniqueID, header, anchor } = attributes;

const tabClassName = [
`advgb-tab-${uniqueID}`,
Expand All @@ -152,14 +170,68 @@

return (
<div className="advgb-tab-body-container">
<div className="advgb-tab-body-header">{header}</div>
<div className={`advgb-tab-body-header advgb-tab-class-${anchor}`}>{header}</div>
<div className={tabClassName} aria-labelledby={`advgb-tabs-tab${id}`}>
<InnerBlocks.Content />
</div>
</div>
);
},
deprecated: [
{
attributes: {
id: {
type: 'number',
default: 0
},
pid: {
type: 'string',
},
header: {
type: 'html',
},
tabActive: {
type: 'number',
default: 0,
},
changed: {
type: 'boolean',
default: false,
},
tabHeaders: {
type: 'array',
default: [
__( 'Tab 1', 'advanced-gutenberg' ),
__( 'Tab 2', 'advanced-gutenberg' ),
__( 'Tab 3', 'advanced-gutenberg' ),
]
},
uniqueID: {
type: 'string',
default: '',
}
},
supports: {
reusable: false,
},
save: function( { attributes } ) {
const {id, uniqueID, header} = attributes;

const tabClassName = [
`advgb-tab-${uniqueID}`,
'advgb-tab-body'
].filter(Boolean).join(' ');

return (
<div className="advgb-tab-body-container">
<div className="advgb-tab-body-header">{header}</div>
<div className={tabClassName} aria-labelledby={`advgb-tabs-tab${id}`}>
<InnerBlocks.Content />
</div>
</div>
);
}
},
{
attributes: {
pid: {
Expand Down
Loading

0 comments on commit f62fa1e

Please sign in to comment.