Skip to content

Commit c8d4135

Browse files
vmc08bfintal
vmc08
and
bfintal
authored
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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]>
1 parent 1b23184 commit c8d4135

27 files changed

+982
-99
lines changed

‎.config/webpack.config.dev.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ module.exports = [
176176
'frontend_block_video_popup': path.resolve( __dirname, '../src/block/video-popup/frontend-video-popup.js' ),
177177
'frontend_block_progress_circle': path.resolve( __dirname, '../src/block/progress-circle/frontend-progress-circle.js' ),
178178
'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ),
179+
'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
179180
},
180181

181182
output: {

‎.config/webpack.config.prod.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ module.exports = [
161161
'frontend_block_video_popup': path.resolve( __dirname, '../src/block/video-popup/frontend-video-popup.js' ),
162162
'frontend_block_progress_circle': path.resolve( __dirname, '../src/block/progress-circle/frontend-progress-circle.js' ),
163163
'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ),
164+
'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
164165
},
165166

166167
output: {

‎package-lock.json

Lines changed: 33 additions & 62 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugin.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ function stackable_notice_gutenberg_plugin_ignore() {
175175
require_once( plugin_dir_path( __FILE__ ) . 'src/block/map/index.php' );
176176
require_once( plugin_dir_path( __FILE__ ) . 'src/block/progress-bar/index.php' );
177177
require_once( plugin_dir_path( __FILE__ ) . 'src/block/progress-circle/index.php' );
178+
require_once( plugin_dir_path( __FILE__ ) . 'src/block/horizontal-scroller/index.php' );
178179

179180
/**
180181
* Welcome screen.

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
export const addAttributes = attrObject => {
1+
export const addAttributes = ( attrObject, options = {} ) => {
2+
const { columnFit = '' } = options
23
attrObject.add( {
34
attributes: {
45
columnFit: {
56
type: 'boolean',
6-
default: '',
7+
default: columnFit,
78
},
89
columnFitAlign: {
910
type: 'string',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useBlockEditContext } from '@wordpress/block-editor'
1010
import { dispatch, select } from '@wordpress/data'
1111
import { useLocalStorage } from '~stackable/util'
1212

13-
export const ColumnsControl = () => {
13+
export const ColumnsControl = ( { sliderMax = 6 } ) => {
1414
const { clientId } = useBlockEditContext()
1515
const {
1616
numInnerBlocks, innerBlocks,
@@ -51,7 +51,7 @@ export const ColumnsControl = () => {
5151
<AdvancedRangeControl
5252
label={ __( 'Columns', i18n ) }
5353
min={ 1 }
54-
sliderMax={ 6 }
54+
sliderMax={ sliderMax }
5555
placeholder="1"
5656
value={ numInnerBlocks }
5757
onChange={ setColumns }

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
*/
44
import classnames from 'classnames'
55

6-
export const getContentAlignmentClasses = attributes => {
6+
export const getContentAlignmentClasses = ( attributes, blockName = 'column' ) => {
77
return classnames(
88
'stk-content-align',
9-
`stk-${ attributes.uniqueId }-column`,
9+
`stk-${ attributes.uniqueId }-${ blockName }`,
1010
{
1111
'stk--fit-content': attributes.columnFit,
1212
alignwide: attributes.innerBlockContentAlign === 'alignwide', // This will align the columns inside.

‎src/block-components/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export * from './conditional-display'
88
export * from './container-div'
99
export * from './column'
1010
export * from './content-align'
11+
export * from './content-align/column-settings-button'
1112
export * from './custom-attributes'
1213
export * from './custom-css'
1314
export * from './effects-animations'

0 commit comments

Comments
 (0)