fix save and deprecated

Author: kaeizen

src/block/carousel/deprecated.js

@@ -10,12 +10,15 @@ import { withVersion } from '~stackable/higher-order'
 import { addFilter } from '@wordpress/hooks'
 import { semverCompare } from '~stackable/util'
 
-addFilter( 'stackable.carousel.save.slider', 'stackable/3.19.0', version => {
+addFilter( 'stackable.carousel.save.slider-props', 'stackable/3.19.0', ( sliderProps, version ) => {
 	if ( semverCompare( version, '<', '3.19.0' ) ) {
-		return {}
+		return {
+			...sliderProps,
+			tabIndex: undefined,
+		}
 	}
 
-	return { tabIndex: 0 }
+	return sliderProps
 } )
 
 const deprecated = [

src/block/carousel/save.js

@@ -81,7 +81,13 @@ export const Save = props => {
 							role="list"
 							data-autoplay={ attributes.autoplay ? ( attributes.autoplaySpeed || '4000' ) : undefined }
 							data-label-slide-of={ attributes.ariaLabelPrev || 'Slide %%d of %%d' }
-							{ ...applyFilters( 'stackable.carousel.save.slider', props.version ) }
+							{ ...applyFilters( 'stackable.carousel.save.slider-props', {
+								className: 'stk-block-carousel__slider',
+								role: 'list',
+								'data-autoplay': attributes.autoplay ? ( attributes.autoplaySpeed || '4000' ) : undefined,
+								'data-label-slide-of': attributes.ariaLabelPrev || 'Slide %%d of %%d',
+								tabIndex: 0,
+							}, props.version ) }
 						>
 							<InnerBlocks.Content />
 						</div>

src/block/horizontal-scroller/deprecated.js

@@ -10,12 +10,15 @@ import { addFilter } from '@wordpress/hooks'
 import compareVersions from 'compare-versions'
 import { semverCompare } from '~stackable/util'
 
-addFilter( 'stackable.horizontal-scroller.save.scroller', 'stackable/3.19.0', version => {
+addFilter( 'stackable.horizontal-scroller.save.scroller-props', 'stackable/3.19.0', ( scrollerProps, version ) => {
 	if ( semverCompare( version, '<', '3.19.0' ) ) {
-		return {}
+		return {
+			...scrollerProps,
+			tabIndex: undefined,
+		}
 	}
 
-	return { tabIndex: 0 }
+	return scrollerProps
 } )
 
 // Previously, our horizontal scroller always had the stk--fit-content class (which was wrong).

src/block/horizontal-scroller/save.js

@@ -55,8 +55,10 @@ export const Save = props => {
 			 { attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			 <CustomCSS.Content attributes={ attributes } />
 			<div
-				className={ contentClassNames }
-				{ ...applyFilters( 'stackable.horizontal-scroller.save.scroller', props.version ) }
+				{ ...applyFilters( 'stackable.horizontal-scroller.save.scroller-props', {
+					className: contentClassNames,
+					tabIndex: 0,
+				}, props.version ) }
 			>
 				<InnerBlocks.Content />
 			</div>

src/block/notification/deprecated.js

@@ -7,7 +7,6 @@ import { attributes } from './schema'
 /**
  * External dependencies
  */
-import { i18n } from 'stackable'
 import { withVersion } from '~stackable/higher-order'
 import compareVersions from 'compare-versions'
 import {
@@ -24,14 +23,15 @@ import { semverCompare } from '~stackable/util'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 
-addFilter( 'stackable.notification.save.close-button', 'stackable/3.19.0', version => {
+addFilter( 'stackable.notification.save.close-button-props', 'stackable/3.19.0', ( buttonProps, version ) => {
 	if ( semverCompare( version, '<', '3.19.0' ) ) {
-		return {}
+		return {
+			...buttonProps,
+			'aria-label': undefined,
+		}
 	}
 
-	return {
-		'aria-label': __( 'Close', i18n ),
-	}
+	return buttonProps
 } )
 
 // Version 3.8 added horizontal flex, this changes the stk--block-orientation-* to stk--block-horizontal-flex.

src/block/notification/save.js

@@ -6,7 +6,7 @@ import SVGCloseIcon from './images/close-icon.svg'
 /**
  * External dependencies
  */
-import { version as VERSION } from 'stackable'
+import { version as VERSION, i18n } from 'stackable'
 import { withVersion } from '~stackable/higher-order'
 import classnames from 'classnames/dedupe'
 import {
@@ -22,6 +22,7 @@ import {
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
 import { applyFilters } from '@wordpress/hooks'
@@ -78,7 +79,10 @@ export const Save = props => {
 				{ attributes.isDismissible &&
 					<button
 						className="stk-block-notification__close-button"
-						{ ...applyFilters( 'stackable.notification.save.close-button', props.version ) }
+						{ ...applyFilters( 'stackable.notification.save.close-button-props', {
+							className: 'stk-block-notification__close-button',
+							'aria-label': __( 'Close', i18n ),
+						}, props.version ) }
 					>
 						<SVGCloseIcon
 							width={ attributes.dismissibleSize || 16 }

src/block/progress-bar/deprecated.js

@@ -9,21 +9,20 @@ import {
 } from '~stackable/block-components'
 import { semverCompare } from '~stackable/util'
 
-import striptags from 'striptags'
-
 import { addFilter } from '@wordpress/hooks'
 
-const addAriaLabel = ( derivedAriaValue, version ) => {
+const addAriaLabel = ( divProps, version ) => {
 	if ( semverCompare( version, '<', '3.19.0' ) ) {
-		return {}
+		return {
+			...divProps,
+			'aria-label': undefined,
+		}
 	}
 
-	return {
-		'aria-label': derivedAriaValue ? striptags( derivedAriaValue ) : undefined,
-	}
+	return divProps
 }
 
-addFilter( 'stackable.progress-bar.accessibility', 'stackable/3.19.0', addAriaLabel )
+addFilter( 'stackable.progress-bar.div-props', 'stackable/3.19.0', addAriaLabel )
 
 const deprecated = [
 	{

src/block/progress-bar/save.js

@@ -70,13 +70,15 @@ export const Save = props => {
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ containerClassNames }>
 				<div
-					className={ divClassNames }
-					role="progressbar"
-					aria-valuemin="0"
-					aria-valuemax="100"
-					aria-valuenow={ progressValue }
-					aria-valuetext={ derivedAriaValue ? striptags( derivedAriaValue ) : undefined }
-					{ ...applyFilters( 'stackable.progress-bar.accessibility', derivedAriaValue, props.version ) }
+					{ ...applyFilters( 'stackable.progress-bar.div-props', {
+						className: divClassNames,
+						role: 'progressbar',
+						'aria-valuemin': '0',
+						'aria-valuemax': '100',
+						'aria-valuenow': progressValue,
+						'aria-valuetext': derivedAriaValue ? striptags( derivedAriaValue ) : undefined,
+						'aria-label': derivedAriaValue ? striptags( derivedAriaValue ) : undefined,
+					}, props.version ) }
 				>
 					<div className={ barClassNames }>
 						{ attributes.showText && (

src/block/progress-circle/deprecated.js

@@ -9,21 +9,20 @@ import {
 } from '~stackable/block-components'
 import { semverCompare } from '~stackable/util'
 
-import striptags from 'striptags'
-
 import { addFilter } from '@wordpress/hooks'
 
-const addAriaLabel = ( derivedAriaValue, version ) => {
+const addAriaLabel = ( divProps, version ) => {
 	if ( semverCompare( version, '<', '3.19.0' ) ) {
-		return {}
+		return {
+			...divProps,
+			'aria-label': undefined,
+		}
 	}
 
-	return {
-		'aria-label': derivedAriaValue ? striptags( derivedAriaValue ) : undefined,
-	}
+	return divProps
 }
 
-addFilter( 'stackable.progress-circle.accessibility', 'stackable/3.19.0', addAriaLabel )
+addFilter( 'stackable.progress-circle.div-props', 'stackable/3.19.0', addAriaLabel )
 
 const deprecated = [
 	{

src/block/progress-circle/save.js

@@ -66,13 +66,15 @@ export const Save = props => {
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ containerClassNames }>
 				<div
-					className={ divClassNames }
-					role="progressbar"
-					aria-valuemin="0"
-					aria-valuemax="100"
-					aria-valuenow={ progressValue }
-					aria-valuetext={ attributes.progressAriaValueText ? striptags( attributes.progressAriaValueText ) : undefined }
-					{ ...applyFilters( 'stackable.progress-circle.accessibility', attributes.progressAriaValueText, props.version ) }
+					{ ...applyFilters( 'stackable.progress-circle.div-props', {
+						className: divClassNames,
+						role: 'progressbar',
+						'aria-valuemin': '0',
+						'aria-valuemax': '100',
+						'aria-valuenow': progressValue,
+						'aria-valuetext': attributes.progressAriaValueText ? striptags( attributes.progressAriaValueText ) : undefined,
+						'aria-label': attributes.progressAriaValueText ? striptags( attributes.progressAriaValueText ) : undefined,
+					}, props.version ) }
 				>
 					<svg>
 						{ attributes.progressColorType === 'gradient' && (