How to use the @wordpress/hooks.applyFilters function in @wordpress/hooks

To help you get started, we’ve selected a few @wordpress/hooks examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github gambitph / Stackable / src / block / icon-list / index.js View on Github external
edit,
	save,

	// Stackable modules.
	modules: {
		'advanced-general': true,
		'advanced-block-spacing': true,
		// 'advanced-column-spacing': true,
		'advanced-responsive': true,
		'block-background': true,
		'block-separators': true,
		'block-title': true,
		'content-align': true,
		'block-designs': true,
		'custom-css': {
			default: applyFilters( 'stackable.icon-list.custom-css.default', '' ),
		},
	},
}

// If the user changes the icon in the inspector, change all icons
addFilter( 'stackable.icon-list.setAttributes', 'stackable/icon-list/icon', ( attributes, blockProps ) => {
	if ( typeof attributes.icon === 'undefined' ) {
		return attributes
	}

	range( 1, 21 ).forEach( index => {
		if ( blockProps.attributes[ `icon${ index }` ] ) {
			attributes[ `icon${ index }` ] = undefined
		}
	} )
github gambitph / Stackable / src / block / accordion / deprecated.js View on Github external
const mainClasses = classnames( [
		className,
		'ugb-accordion',
	], applyFilters( 'stackable.accordion.mainclasses_1_17_3', {
		[ `ugb-accordion--design-${ design }` ]: design !== 'basic',
		'ugb-accordion--open': openStart,
	}, design, props ) )

	const headingClasses = classnames( [
		'ugb-accordion__heading',
	], applyFilters( 'stackable.accordion.headingclasses_1_17_3', {
		[ `ugb--shadow-${ shadow }` ]: design !== 'plain' && shadow !== 3,
	}, design, props ) )

	const styles = applyFilters( 'stackable.accordion.styles_1_17_3', {
		main: {},
		heading: {
			borderRadius: design !== 'plain' && borderRadius !== 12 ? borderRadius : undefined,
			backgroundColor: design !== 'plain' && headingBackgroundColor ? headingBackgroundColor : undefined,
		},
		title: {
			color: headingColor ? headingColor : undefined,
		},
	}, design, props )

	return (
		<div className={ mainClasses } style={ styles.main } role="presentation">
			{ applyFilters( 'stackable.accordion.save.output.before_1_17_3', null, design, props ) }
			<div className={ headingClasses }
				role="button"
				tabIndex="0"
github gambitph / Stackable / src / block / accordion / edit.js View on Github external
const {
		design = 'basic',
		shadow = '',
		titleTag = '',
		title = '',
		openStart = false,
		showArrow = true,
	} = props.attributes

	const show = showOptions( props )

	const mainClasses = classnames( [
		className,
		'ugb-accordion--v2',
		`ugb-accordion--design-${ design }`,
	], applyFilters( 'stackable.accordion.mainclasses', {
		'ugb-accordion--open': props.isOpen === null ? openStart : props.isOpen,
	}, props ) )

	const itemClasses = classnames( [
		'ugb-accordion__item',
	], applyFilters( 'stackable.accordion.itemclasses', {}, props ) )

	const headingClasses = classnames( [
		'ugb-accordion__heading',
	], applyFilters( 'stackable.accordion.headingclasses', {
		[ `ugb--shadow-${ shadow }` ]: design === 'basic' && shadow !== '',
	}, design, props ) )

	return (
		<BlockContainer.Edit className={ mainClasses } blockProps={ props } render={ () => (
			<Fragment>
github gambitph / Stackable / src / block / count-up / save.js View on Github external
className="ugb-countup__description"
							value={ description }
						/>
					)
					const comps = {
						i,
						iconComp,
						titleComp,
						countComp,
						descriptionComp,
					}

					const boxClasses = classnames( [
						'ugb-countup__item',
						`ugb-countup__item${ i }`,
					], applyFilters( 'stackable.count-up.boxclasses', {}, design, props ) )

					return (
						<DivBackground
							className={ boxClasses }
							backgroundAttrName="column%s"
							blockProps={ props }
							showBackground={ show.columnBackground }
							key={ i }
						>
							{ applyFilters( 'stackable.count-up.save.output', (
								<Fragment>
									{ iconComp }
									{ design === 'plain-2' && countComp }
									{ titleComp }
									{ design !== 'plain-2' && countComp }
									{ descriptionComp }
github gambitph / Stackable / src / block / feature / save.js View on Github external
buttonShadow = 0,
		buttonHoverEffect = '',
		buttonIcon = '',
		buttonIconPosition = '',
		buttonDesign = 'basic',
		buttonHoverGhostToNormal = false,
		buttonNoFollow = false,
	} = props.attributes

	const show = showOptions( props )

	const mainClasses = classnames( [
		className,
		'ugb-feature--v2',
		`ugb-feature--design-${ design }`,
	], applyFilters( 'stackable.feature.mainclasses', {
		'ugb-feature--invert': show.reverseHorizontally && invert,
	}, design, props ) )

	const itemClasses = classnames( [
		'ugb-feature__item',
	], applyFilters( 'stackable.feature.itemclasses', {
		[ `ugb--shadow-${ shadow }` ]: show.columnBackground && ( design === 'basic' || design === 'half' ) && shadow !== '',
	}, props ) )

	const contentClasses = classnames( [
		'ugb-feature__content',
	], applyFilters( 'stackable.feature.contentclasses', {
		[ `ugb--shadow-${ shadow }` ]: show.columnBackground && design !== 'basic' && design !== 'half' && shadow !== '',
	}, props ) )

	const imageClasses = classnames( [
github gambitph / Stackable / src / block / image-box / deprecated.js View on Github external
align,
		columns,
		design = 'basic',
		borderRadius = 12,
		shadow = 3,
		imageHoverEffect = '',
		overlayOpacity = 7,
		arrow = '',
	} = props.attributes

	const mainClasses = classnames( [
		className,
		'ugb-image-box',
		'ugb-image-box--v3',
		`ugb-image-box--columns-${ columns }`,
	], applyFilters( 'stackable.image-box.mainclasses_1_17_3', {
		[ `ugb-image-box--design-${ design }` ]: design !== 'basic',
		[ `ugb-image-box--effect-${ imageHoverEffect }` ]: imageHoverEffect,
		[ `ugb-image-box--overlay-${ overlayOpacity }` ]: overlayOpacity !== 7,
		'ugb-image-box--arrow': arrow,
	}, design, props ) )

	const mainStyles = {
		textAlign: horizontalAlign ? horizontalAlign : undefined,
		'--overlay-color': overlayColor,
	}

	return (
		<div className={ mainClasses } style={ mainStyles }>
			{ applyFilters( 'stackable.image-box.save.output.before_1_17_3', null, design, props ) }
			{ range( 1, columns + 1 ).map( i => {
				const imageURL = attributes[ `imageURL${ i }` ]
github gambitph / Stackable / src / block / video-popup / deprecated.js View on Github external
backgroundColorDirection = 0,
		backgroundType = '',
		backgroundOpacity,
		design = 'basic',
		borderRadius = 12,
		shadow = 3,
	} = props.attributes

	const mainClasses = classnames( [
		className,
		'ugb-video-popup',
		'ugb-video-popup--v2',
		`ugb-video-popup--design-${ design }`,
		`ugb-video-popup--button-${ playButtonType }`,
		'ugb--background-opacity-' + ( 1 * Math.round( backgroundOpacity / 1 ) ),
	], applyFilters( 'stackable.video-popup.mainclasses_1_15_6', {
		'ugb--has-background': backgroundColor || backgroundImageURL,
		'ugb--has-background-image': backgroundImageURL,
		[ `ugb--shadow-${ shadow }` ]: design !== 'plain' && shadow !== 3,
		[ `ugb--has-background-gradient` ]: backgroundColorType === 'gradient',
		[ `ugb--has-background-video` ]: backgroundType === 'video',
	}, design, props ) )

	const mainStyle = {
		backgroundColor: backgroundColor ? backgroundColor : undefined,
		backgroundImage: backgroundImageURL ? `url(${ backgroundImageURL })` : undefined,
		'--ugb-background-color': backgroundImageURL || backgroundColorType === 'gradient' ? backgroundColor : undefined,
		'--ugb-background-color2': backgroundColorType === 'gradient' && backgroundColor2 ? backgroundColor2 : undefined,
		'--ugb-background-direction': backgroundColorType === 'gradient' ? `${ backgroundColorDirection }deg` : undefined,
		borderRadius: design !== 'plain' && borderRadius !== 12 ? borderRadius : undefined,
	}
github gambitph / Stackable / src / block / container / util.js View on Github external
export const showOptions = blockProps => {
	const {
		design = 'basic',
		align = '',
		showBlockBackground = false,
		blockInnerWidth = '',
	} = blockProps.attributes

	return applyFilters( 'stackable.container.show', {
		restrictContent: ( ! showBlockBackground && align === 'full' ) || ( showBlockBackground && blockInnerWidth === 'full' ),
		columnBackground: design !== 'plain',
		borderRadius: design !== 'plain' && ! ( ! showBlockBackground && align === 'full' ),
		image: design !== 'basic' && design !== 'plain',
	}, blockProps )
}
github gambitph / Stackable / src / block / columns / edit.js View on Github external
const columnCount = getColumnCountFromDesign( columns, design )
						setAttributes( {
							columns,
							...COLUMN_DEFAULTS[ columnCount ],
							...range( 6 ).reduce( ( cols, i ) => {
								return { ...cols, [ `tabletCoumns${ i + 1 }` ]: '' }
							}, {} ),
						} )
					} }
					min={ 2 }
					max={ design !== 'grid' ? 6 : 8 }
					placeholder="2"
					className="ugb--help-tip-general-columns"
				/>

				{ applyFilters( 'stackable.columns.edit.inspector.columns.after', null, props ) }

				<WhenResponsiveScreen screens={ [ 'desktop', 'tablet' ] }>
					<ColumnsWidthControl
						columns={ columnCount }
						design={ design }
						values={ range( columnCount ).map( i => {
							return props.attributes[ `columns${ i + 1 }` ]
						} ) }
						onChange={ columnWidths => {
							const atts = columnWidths.reduce( ( atts, width, i ) => {
								atts[ `columns${ i + 1 }` ] = width
								return atts
							}, {} )
							setAttributes( atts )
						} }
					/>
github htmlburger / carbon-fields / packages / core / hocs / with-validation / index.js View on Github external
const {
			id,
			field,
			markAsInvalid,
			markAsValid,
			lockSaving,
			unlockSaving
		} = props;

		switch ( effect.type ) {
			case 'VALIDATE':
				const { value, transient } = effect.payload;

				const hook = `carbon-fields.${ field.type }.validate`;
				const error = hasFilter( hook )
					? applyFilters( hook, field, value )
					: required( value );

				if ( error ) {
					if ( ! transient ) {
						markAsInvalid( id, error );
					}

					lockSaving( id );
				} else {
					if ( ! transient ) {
						markAsValid( id );
					}

					unlockSaving( id );
				}