feat: new horizontal scroller block (#2507)

* initial commit

* fixes

* pass components instead of function

* it's now fast since we are now calling just a function

* added conditional rendering

* less block wrapper props

* un-hook dynamic content in typography

* reverse conditional styling

* fix: data align attribute showing even if not set

* pass hover state and client id

* margin bottom component no longer rerenders

* fix: duplicating blocks do not update the uniqueId in other components (does not trigger hook changes)

* refactored panel advanced setting

* split typography styles into individual components

* updated color palette to use useSettings to prevent rerendering

* added hasToggle to refactored panels

* lessened the use of useBlockHoverState

* refactored some components to prevent rerenders

* added selectors to useBlockAttributesContext

* only show mediaUpload when selected and use isHovered show showing image tooltips

* revamped button icon popover, simplified it

* added selectors to useBlockAttributesContext

* refactored so typography won't rerender if other attributes change

* memoed controls

* only show bottom margin resizer on isHovered

* updated withBlockWrapperIsHovered to be same with withBlockWrapper

* show only column resize handlers when hovered over the block

* removed delay in checking isSelected

* render only inspector stuff when selected

* refactored useShowMoversGestures to be a simpler useIsHovered

* useDispatch cleanup

* fixed icon from rerendering repeatedly because of prependRender

* margin bottom should only render if hovered

* simpler isHovered using React synthetic events

* added new eslint rule for useDispatch

* use onMouseOver instead of onMouseEnter because children swallow it

* added conditions so we can trim out some operations if not necessary

* bring back old isHover implementation

* Now using useCallback

* updated progress style generation

* added keys and updated some style implementations

* refactor (responsive-control): move tablet/mobile arrangement filter

* refactored color control

* wp 6.0 style support for the new color picker

* fixed image filter padding

* fixed font size adding a reset button to the typography

* removed unused global style controller

* refactored button icon popover and font family control to use DropDown and FormTokenField

* refactored icon control to use DropDown component

* New filters for Toolset

* Fix: inverse the use-theme-margins behavior in headings block. fixes #2190

* refactored highlight button to a dropdown

* feat (horizontal-scroller): add and register new block

* feature (horizontal-scroller): enable mouse grabbing; add frontend scripts

* Added feat/performance-2 to plugin building

* fix: fit content no longer working in editor

(cherry picked from commit 3d5542b)

* Fix/hover states (#2523)

* fix (hover-state-hoc): fix hover state class

* try: re-commit

* try re-commit

Co-authored-by: Benjamin Intal <bfintal@gmail.com>

* fix (advance-style): fix position styling for right (#2527)

* fix (bottom-separator): fix styling not applied (#2529)

* fix (heading): heading tag default reset (#2521)

* Update src/block/horizontal-scroller/block.json

* fix (overlay-gradient): fix reset button not showing for gradient overlay (#2526)

* fix (button): capitalize transparent label value (#2538)

* fix (column-block): fix incorrect block added when no inner blocks (#2542)

* fix (icon): render premium icon controls (#2539)

* fix (icon): render premium icon controls

* fix (premium-controls): move inside react component to properly render the controls

* fix (premium-controls): move inside react component to properly render the controls

* Update src/block-components/icon/edit.js [skip ci]

Co-authored-by: Benjamin Intal <bfintal@gmail.com>

* fix (v2-blocks): fix v2 block missing toggle for style controls (#2532)

* fix (advance-style): fix position selector (#2544)

* fix (advance-style): fix position selector

* Revert "fix (advance-style): fix position selector"

This reverts commit a6d0f58.

* fix (advance-style): remove position selector

* fix (advance-style): fix zindex selector (#2543)

* fix (units): mobile and tablet units not being followed correctly. Fixes #2547

* fix (feature-block): block error (#2553)

* fix (posts): feature image should not upload on click (#2549)

* fix (toc): fix text style issues not applied on frontend (#2550)

* fix (toc): fix text style issues not applied on frontend

* fix (toc-block): update property passing; removed options

* fix (separator-block): incorrect use memo usage (#2552)

* fix (copy-paste-issue): reset generatedCss when uniqueId changes (#2554)

* fix (image-block): fix image resizer closing upon updating value (#2545)

* fix (image-block): fix image resizer closing upon updating value

* Update src/block-components/image/editor.scss [skip ci]

* Update src/components/resizer-tooltip/index.js [skip ci]

* Update src/block/image/edit.js [skip ci]

Co-authored-by: Benjamin Intal <bfintal@gmail.com>

* fix (text control): right border of input gets clipped in free version

* fix (shape-control): full-width shape options (#2558)

* fix (number-block): block error when refreshing in editor (#2556)

* fix (typography): typography popover doesn't close, revert font family dropdown (#2557)

* fix (shadow): popover width corrected (#2559)

* fix (typography): revert dynamic content fetcher (#2541)

* fix (horizontal-scroller): units not applied for size styles

* fix (horizontal-scroller): fix hidden scroller on mac on the editor

* refactor (horizontal-scroller): remove resizer

* fix (horizontal-scroller): add example and fix empty state addition block

* fix (horizontal-scrolling): overflowing content

* fix (horizontal-scroller): fix reset snapping button

* fix (horizontal-scroller): fix template locking

* fix (horizontal-scroller): fix column width sizes

* fix (horizontal-scroller): tablet column arrangement

* fix (horizontal-scroller): fix nested horizontal scroller

* fix (horizontal-scroller): row/column wrapping width issue

* fix: dragging with mouse on the frontend

* fix (horizontal-scroller): fix widget width

* fix: simplified frontend script

* fix (horizontal-scroller): address width issue when nesting

* added icon

* fix (horizontal-scroller): remove compatibility with 2021 theme

* update (horizontal-scroller): change column slider max to 10

* refactor (horizontal-scroller): add scrollbar control

* refactor (horizontal-scroller): fix row group on 2021

* refactor (horizontal-scroller): move out editor controls and styles

* refactor (horizontal-scroller): add scrollbar controls

* refactor (horizontal-scroller): refactor horizontal scroller; add scrollbar styles

* fix: safari issue when dragging, highlighting the content can drag the scroller

* removed newly introduced block components + simplified style generation + fixed scrollbar border radius

---------

Co-authored-by: Benjamin Intal <bfintal@gmail.com>

.config/webpack.config.dev.js

@@ -176,6 +176,7 @@ module.exports = [
 		'frontend_block_video_popup': path.resolve( __dirname, '../src/block/video-popup/frontend-video-popup.js' ),
 		'frontend_block_progress_circle': path.resolve( __dirname, '../src/block/progress-circle/frontend-progress-circle.js' ),
 		'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ),
+		'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
 	},
 
 	output: {

.config/webpack.config.prod.js

@@ -161,6 +161,7 @@ module.exports = [
 		'frontend_block_video_popup': path.resolve( __dirname, '../src/block/video-popup/frontend-video-popup.js' ),
 		'frontend_block_progress_circle': path.resolve( __dirname, '../src/block/progress-circle/frontend-progress-circle.js' ),
 		'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ),
+		'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
 	},
 
 	output: {

plugin.php

@@ -175,6 +175,7 @@ function stackable_notice_gutenberg_plugin_ignore() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/block/map/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/block/progress-bar/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/block/progress-circle/index.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/block/horizontal-scroller/index.php' );
 
 /**
  * Welcome screen.

src/block-components/content-align/attributes.js

@@ -1,9 +1,10 @@
-export const addAttributes = attrObject => {
+export const addAttributes = ( attrObject, options = {} ) => {
+	const { columnFit = '' } = options
 	attrObject.add( {
 		attributes: {
 			columnFit: {
 				type: 'boolean',
-				default: '',
+				default: columnFit,
 			},
 			columnFitAlign: {
 				type: 'string',

src/block-components/content-align/column-settings-button.js

@@ -10,7 +10,7 @@ import { useBlockEditContext } from '@wordpress/block-editor'
 import { dispatch, select } from '@wordpress/data'
 import { useLocalStorage } from '~stackable/util'
 
-export const ColumnsControl = () => {
+export const ColumnsControl = ( { sliderMax = 6 } ) => {
 	const { clientId } = useBlockEditContext()
 	const {
 		numInnerBlocks, innerBlocks,
@@ -51,7 +51,7 @@ export const ColumnsControl = () => {
 		<AdvancedRangeControl
 			label={ __( 'Columns', i18n ) }
 			min={ 1 }
-			sliderMax={ 6 }
+			sliderMax={ sliderMax }
 			placeholder="1"
 			value={ numInnerBlocks }
 			onChange={ setColumns }

src/block-components/content-align/use-content-align.js

@@ -3,10 +3,10 @@
  */
 import classnames from 'classnames'
 
-export const getContentAlignmentClasses = attributes => {
+export const getContentAlignmentClasses = ( attributes, blockName = 'column' ) => {
 	return classnames(
 		'stk-content-align',
-		`stk-${ attributes.uniqueId }-column`,
+		`stk-${ attributes.uniqueId }-${ blockName }`,
 		{
 			'stk--fit-content': attributes.columnFit,
 			alignwide: attributes.innerBlockContentAlign === 'alignwide', // This will align the columns inside.

src/block-components/index.js

@@ -8,6 +8,7 @@ export * from './conditional-display'
 export * from './container-div'
 export * from './column'
 export * from './content-align'
+export * from './content-align/column-settings-button'
 export * from './custom-attributes'
 export * from './custom-css'
 export * from './effects-animations'