diff --git a/core/Container/Container.php b/core/Container/Container.php index d06880f0c..a5d1244b2 100644 --- a/core/Container/Container.php +++ b/core/Container/Container.php @@ -801,6 +801,10 @@ public function to_json( $load ) { $container_data['fields'][] = $field_data; } + if ( isset( $_GET['cftab'] ) ) { + $container_data['settings']['current_tab'] = sanitize_text_field( $_GET['cftab'] ); + } + return $container_data; } diff --git a/packages/metaboxes/components/container/index.js b/packages/metaboxes/components/container/index.js index d5d7d348a..86fbbf0f1 100644 --- a/packages/metaboxes/components/container/index.js +++ b/packages/metaboxes/components/container/index.js @@ -40,12 +40,27 @@ class Container extends Component { const { container } = this.props; if ( this.isTabbed( container ) ) { - this.setState( { - currentTab: Object.keys( container.settings.tabs )[ 0 ] - } ); + const tabNames = Object.keys( container.settings.tabs ); + const currentTab = tabNames.includes( container.settings.current_tab ) ? container.settings.current_tab : tabNames[ 0 ]; + + this.setState( { currentTab } ); } } + /** + * Adds "cftab" query parameter to the current url. + * + * @param {string} tabName + * @return {void} + */ + addTabNameToUrl( tabName ) { + const url = new URL( window.location.href ); + + url.searchParams.set( 'cftab', tabName ); + + history.pushState( {}, '', url.href ); + } + /** * Returns whether the container uses tabs. * @@ -83,6 +98,8 @@ class Container extends Component { * @return {void} */ handleTabClick = ( tab ) => { + this.addTabNameToUrl( tab ); + this.setState( { currentTab: tab } );