Merge remote-tracking branch 'origin/release'

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stackable",
-	"version": "3.1.1",
+	"version": "3.1.2",
 	"private": true,
 	"description": "Blocks for everyone",
 	"author": "Benjamin Intal of Gambit",

plugin.php

@@ -6,7 +6,7 @@
  * Author: Gambit Technologies, Inc
  * Author URI: http://gambit.ph
  * Text Domain: stackable-ultimate-gutenberg-blocks
- * Version: 3.1.1
+ * Version: 3.1.2
  *
  * @package Stackable
  */
@@ -23,7 +23,7 @@
 }
 
 defined( 'STACKABLE_SHOW_PRO_NOTICES' ) || define( 'STACKABLE_SHOW_PRO_NOTICES', true );
-defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.1.1' );
+defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.1.2' );
 defined( 'STACKABLE_FILE' ) || define( 'STACKABLE_FILE', __FILE__ );
 defined( 'STACKABLE_I18N' ) || define( 'STACKABLE_I18N', 'stackable-ultimate-gutenberg-blocks' ); // Plugin slug.
 defined( 'STACKABLE_CLOUDFRONT_URL' ) || define( 'STACKABLE_CLOUDFRONT_URL', 'https://d3gt1urn7320t9.cloudfront.net' ); // CloudFront CDN URL

readme.txt

@@ -1,10 +1,10 @@
 === Stackable - Page Builder Gutenberg Blocks ===
 Contributors: bfintal, gambitph, freemius
 Tags: blocks, gutenberg, gutenberg blocks, page builder, WordPress blocks
-Requires at least: 5.6.5
-Tested up to: 5.8.2
+Requires at least: 5.8.2
+Tested up to: 5.9
 Requires PHP: 5.6
-Stable tag: 3.1.1
+Stable tag: 3.1.2
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -238,6 +238,14 @@ Nope. Stackable only works with Gutenberg, the new WordPress editor.
 
 == Changelog ==
 
+= 3.1.2 =
+* New: WordPress 5.9 compatibility & FSE compatibility
+* New: Added Overlay Colors to the Image block - now you can add solid or gradient colored overlays!
+* Fixed: Clicking the expand block link scrolls the screen down
+* Fixed: Inspector tabs went behind the visible area when scrolling down
+* Fixed: Clearing a text highlight color, resets the highlight type.
+* Fixed: Possible PHP error when a custom post used in Dynamic Content becomes unavailable
+
 = 3.1.1 =
 * New: Added link option to the Image Block
 * New: Added back ability to change the column order when columns collapse in mobile (premium)

src/block-components/icon/index.js

@@ -71,7 +71,7 @@ export const Icon = props => {
 			if ( event.target.closest( '.stk--inner-svg' ) ) {
 				event.stopPropagation()
 			}
-			if ( ! isElementDescendant( popoverEl.current, event.target ) && ! event.target.closest( '.components-popover' ) ) {
+			if ( ! event.target.closest( '.stk--inner-svg' ) && ! isElementDescendant( popoverEl.current, event.target ) && ! event.target.closest( '.components-popover' ) ) {
 				setIsOpen( false )
 			}
 		}

src/block-components/image/attributes.js

@@ -46,6 +46,46 @@ export const addAttributes = ( attrObject, options = {} ) => {
 				type: 'number',
 				default: '',
 			},
+
+			imageOverlayColorType: {
+				type: 'string',
+				default: '',
+			},
+			imageOverlayColor: {
+				type: 'string',
+				default: '',
+				stkHover: true,
+			},
+			imageOverlayColor2: {
+				type: 'string',
+				default: '',
+				stkHover: true,
+			},
+			imageOverlayOpacity: {
+				type: 'number',
+				default: '',
+				stkHover: true,
+			},
+			imageOverlayBlendMode: {
+				type: 'string',
+				default: '',
+			},
+			imageOverlayGradientDirection: {
+				type: 'number',
+				default: '',
+				stkHover: true,
+			},
+			imageOverlayGradientLocation1: {
+				type: 'number',
+				default: '',
+				stkHover: true,
+			},
+			imageOverlayGradientLocation2: {
+				type: 'number',
+				default: '',
+				stkHover: true,
+			},
+
 			imageFocalPoint: {
 				stkResponsive: true,
 				stkHover: true,

src/block-components/image/edit.js

@@ -16,17 +16,24 @@ import {
 	InspectorStyleControls,
 	PanelAdvancedSettings,
 	ShadowControl,
+	ColorPaletteControl,
+	AdvancedToolbarControl,
+	BlendModeControl,
+	ControlSeparator,
 } from '~stackable/components'
 import {
-	useBlockAttributes,
+	useBlockAttributes, useBlockHoverState,
 } from '~stackable/hooks'
+import { getAttributeName } from '~stackable/util'
 
 /**
  * WordPress dependencies
  */
 import { useBlockEditContext } from '@wordpress/block-editor'
 import { useDispatch, useSelect } from '@wordpress/data'
-import { __ } from '@wordpress/i18n'
+import {
+	sprintf, _x, __,
+} from '@wordpress/i18n'
 import { applyFilters } from '@wordpress/hooks'
 import { useMemo } from '@wordpress/element'
 
@@ -49,6 +56,7 @@ const Controls = props => {
 
 	const { updateBlockAttributes } = useDispatch( 'core/block-editor' )
 	const attributes = useBlockAttributes( clientId )
+	const [ state ] = useBlockHoverState()
 
 	// Get the image size urls.
 	const { imageData } = useSelect( select => {
@@ -204,6 +212,127 @@ const Controls = props => {
 				/>
 			}
 
+			<ControlSeparator />
+
+			<AdvancedToolbarControl
+				controls={ [
+					{
+						value: '',
+						title: __( 'Single', i18n ),
+					},
+					{
+						value: 'gradient',
+						title: __( 'Gradient', i18n ),
+					},
+				] }
+				attribute="imageOverlayColorType"
+				fullwidth={ false }
+				isSmall={ true }
+			/>
+
+			<ColorPaletteControl
+				label={
+					attributes.imageOverlayColorType === 'gradient'
+						? sprintf( _x( '%s #%d', 'option title', i18n ), __( 'Overlay Color', i18n ), 1 )
+						: __( 'Overlay Color', i18n )
+				}
+				attribute="imageOverlayColor"
+				hover="all"
+				hasTransparent={ attributes.imageOverlayColorType === 'gradient' }
+			/>
+			{ attributes.imageOverlayColorType === 'gradient' && (
+				<ColorPaletteControl
+					label={ sprintf( _x( '%s #%d', 'option title', i18n ), __( 'Overlay Color', i18n ), 2 ) }
+					attribute="imageOverlayColor2"
+					hover="all"
+					hasTransparent={ true }
+				/>
+			) }
+
+			<AdvancedRangeControl
+				label={ __( 'Overlay Opacity', i18n ) }
+				attribute="imageOverlayOpacity"
+				hover="all"
+				min={ 0 }
+				max={ 1 }
+				step={ 0.1 }
+				placeholder="0.3"
+			/>
+
+			<BlendModeControl
+				label={ __( 'Overlay Blend Mode', i18n ) }
+				attribute="imageOverlayBlendMode"
+				className="ugb--help-tip-background-blend-mode"
+			/>
+
+			{ attributes.imageOverlayColorType === 'gradient' && (
+				<ButtonIconPopoverControl
+					label={ __( 'Gradient Overlay Settings', i18n ) }
+					onReset={ () => {
+						updateBlockAttributes( clientId, {
+							[ getAttributeName( 'imageOverlayGradientDirection', 'desktop', state ) ]: '',
+							[ getAttributeName( 'imageOverlayGradientLocation1', 'desktop', state ) ]: '',
+							[ getAttributeName( 'imageOverlayGradientLocation2', 'desktop', state ) ]: '',
+							[ getAttributeName( 'imageOverlayGradientDirection', 'tablet', state ) ]: '',
+							[ getAttributeName( 'imageOverlayGradientLocation1', 'tablet', state ) ]: '',
+							[ getAttributeName( 'imageOverlayGradientLocation2', 'tablet', state ) ]: '',
+							[ getAttributeName( 'imageOverlayGradientDirection', 'mobile', state ) ]: '',
+							[ getAttributeName( 'imageOverlayGradientLocation1', 'mobile', state ) ]: '',
+							[ getAttributeName( 'imageOverlayGradientLocation2', 'mobile', state ) ]: '',
+						} )
+					} }
+					allowReset={
+						attributes[ getAttributeName( 'imageOverlayGradientDirection', 'desktop', state ) ] ||
+						attributes[ getAttributeName( 'imageOverlayGradientLocation1', 'desktop', state ) ] ||
+						attributes[ getAttributeName( 'imageOverlayGradientLocation2', 'desktop', state ) ] ||
+						attributes[ getAttributeName( 'imageOverlayGradientDirection', 'tablet', state ) ] ||
+						attributes[ getAttributeName( 'imageOverlayGradientLocation1', 'tablet', state ) ] ||
+						attributes[ getAttributeName( 'imageOverlayGradientLocation2', 'tablet', state ) ] ||
+						attributes[ getAttributeName( 'imageOverlayGradientDirection', 'mobile', state ) ] ||
+						attributes[ getAttributeName( 'imageOverlayGradientLocation1', 'mobile', state ) ] ||
+						attributes[ getAttributeName( 'imageOverlayGradientLocation2', 'mobile', state ) ]
+					}
+				>
+					<AdvancedRangeControl
+						label={ __( 'Gradient Direction (degrees)', i18n ) }
+						attribute="imageOverlayGradientDirection"
+						hover="all"
+						min={ 0 }
+						max={ 360 }
+						step={ 10 }
+						allowReset={ true }
+						placeholder="90"
+						className="ugb--help-tip-gradient-direction"
+					/>
+
+					<AdvancedRangeControl
+						label={ sprintf( __( 'Color %d Location', i18n ), 1 ) }
+						attribute="imageOverlayGradientLocation1"
+						hover="all"
+						sliderMin={ 0 }
+						max={ 100 }
+						step={ 1 }
+						allowReset={ true }
+						placeholder="0"
+						className="ugb--help-tip-gradient-location"
+					/>
+
+					<AdvancedRangeControl
+						label={ sprintf( __( 'Color %d Location', i18n ), 2 ) }
+						attribute="imageOverlayGradientLocation2"
+						hover="all"
+						sliderMin={ 0 }
+						max={ 100 }
+						step={ 1 }
+						allowReset={ true }
+						placeholder="100"
+						className="ugb--help-tip-gradient-location"
+					/>
+				</ButtonIconPopoverControl>
+			) }
+
+			<ControlSeparator />
+
 			<AdvancedFocalPointControl
 				attribute="imageFocalPoint"
 				label={ __( 'Focal point', i18n ) }

src/block-components/image/editor.scss

@@ -212,11 +212,34 @@
 	}
 	// Shapes.
 	&.stk-img--shape .stk-img-resizer-wrapper {
-		mask-mode: alpha;
-		mask-repeat: no-repeat;
-		mask-size: contain;
-		mask-position: center;
-		border-radius: none;
+		&,
+		&::after {
+			mask-mode: alpha;
+			mask-repeat: no-repeat;
+			mask-size: contain;
+			mask-position: center;
+			border-radius: none;
+		}
+	}
+
+	.stk-img-resizer-wrapper::after,
+	&.stk-img--gradient-overlay .stk-img-resizer-wrapper::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		opacity: var(--stk-gradient-overlay, 0.3);
+		z-index: 1;
+	}
+}
+
+// Don't do the hover effect when adjusting the hover effect.
+.stk-block:not(.stk--is-hovered) > .stk-img-wrapper {
+	// If not hovered, hide the overlay hover state.
+	&.stk-img--gradient-overlay:not(:hover) .stk-img-resizer-wrapper::before {
+		opacity: 0 !important;
+	}
+	&.stk-img--gradient-overlay:hover .stk-img-resizer-wrapper::after {
+		opacity: 0 !important;
 	}
 	// Firefox doesn't stretch SVG masks via attributes, stretching is done here. Fixes #246.
 	&.stk-image--shape-stretch .stk-img-resizer-wrapper {

src/block-components/image/image.js

@@ -45,6 +45,8 @@ const getImageWrapperClasses = props => {
 
 		// Shadow is only available when there is no shape.
 		[ `stk--shadow-${ props.shadow }` ]: ! props.shape && props.shadow,
+
+		'stk-img--gradient-overlay': props.hasGradientOverlay,
 	} )
 }
 
@@ -164,7 +166,8 @@ const Image = memo( props => {
 							if ( props.enableClickToEdit ) {
 								if ( event.target?.classList?.contains( 'stk-img' ) ||
 									event.target?.classList?.contains( 'stk-img-placeholder' ) ||
-									event.target?.classList?.contains( 'stk-img-resizer-wrapper' )
+									event.target?.classList?.contains( 'stk-img-resizer-wrapper' ) ||
+									event.target?.classList?.contains( 'stk-img-resizer' )
 								) {
 									obj.open()
 								}
@@ -350,6 +353,7 @@ Image.defaultProps = {
 	heightResizePosition: 'bottom',
 	allowReset: true,
 
+	hasGradientOverlay: false,
 	hasRemove: true,
 	hasTooltip: true,
 	onChange: () => {},
@@ -481,6 +485,7 @@ ImageContent.defaultProps = {
 	shapeStretch: false,
 	shadow: '',
 
+	hasGradientOverlay: false,
 	customWrapper: null,
 }