Commit inicial - WordPress Análisis de Precios Unitarios

- WordPress core y plugins
- Tema Twenty Twenty-Four configurado
- Plugin allow-unfiltered-html.php simplificado
- .gitignore configurado para excluir wp-config.php y uploads

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/plugins/thrive-visual-editor/editor/js/notifications/actions.js

@@ -0,0 +1,77 @@
+const {applyDefaultRules, initializeNotificationEditor, _updateMainFrameVars, updatePreviewLink, updateNotificationSidebarOptions} = require( './utils' );
+module.exports = {
+	'tcb-ready': () => {
+		const $notificationWrapper = TVE.inner_$( TVE.identifier( 'notification' ) ),
+			$notificationContent = $notificationWrapper.find( '.notifications-content' );
+
+		$notificationWrapper.addClass( 'thrv_wrapper' );
+		$notificationContent.removeClass( 'thrv_wrapper' );
+
+		/* add the dataset of the default template when nothing else is set */
+		if ( typeof $notificationWrapper.attr( 'data-ct' ) === 'undefined' ) {
+			$notificationWrapper.attr( {
+				'data-ct': 'notification-0',
+				'data-ct-name': 'Default notification'
+			} );
+		}
+
+		const displayedState = $notificationWrapper.attr( 'data-state' );
+
+		/* Focus the notification element, open its Main Controls and update them */
+		TVE.Editor_Page.focus_element( $notificationWrapper );
+
+		initializeNotificationEditor( displayedState );
+		_updateMainFrameVars( displayedState );
+
+		updatePreviewLink();
+
+		/* Only display a set of allowed elements that can be added inside the Notification element */
+		const allowedElements = [ 'text', 'image', 'button', 'columns', 'contentbox', 'divider', 'icon', 'notification_message' ];
+
+		const hiddenElements = Object.keys( TVE.Elements ).filter( element => ! allowedElements.includes( element ) );
+
+		TVE.main.sidebar_toggle_elements( hiddenElements, false );
+
+		if ( TVE.stylesheet.cssRules.length === 0 ) {
+			applyDefaultRules( true )
+		}
+	},
+
+	'tcb.element.focus': $element => {
+		const isNotification = $element.is( TVE.identifier( 'notification' ) );
+		if ( isNotification ) {
+			/* Disable Margin Control for the Notification Element */
+			TVE.Components.layout.disable_extra_controls( [ 'top', 'right', 'bottom', 'left' ].map( side => 'margin-' + side ) );
+
+			/* Update available sidebar options for the Notification Element */
+			updateNotificationSidebarOptions( TVE.$body.hasClass( 'edit-mode-active' ) );
+		}
+
+		TVE.Components.layout.$el.find( '.tve-control[data-prop="width"] .tve-input-um[data-value="%"]' ).toggle( ! isNotification );
+		TVE.main.$( '.tve-active-element' ).addClass( 'no-states' );
+	},
+
+	'tcb.after-insert': $element => {
+		if ( $element.is( '.thrv-notification_message' ) ) {
+			$element.addClass( 'tcb-selector-no_save tcb-selector-no_clone' )
+		}
+
+		TVE.main.$( '.tve-active-element' ).addClass( 'no-states' );
+	},
+
+	/**
+	 * @param  $element
+	 */
+	'tcb_after_cloud_template': $element => {
+		if ( $element.is( TVE.identifier( 'notification' ) ) ) {
+			$element.addClass( 'notification-edit-mode' );
+
+			updatePreviewLink( $element.attr( 'data-state' ) );
+			initializeNotificationEditor( $element.attr( 'data-state' ) );
+
+			if ( $element.attr( 'data-ct' ) === 'notification--1' ) {
+				applyDefaultRules( false );
+			}
+		}
+	},
+};

wp-content/plugins/thrive-visual-editor/editor/js/notifications/components/_includes.js

@@ -0,0 +1,4 @@
+module.exports = {
+	Notification: require( './notification' ),
+	NotificationMessage: require( './notification-message' ),
+};

wp-content/plugins/thrive-visual-editor/editor/js/notifications/components/notification-message.js

@@ -0,0 +1,33 @@
+const typography = require( '../../main/views/components/typography' );
+
+module.exports = typography.extend( {
+	getTargetElement() {
+		return TVE.ActiveElement.add( TVE.ActiveElement.find( '.tve_editable' ) ).not( '.tcb-el-group' );
+	},
+	controls_init( controls ) {
+		typography.prototype.controls_init.apply( this, Array.from( arguments ) );
+
+		controls.LineSpacing.getElement = function () {
+			return TVE.ActiveElement;
+		};
+		controls.LineSpacing.readValues = function () {
+			const $element = this.getElement();
+
+			return {
+				top: $element.css( 'padding-top' ),
+				bottom: $element.css( 'padding-bottom' )
+			};
+		};
+		controls.LineSpacing.writeStyle = function ( css ) {
+			this.applyElementCss( css, TVE.ActiveElement, '', '' );
+		};
+
+		TVE.add_action( 'tcb.typography.notification_message.clear_formatting', () => {
+			TVE.ActiveElement[ 0 ].style.setProperty( 'padding-top', '0px', 'important' );
+			TVE.ActiveElement[ 0 ].style.setProperty( 'padding-bottom', '0px', 'important' );
+		} );
+	},
+	lineSpacingControl() {
+		return require( '../../main/views/controls/text/line-spacing' );
+	},
+} );

wp-content/plugins/thrive-visual-editor/editor/js/notifications/components/notification.js

@@ -0,0 +1,338 @@
+module.exports = TVE.Views.Base.component.extend( {
+	after_init() {
+		/* backwards compatibility stuff */
+		TVE.Editor_Page.editor.find( '.animated' ).removeClass( 'animated' );
+	},
+	controls_init( controls ) {
+		let startAnimation, displayAnimation, endAnimation;
+
+		/* Display Position Control  */
+		controls.DisplayPosition.input = function ( $element, dom ) {
+			const positionAttribute = dom.getAttribute( 'data-value' ),
+				verticalPosition = positionAttribute.split( '-' )[ 0 ];
+			let horizontalPosition = positionAttribute.split( '-' )[ 1 ];
+
+			if ( TVE.main.device === 'mobile' ) {
+				horizontalPosition = $element.attr( 'data-position' ).split( '-' )[ 1 ];
+			}
+
+			$element.attr( 'data-position', verticalPosition.concat( '-', horizontalPosition ) );
+
+			updateVerticalSpacing( $element );
+			updateHorizontalSpacing( $element );
+		};
+
+		controls.DisplayPosition.update = function ( $element ) {
+			let positionAttribute = $element.attr( 'data-position' );
+
+			this.$( '.items-9' ).removeClass( 'mobile' );
+			this.$( '.active' ).removeClass( 'active' );
+
+			if ( TVE.main.device === 'mobile' ) {
+				positionAttribute = positionAttribute.split( '-' )[ 0 ].concat( '-center' );
+				this.$( '.items-9' ).addClass( 'mobile' );
+			}
+
+			this.$( `[data-value=${positionAttribute}]` ).addClass( 'active' );
+		};
+
+		/* Vertical Spacing Control  */
+		controls.VerticalSpacing.input = function ( $element, dom ) {
+			/* Only allow numerical values */
+			if ( isNaN( dom.value ) ) {
+				controls.VerticalSpacing.setValue( 0 );
+			}
+
+			const verticalPosition = $element.attr( 'data-position' ).split( '-' )[ 0 ];
+			$element.head_css( {[ verticalPosition ]: dom.value + 'px'}, false, `${TVE.identifier( 'notification' )}[data-position*="${verticalPosition}"]`, true, '' );
+		};
+
+		controls.VerticalSpacing.update = function ( $element ) {
+			updateVerticalSpacing( $element );
+		};
+
+		/* Horizontal Spacing Control  */
+		controls.HorizontalSpacing.input = function ( $element, dom ) {
+			/* Only allow numerical values */
+			if ( isNaN( dom.value ) ) {
+				controls.VerticalSpacing.setValue( 0 );
+			}
+
+			const horizontalPosition = $element.attr( 'data-position' ).split( '-' )[ 1 ];
+			$element.head_css( {[ horizontalPosition ]: dom.value + 'px'}, false, `${TVE.identifier( 'notification' )}[data-position*="${horizontalPosition}"]`, true, '' );
+		};
+
+		controls.HorizontalSpacing.update = function ( $element ) {
+			updateHorizontalSpacing( $element );
+		};
+
+		/* Animation Direction Control  */
+		controls.AnimationDirection.input = function ( $element, dom ) {
+			$element.attr( 'data-animation', dom.value );
+			$element.toggleClass( 'tcb-animated', dom.value !== 'none' );
+
+			animateNotification( $element );
+		};
+
+		controls.AnimationDirection.update = function ( $element ) {
+			this.setValue( $element.attr( 'data-animation' ) );
+		};
+
+		/* Animation Time Control  */
+		controls.AnimationTime.input = function ( $element, dom ) {
+			$element.attr( 'data-timer', dom.value * 1000 );
+		};
+
+		controls.AnimationTime.change = function ( $element ) {
+			animateNotification( $element, true );
+		};
+
+		controls.AnimationTime.update = function ( $element ) {
+			let timerValue = $element.attr( 'data-timer' );
+
+			if ( timerValue < 0 ) {
+				$element.attr( 'data-timer', 3000 );
+			} else if ( timerValue > 10 ) {
+				timerValue = timerValue / 1000;
+			}
+			this.setValue( timerValue );
+		};
+
+		controls.VerticalPosition.applyStyles = function ( $element, dom ) {
+			const state = $element.attr( 'data-state' );
+			$element.find( `.notifications-content.notification-${state}` ).css( 'justify-content', dom.getAttribute( 'data-value' ) );
+		};
+
+		controls.VerticalPosition.update = function ( $element ) {
+			const state = $element.attr( 'data-state' );
+			let verticalPosition = $element.find( `.notifications-content.notification-${state}` ).css( 'justify-content' );
+			verticalPosition = verticalPosition === 'normal' ? 'flex-start' : verticalPosition;
+
+			this.setActive( verticalPosition );
+		};
+
+		controls.MaximumWidth.input = function ( $element, dom ) {
+			const state = $element.attr( 'data-state' );
+			this.applyElementCss( {'max-width': dom.value + 'px'}, $element.find( `.notifications-content.notification-${state}` ), '', '' )
+		};
+
+		controls.MaximumWidth.update = function ( $element ) {
+			const state = $element.attr( 'data-state' );
+
+			let maxWidth = $element.find( `.notifications-content.notification-${state}` ).css( 'max-width' ).split( 'px' )[ 0 ];
+			const width = $element.find( `.notifications-content.notification-${state}` ).css( 'width' ).split( 'px' )[ 0 ];
+
+			if ( maxWidth === 'none' ) {
+				maxWidth = width;
+				$element.find( `.notifications-content.notification-${state}` ).head_css( {'max-width': width + 'px'} );
+			}
+			this.setValue( maxWidth );
+		};
+
+		controls.MinimumHeight.input = function ( $element, dom ) {
+			const state = $element.attr( 'data-state' );
+			this.applyElementCss( {'min-height': dom.value + 'px'}, $element.find( `.notifications-content.notification-${state}` ), '', '' )
+		};
+
+		controls.MinimumHeight.update = function ( $element ) {
+			const state = $element.attr( 'data-state' );
+			this.setValue( $element.find( `.notifications-content.notification-${state}` ).css( 'min-height' ).split( 'px' )[ 0 ] );
+		};
+
+		/**
+		 * Animate the Notification in the editor (slide-out is only triggered by changing the AnimationTime value)
+		 *
+		 * @param  $element
+		 * @param  animationCanStop
+		 */
+		function animateNotification( $element, animationCanStop = false ) {
+			clearTimeouts();
+			setAnimation( $element );
+
+			const timer = $element.attr( 'data-timer' ),
+				animation = $element.attr( 'data-animation' );
+
+			$element.hide();
+			$element.addClass( 'editor-preview' );
+
+			/* Only allow animations to be stopped when they are triggered from the AnimationTime */
+			if ( animationCanStop ) {
+				TVE.inner_$( 'html, body' ).on( 'mousedown.notification', () => {
+					stopNotificationAnimation( $element );
+				} );
+
+				TVE.$( 'html, body' ).on( 'mousedown.notification_main', () => {
+					stopNotificationAnimation( $element );
+				} );
+			}
+
+			startAnimation = setTimeout( () => {
+				/* Slide in */
+				$element.show();
+				$element.removeAttr( 'data-animation' );
+
+				if ( animationCanStop ) {
+					/* Slide out */
+					displayAnimation = setTimeout( () => {
+						if ( animation !== 'none' ) {
+							setAnimation( $element );
+						} else {
+							$element.hide();
+						}
+						stopNotificationAnimation( $element );
+					}, timer );
+				} else {
+					setTimeout( () => {
+						$element.removeClass( 'editor-preview' );
+						setAnimation( $element );
+					}, 1000 )
+				}
+			}, 300 );
+		}
+
+		/**
+		 * End the current Notification animation
+		 *
+		 * @param  $element
+		 */
+		function stopNotificationAnimation( $element ) {
+			clearTimeouts();
+
+			endAnimation = setTimeout( () => {
+				$element.removeClass( 'editor-preview' );
+
+				if ( typeof $element.attr( 'data-animation' ) === 'undefined' ) {
+					setAnimation( $element );
+				}
+
+				$element.show();
+				TVE.inner_$( 'html, body' ).off( 'mousedown.notification' );
+				TVE.inner_$( 'html, body' ).off( 'mousedown.notification_main' );
+			}, 500 );
+		}
+
+		/**
+		 * Stop previous animations by clearing the timeouts
+		 */
+		function clearTimeouts() {
+			/* Stop previous animations by clearing the timeouts */
+			[ startAnimation, displayAnimation, endAnimation ].forEach( timeout => {
+				if ( typeof timeout !== 'undefined' ) {
+					clearTimeout( timeout );
+				}
+			} );
+		}
+
+		/**
+		 * Set animation on the Notification Element
+		 *
+		 * @param  $element
+		 */
+		function setAnimation( $element ) {
+			const animation = controls.AnimationDirection.$el.find( '.tve-select' )[ 0 ].value;
+
+			if ( animation !== 'none' ) {
+				$element.attr( 'data-animation', animation );
+			}
+		}
+
+		/**
+		 * @param  $element
+		 */
+		function updateVerticalSpacing( $element ) {
+			const position = $element.attr( 'data-position' ).split( '-' ),
+				verticalPosition = position[ 0 ];
+
+			/* Vertical Spacing Control Update */
+			if ( [ 'top', 'bottom' ].includes( verticalPosition ) ) {
+				controls.VerticalSpacing.$el.show();
+				controls.VerticalSpacing.$el.find( '.input-label' ).text( `${verticalPosition} spacing` );
+				controls.VerticalSpacing.setValue( $element.css( `${verticalPosition}` ).split( 'px' )[ 0 ] );
+			} else {
+				controls.VerticalSpacing.hide();
+			}
+		}
+
+		/**
+		 * @param  $element
+		 */
+		function updateHorizontalSpacing( $element ) {
+			const position = $element.attr( 'data-position' ).split( '-' ),
+				horizontalPosition = position[ 1 ];
+
+			/* Horizontal Spacing Control Update */
+			if ( ( [ 'left', 'right' ].includes( horizontalPosition ) ) && ( TVE.main.device !== 'mobile' ) ) {
+				controls.HorizontalSpacing.$el.show();
+				controls.HorizontalSpacing.setValue( $element.css( `${horizontalPosition}` ).split( 'px' )[ 0 ] );
+			} else {
+				controls.HorizontalSpacing.hide();
+			}
+		}
+	},
+
+	editNotifications() {
+		const $notificationWrapper = TVE.inner_$( TVE.identifier( 'notification' ) ),
+			currentState = $notificationWrapper.attr( 'data-state' ),
+			utils = require( '../utils' );
+
+		TVE.main.sidebar_extra.$( '.sidebar-item.add-element' ).show();
+		$notificationWrapper.find( '.tve-prevent-content-edit' ).removeClass( 'tve-prevent-content-edit' );
+
+		/* Update available sidebar options for the Notification Element */
+		utils.updateNotificationSidebarOptions( true );
+
+		TVE.main.EditMode.enter( $notificationWrapper, {
+			show_default_message: true,
+			can_insert_elements: true,
+			view_label: 'Editing Notification',
+			element_selectable: true,
+			restore_state: false,
+			states: [
+				{
+					label: 'Success',
+					value: 'success',
+					default: currentState === 'success',
+				},
+				{
+					label: 'Warning',
+					value: 'warning',
+					default: currentState === 'warning',
+				},
+				{
+					label: 'Error',
+					value: 'error',
+					default: currentState === 'error',
+				}
+			],
+			callbacks: {
+				exit: () => {
+					/* Restore editor settings */
+					const state = $notificationWrapper.attr( 'data-state' );
+
+					$notificationWrapper.addClass( 'tve_no_icons' );
+
+					TVE.main.sidebar_extra.$( '.sidebar-item.add-element' ).hide();
+					TVE.inner_$( `.notifications-content.notification-${state}` ).children().addClass( 'tve-prevent-content-edit' );
+
+					/* Set focus on the notification element */
+					TVE.Editor_Page.focus_element( $notificationWrapper );
+
+					/* Update available sidebar options for the Notification Element */
+					utils.updateNotificationSidebarOptions( false );
+
+					/* Add corresponding link for the preview button */
+					utils.updatePreviewLink( state );
+				},
+				state_change: state => {
+					$notificationWrapper.attr( 'data-state', state );
+
+					TVE.Components.notification.controls.VerticalPosition.update( $notificationWrapper );
+
+					TVE.Editor_Page.focus_element( $notificationWrapper );
+
+					utils._updateMainFrameVars( state );
+				}
+			}
+		} );
+	},
+} );

wp-content/plugins/thrive-visual-editor/editor/js/notifications/filters.js

@@ -0,0 +1,144 @@
+module.exports = {
+	/**
+	 * Include the custom components
+	 *
+	 * @param  TVE
+	 * @return {*}
+	 */
+	'tcb.includes': TVE => {
+		TVE.Views.Components = {...TVE.Views.Components, ...( require( './components/_includes' ) )};
+
+		return TVE;
+	},
+
+	/**
+	 * Remove classes and attributes that are not necessary
+	 *
+	 * @param  $content
+	 * @return {*}
+	 */
+	'tcb_filter_html_before_save': $content => {
+		const $notificationWrapper = $content.find( TVE.identifier( 'notification' ) );
+
+		if ( $notificationWrapper.attr( 'data-timer' ) < 0 ) {
+			$notificationWrapper.attr( 'data-timer', 3000 );
+		}
+
+		$content.find( '.notification-edit-mode' ).removeClass( 'notification-edit-mode' );
+		$content.find( '.tve_no_icons' ).removeClass( 'tve_no_drag tve_no_icons' );
+
+		return $content;
+	},
+
+	/**
+	 * Update the selected notification template
+	 *
+	 * @param  data
+	 * @return {*}
+	 */
+	'tcb_save_post_data_after': data => {
+		if ( TVE.CONST.post.post_type === 'tve_notifications' ) {
+			TVE.$.ajax( {
+				url: ajaxurl,
+				type: 'post',
+				data: {
+					action: 'notification_update_template',
+					post_id: data.post_id,
+				}
+			} );
+		}
+
+		return data;
+	},
+
+	/**
+	 * Do not allow elements to be dropped elsewhere than inside the Notification element
+	 *
+	 * @param  elements
+	 * @return {*}
+	 */
+	'only_inner_drop': elements => {
+		elements += ',.notifications-content';
+
+		return elements;
+	},
+
+	/* Do not allow elements to be inserted outside the notification element */
+	'tve.drag.position.insert': ( dir, $newElement, $target ) => {
+		if ( $target.is( '.notifications-content' ) ) {
+			dir = 'mid';
+		}
+
+		return dir;
+	},
+
+	/* Insert new elements inside the corresponding notification */
+	'tve.insert.near.target': $target => {
+		if ( $target.is( TVE.identifier( 'notification' ) ) ) {
+			$target = $target.find( `.notifications-content.notification-${$target.attr( 'data-state' )}` );
+		}
+
+		return $target;
+	},
+
+	/* Allow custom refocus after exiting the Edit Mode */
+	'tve.edit.mode.refocus': () => {
+		return false;
+	},
+
+	/* Add prefix in order to successfully override the default style */
+	'tcb_head_css_prefix': ( prefix, element ) => {
+		/* Check if element is part of the notification & is not one of the following components */
+		if ( element.parents( '.notifications-content-wrapper' ).length > 0 && ! element.is( '.notifications-content,.thrv-notification_message,.notifications-content-wrapper' ) ) {
+			const state = TVE.FLAGS.notification_state || TVE.inner_$( TVE.identifier( 'notification' ) ).attr( 'data-state' );
+			prefix = `.notification-${state} `;
+		}
+
+		return prefix;
+	},
+
+	/**
+	 * Add the local default notification template to the list of cloud templates
+	 *
+	 * @param  data
+	 * @return {*}
+	 */
+	'tcb.cloud_templates.notification': data => {
+		const defaultNotificationTemplate = {
+			/* set the ID as negative to mark this as a local template */
+			id: '-1',
+			name: 'Default Notifications',
+			local: true,
+			thumb: `${TVE.CONST.plugin_url}editor/css/images/notification_template_default.jpg`,
+			thumb_size: {w: 655, h: 326},
+			v: 1
+		};
+
+		data.unshift( defaultNotificationTemplate );
+
+		return data;
+	},
+	/**
+	 * Instead of rendering the default notification template from the cloud, render it from localize
+	 *
+	 * @param  tpl
+	 * @param  id
+	 * @return {{v: number, head_css: string, name: string, custom_css: string, id: number, type: string, content: *}|boolean}
+	 */
+	'tcb.cloud_template.notification': ( tpl, id ) => {
+		/* local templates have negative IDs */
+		if ( id < 0 ) {
+			return {
+				content: `${TVE.tpl( 'elements/notification' )()}`,
+				custom_css: '',
+				head_css: '',
+				id: '-1',
+				name: 'Default Notifications',
+				type: 'notification',
+				v: 1
+			};
+		}
+
+		return false;
+	},
+};

wp-content/plugins/thrive-visual-editor/editor/js/notifications/main.js

@@ -0,0 +1,12 @@
+( $ => {
+	$( window ).on( 'tcb.register-hooks', () => {
+		_.each( require( './filters' ), ( callback, tag ) => {
+			TVE.add_filter( tag, callback );
+		} );
+
+		/* register all actions */
+		_.each( require( './actions' ), ( callback, tag ) => {
+			TVE.add_action( tag, callback );
+		} );
+	} );
+} )( jQuery );

wp-content/plugins/thrive-visual-editor/editor/js/notifications/notifications-editor.js

@@ -0,0 +1,18 @@
+( $ => {
+	const Notifications = {
+		init() {
+		},
+		editorInit() {
+			TVE.Editor_Page.selection_manager.init( TVE.inner_$( '.notifications-editor-wrapper' ) );
+			TVE.main.sidebar_extra.$( '.sidebar-item:not(.click):not(.add-element)' ).remove();
+			TVE.main.sidebar_extra.$( '.sidebar-item.add-element' ).hide();
+		},
+	};
+
+	$( window ).on( 'tcb_after_dom_ready', () => {
+		/* Initialize the typography settings */
+		TVE.main.on( 'tcb-ready', Notifications.init.bind( Notifications ) );
+		Notifications.editorInit();
+	} );
+
+} )( jQuery );

wp-content/plugins/thrive-visual-editor/editor/js/notifications/utils.js

@@ -0,0 +1,159 @@
+module.exports = {
+	applyDefaultRules( shouldSave ) {
+		const
+			iconSize = 27,
+			mobileIconSize = 24,
+			defaultRules = {
+				[ TVE.main.responsive.desktop.media ]: {
+					'.notifications-content': {
+						'box-shadow': 'rgba(0, 0, 0, 25%) 0px 4px 9px 0px',
+						'margin': 0,
+						'padding': 0,
+						'width': '501px',
+						'min-height': '20px',
+						'border-radius': '2px',
+						'border': '2px solid',
+						'border-color': 'var(--notification-color)',
+						'background-color': 'rgb(255, 255, 255)',
+					},
+					'.thrv-columns': {
+						'margin': '0!important'
+					},
+					'.tcb-flex-row': {
+						'padding': '0!important',
+						'margin-left': '0px',
+					},
+					'.tcb-flex-col': {
+						'padding-left': '0px'
+					},
+					'.thrv_icon': {
+						'border': 'none',
+						'border-radius': 0,
+						'width': `${iconSize}px`,
+						'height': `${iconSize}px`,
+						'--tve-icon-size': `${iconSize}px`,
+						'font-size': `${iconSize}px`,
+						'margin': '0!important',
+						'color': 'rgb(255, 255, 255)',
+						'--tcb-local-color-icon': 'var(--notification-color)',
+						'--tcb-local-color-var': 'var(--notification-color)',
+						'background-image': 'linear-gradient(var(--tcb-local-color-icon), var(--tcb-local-color-icon))',
+						'padding': '16px !important',
+					},
+					'.thrv-notification_message': {
+						'margin': 0,
+						'text-align': 'center',
+						'font-size': '16px',
+						'color': '#191f28'
+					},
+					'.tcb-flex-col:first-child': {
+						'max-width': '12%'
+					}
+				},
+				[ TVE.main.responsive.mobile.media ]: {
+					'.notifications-content': {
+						'width': 'unset',
+						'min-width': '360px',
+						'background-color': 'var(--notification-color) !important',
+						'border': 'none',
+						'border-radius': 0,
+					},
+					'.thrv-notification_message': {
+						'min-width': 'auto',
+						'color': 'rgb(255, 255, 255)',
+						'text-align': 'left',
+					},
+					'.thrv_icon': {
+						'width': `${mobileIconSize}px`,
+						'height': `${mobileIconSize}px`,
+						'--tve-icon-size': `${mobileIconSize}px`,
+						'font-size': `${mobileIconSize}px`,
+					},
+					'.thrv-columns': {
+						'width': '65%',
+						'margin-left': 'auto !important',
+						'margin-right': 'auto !important',
+						'float': 'none',
+					},
+					'.tcb-flex-col:first-child': {
+						'max-width': '27%'
+					}
+				}
+			};
+
+		/* when we open the template for the first time, we apply the default styles */
+		[ 'success', 'warning', 'error' ].forEach( state => {
+			TVE.FLAGS.notification_state = state;
+			for ( const media in defaultRules ) {
+				for ( const selector in defaultRules[ media ] ) {
+					TVE.inner_$( selector ).head_css( defaultRules[ media ][ selector ], media )
+				}
+			}
+		} );
+
+		delete TVE.FLAGS.notification_state;
+		/* and silently save so we can have the changes in preview */
+		if ( shouldSave ) {
+			TVE.Editor_Page.save( true, null, {}, true );
+		}
+	},
+
+	initializeNotificationEditor( displayedState ) {
+		/* Do not allow the content to be edited when it is not in edit mode */
+		TVE.inner_$( `.notifications-content.notification-${displayedState}` ).children().addClass( 'tve-prevent-content-edit' );
+
+		/* Initialize selectors */
+		tve_notification.elements.forEach( elementKey => {
+			const selector = TVE.identifier( elementKey );
+
+			TVE.inner_$( selector ).each( ( index, element ) => {
+				if ( elementKey === 'notification_message' ) {
+					/* we want to drag the notification message */
+					element.classList.add( 'tcb-selector-no_save', 'tcb-selector-no_clone' )
+				} else {
+					element.classList.add( 'tve_no_icons' );
+				}
+			} )
+		} );
+	},
+
+	/**
+	 * Add current notification color to the main frame for the controls to properly display the current color
+	 *
+	 * @param  state
+	 * @private
+	 */
+	_updateMainFrameVars( state ) {
+		const color = {
+			'success': 'rgb(74, 178, 93)',
+			'warning': 'rgb(243, 156, 15)',
+			'error': 'rgb(214, 54, 56)'
+		};
+		TVE.changeCssVariableValue( '--notification-color', color[ state ] );
+	},
+
+	/**
+	 * Add corresponding link for the preview button
+	 *
+	 * @param  state
+	 */
+	updatePreviewLink: ( state = 'success' ) => {
+		const $previewButton = TVE.$( '.preview-content' );
+		let previewLink = $previewButton.attr( 'href' );
+
+		if ( previewLink.includes( 'notification-state' ) ) {
+			previewLink = previewLink.split( '&notification-state=' )[ 0 ];
+		}
+
+		$previewButton.attr( 'href', previewLink.concat( `&notification-state=${state}` ) );
+	},
+
+	updateNotificationSidebarOptions( isEditMode ) {
+		const hiddenComponents = '#tve-layout-component,#tve-background-component,#tve-borders-component,#tve-shadow-component,#tve-responsive-component,#tve-styles-templates-component';
+
+		TVE.main.EditMode.$componentPanel.find( hiddenComponents ).toggle( isEditMode );
+		TVE.main.EditMode.$componentPanel.find( '#tve-notification-component .non-edit-mode-controls' ).toggle( ! isEditMode );
+		TVE.main.EditMode.$componentPanel.find( '#tve-notification-component .edit-mode-controls' ).toggle( isEditMode );
+		TVE.main.EditMode.$componentPanel.find( '#tve-cloud-templates-component' ).toggle( ! isEditMode );
+	},
+};