<?php

[0] Fix | Delete

[1] Fix | Delete

namespace WPForms\Frontend;

[2] Fix | Delete

[3] Fix | Delete

use WPForms\Integrations\Gutenberg\ThemesData;

[4] Fix | Delete

use WPForms\Lite\Integrations\Gutenberg\ThemesData as LiteThemesData;

[5] Fix | Delete

use WPForms\Pro\Integrations\Gutenberg\ThemesData as ProThemesData;

[6] Fix | Delete

use WPForms\Pro\Integrations\Gutenberg\StockPhotos;

[7] Fix | Delete

[8] Fix | Delete

/**

[9] Fix | Delete

* CSS variables class.

[10] Fix | Delete

*

[11] Fix | Delete

* @since 1.8.1

[12] Fix | Delete

*/

[13] Fix | Delete

class CSSVars {

[14] Fix | Delete

[15] Fix | Delete

/**

[16] Fix | Delete

* Root vars and values.

[17] Fix | Delete

*

[18] Fix | Delete

* @since 1.8.1

[19] Fix | Delete

*

[20] Fix | Delete

* @var array

[21] Fix | Delete

*/

[22] Fix | Delete

public const ROOT_VARS = [

[23] Fix | Delete

'field-border-radius' => '3px',

[24] Fix | Delete

'field-border-style' => 'solid',

[25] Fix | Delete

'field-border-size' => '1px',

[26] Fix | Delete

'field-background-color' => self::WHITE,

[27] Fix | Delete

'field-border-color' => 'rgba( 0, 0, 0, 0.25 )',

[28] Fix | Delete

'field-text-color' => 'rgba( 0, 0, 0, 0.7 )',

[29] Fix | Delete

'field-menu-color' => self::WHITE,

[30] Fix | Delete

[31] Fix | Delete

'label-color' => 'rgba( 0, 0, 0, 0.85 )',

[32] Fix | Delete

'label-sublabel-color' => 'rgba( 0, 0, 0, 0.55 )',

[33] Fix | Delete

'label-error-color' => '#d63637',

[34] Fix | Delete

[35] Fix | Delete

'button-border-radius' => '3px',

[36] Fix | Delete

'button-border-style' => 'none',

[37] Fix | Delete

'button-border-size' => '1px',

[38] Fix | Delete

'button-background-color' => '#066aab',

[39] Fix | Delete

'button-border-color' => '#066aab',

[40] Fix | Delete

'button-text-color' => self::WHITE,

[41] Fix | Delete

[42] Fix | Delete

'page-break-color' => '#066aab',

[43] Fix | Delete

[44] Fix | Delete

'background-image' => 'none',

[45] Fix | Delete

'background-position' => 'center center',

[46] Fix | Delete

'background-repeat' => 'no-repeat',

[47] Fix | Delete

'background-size' => 'cover',

[48] Fix | Delete

'background-width' => '100px',

[49] Fix | Delete

'background-height' => '100px',

[50] Fix | Delete

'background-color' => 'rgba( 0, 0, 0, 0 )',

[51] Fix | Delete

'background-url' => 'url()',

[52] Fix | Delete

[53] Fix | Delete

'container-padding' => '0px',

[54] Fix | Delete

'container-border-style' => 'none',

[55] Fix | Delete

'container-border-width' => '1px',

[56] Fix | Delete

'container-border-color' => '#000000',

[57] Fix | Delete

'container-border-radius' => '3px',

[58] Fix | Delete

];

[59] Fix | Delete

[60] Fix | Delete

/**

[61] Fix | Delete

* Container shadow vars and values.

[62] Fix | Delete

*

[63] Fix | Delete

* @since 1.8.8

[64] Fix | Delete

*

[65] Fix | Delete

* @var array

[66] Fix | Delete

*/

[67] Fix | Delete

public const CONTAINER_SHADOW_SIZE = [

[68] Fix | Delete

'none' => [

[69] Fix | Delete

'box-shadow' => 'none',

[70] Fix | Delete

],

[71] Fix | Delete

'small' => [

[72] Fix | Delete

'box-shadow' => '0px 3px 5px 0px rgba(0, 0, 0, 0.1)',

[73] Fix | Delete

],

[74] Fix | Delete

'medium' => [

[75] Fix | Delete

'box-shadow' => '0px 10px 20px 0px rgba(0, 0, 0, 0.1)',

[76] Fix | Delete

],

[77] Fix | Delete

'large' => [

[78] Fix | Delete

'box-shadow' => '0px 30px 50px -10px rgba(0, 0, 0, 0.15)',

[79] Fix | Delete

],

[80] Fix | Delete

];

[81] Fix | Delete

[82] Fix | Delete

/**

[83] Fix | Delete

* Field Size vars and values.

[84] Fix | Delete

*

[85] Fix | Delete

* @since 1.8.1

[86] Fix | Delete

*

[87] Fix | Delete

* @var array

[88] Fix | Delete

*/

[89] Fix | Delete

public const FIELD_SIZE = [

[90] Fix | Delete

'small' => [

[91] Fix | Delete

'input-height' => '31px',

[92] Fix | Delete

'input-spacing' => '10px',

[93] Fix | Delete

'font-size' => '14px',

[94] Fix | Delete

'line-height' => '17px',

[95] Fix | Delete

'padding-h' => '9px',

[96] Fix | Delete

'checkbox-size' => '14px',

[97] Fix | Delete

'sublabel-spacing' => '5px',

[98] Fix | Delete

'icon-size' => '0.75',

[99] Fix | Delete

],

[100] Fix | Delete

'medium' => [

[101] Fix | Delete

'input-height' => '43px',

[102] Fix | Delete

'input-spacing' => '15px',

[103] Fix | Delete

'font-size' => '16px',

[104] Fix | Delete

'line-height' => '19px',

[105] Fix | Delete

'padding-h' => '14px',

[106] Fix | Delete

'checkbox-size' => '16px',

[107] Fix | Delete

'sublabel-spacing' => '5px',

[108] Fix | Delete

'icon-size' => '1',

[109] Fix | Delete

],

[110] Fix | Delete

'large' => [

[111] Fix | Delete

'input-height' => '50px',

[112] Fix | Delete

'input-spacing' => '20px',

[113] Fix | Delete

'font-size' => '18px',

[114] Fix | Delete

'line-height' => '21px',

[115] Fix | Delete

'padding-h' => '14px',

[116] Fix | Delete

'checkbox-size' => '18px',

[117] Fix | Delete

'sublabel-spacing' => '10px',

[118] Fix | Delete

'icon-size' => '1.25',

[119] Fix | Delete

],

[120] Fix | Delete

];

[121] Fix | Delete

[122] Fix | Delete

/**

[123] Fix | Delete

* Label Size vars and values.

[124] Fix | Delete

*

[125] Fix | Delete

* @since 1.8.1

[126] Fix | Delete

*

[127] Fix | Delete

* @var array

[128] Fix | Delete

*/

[129] Fix | Delete

public const LABEL_SIZE = [

[130] Fix | Delete

'small' => [

[131] Fix | Delete

'font-size' => '14px',

[132] Fix | Delete

'line-height' => '17px',

[133] Fix | Delete

'sublabel-font-size' => '13px',

[134] Fix | Delete

'sublabel-line-height' => '16px',

[135] Fix | Delete

],

[136] Fix | Delete

'medium' => [

[137] Fix | Delete

'font-size' => '16px',

[138] Fix | Delete

'line-height' => '19px',

[139] Fix | Delete

'sublabel-font-size' => '14px',

[140] Fix | Delete

'sublabel-line-height' => '17px',

[141] Fix | Delete

],

[142] Fix | Delete

'large' => [

[143] Fix | Delete

'font-size' => '18px',

[144] Fix | Delete

'line-height' => '21px',

[145] Fix | Delete

'sublabel-font-size' => '16px',

[146] Fix | Delete

'sublabel-line-height' => '19px',

[147] Fix | Delete

],

[148] Fix | Delete

];

[149] Fix | Delete

[150] Fix | Delete

/**

[151] Fix | Delete

* Button Size vars and values.

[152] Fix | Delete

*

[153] Fix | Delete

* @since 1.8.1

[154] Fix | Delete

*

[155] Fix | Delete

* @var array

[156] Fix | Delete

*/

[157] Fix | Delete

public const BUTTON_SIZE = [

[158] Fix | Delete

'small' => [

[159] Fix | Delete

'font-size' => '14px',

[160] Fix | Delete

'height' => '37px',

[161] Fix | Delete

'padding-h' => '15px',

[162] Fix | Delete

'margin-top' => '5px',

[163] Fix | Delete

],

[164] Fix | Delete

'medium' => [

[165] Fix | Delete

'font-size' => '17px',

[166] Fix | Delete

'height' => '41px',

[167] Fix | Delete

'padding-h' => '15px',

[168] Fix | Delete

'margin-top' => '10px',

[169] Fix | Delete

],

[170] Fix | Delete

'large' => [

[171] Fix | Delete

'font-size' => '20px',

[172] Fix | Delete

'height' => '48px',

[173] Fix | Delete

'padding-h' => '20px',

[174] Fix | Delete

'margin-top' => '15px',

[175] Fix | Delete

],

[176] Fix | Delete

];

[177] Fix | Delete

[178] Fix | Delete

/**

[179] Fix | Delete

* Spare variables.

[180] Fix | Delete

*

[181] Fix | Delete

* @since 1.8.8

[182] Fix | Delete

*

[183] Fix | Delete

* @var array

[184] Fix | Delete

*/

[185] Fix | Delete

private const SPARE_VARS = [ 'field-border-color' ];

[186] Fix | Delete

[187] Fix | Delete

/**

[188] Fix | Delete

* White color.

[189] Fix | Delete

*

[190] Fix | Delete

* @since 1.8.8

[191] Fix | Delete

*

[192] Fix | Delete

* @var string

[193] Fix | Delete

*/

[194] Fix | Delete

private const WHITE = '#ffffff';

[195] Fix | Delete

[196] Fix | Delete

/**

[197] Fix | Delete

* Render engine.

[198] Fix | Delete

*

[199] Fix | Delete

* @since 1.8.1

[200] Fix | Delete

*

[201] Fix | Delete

* @var string

[202] Fix | Delete

*/

[203] Fix | Delete

private $render_engine;

[204] Fix | Delete

[205] Fix | Delete

/**

[206] Fix | Delete

* CSS variables.

[207] Fix | Delete

*

[208] Fix | Delete

* @since 1.8.1

[209] Fix | Delete

*

[210] Fix | Delete

* @var array

[211] Fix | Delete

*/

[212] Fix | Delete

private $css_vars;

[213] Fix | Delete

[214] Fix | Delete

/**

[215] Fix | Delete

* Flag to check if root CSS vars were output.

[216] Fix | Delete

*

[217] Fix | Delete

* @since 1.8.1

[218] Fix | Delete

*

[219] Fix | Delete

* @var bool

[220] Fix | Delete

*/

[221] Fix | Delete

private $is_root_vars_displayed;

[222] Fix | Delete

[223] Fix | Delete

/**

[224] Fix | Delete

* Initialize class.

[225] Fix | Delete

*

[226] Fix | Delete

* @since 1.8.1

[227] Fix | Delete

*/

[228] Fix | Delete

public function init(): void {

[229] Fix | Delete

[230] Fix | Delete

$this->init_vars();

[231] Fix | Delete

}

[232] Fix | Delete

[233] Fix | Delete

/**

[234] Fix | Delete

* CSS variables data.

[235] Fix | Delete

*

[236] Fix | Delete

* @since 1.8.1

[237] Fix | Delete

*/

[238] Fix | Delete

private function init_vars(): void {

[239] Fix | Delete

[240] Fix | Delete

$vars = [];

[241] Fix | Delete

[242] Fix | Delete

$vars[':root'] = array_merge(

[243] Fix | Delete

self::ROOT_VARS,

[244] Fix | Delete

$this->get_complex_vars( 'field-size', self::FIELD_SIZE['medium'] ),

[245] Fix | Delete

$this->get_complex_vars( 'label-size', self::LABEL_SIZE['medium'] ),

[246] Fix | Delete

$this->get_complex_vars( 'button-size', self::BUTTON_SIZE['medium'] ),

[247] Fix | Delete

$this->get_complex_vars( 'container-shadow-size', self::CONTAINER_SHADOW_SIZE['none'] )

[248] Fix | Delete

);

[249] Fix | Delete

[250] Fix | Delete

/**

[251] Fix | Delete

* Allows developers to modify default CSS variables which output on the frontend.

[252] Fix | Delete

*

[253] Fix | Delete

* @since 1.8.1

[254] Fix | Delete

*

[255] Fix | Delete

* @param array $vars CSS variables two-dimensional array.

[256] Fix | Delete

* The first level keys is the CSS selector.

[257] Fix | Delete

* Second level keys is the variable name without the `--wpforms-` prefix.

[258] Fix | Delete

*/

[259] Fix | Delete

$this->css_vars = apply_filters( 'wpforms_frontend_css_vars_init_vars', $vars );

[260] Fix | Delete

}

[261] Fix | Delete

[262] Fix | Delete

/**

[263] Fix | Delete

* Get complex CSS variables data.

[264] Fix | Delete

*

[265] Fix | Delete

* @since 1.8.1

[266] Fix | Delete

*

[267] Fix | Delete

* @param string $prefix CSS variable prefix.

[268] Fix | Delete

* @param array $values Values.

[269] Fix | Delete

*/

[270] Fix | Delete

public function get_complex_vars( string $prefix, array $values ): array {

[271] Fix | Delete

[272] Fix | Delete

$vars = [];

[273] Fix | Delete

[274] Fix | Delete

foreach ( $values as $key => $value ) {

[275] Fix | Delete

$vars[ "{$prefix}-{$key}" ] = $value;

[276] Fix | Delete

}

[277] Fix | Delete

[278] Fix | Delete

return $vars;

[279] Fix | Delete

}

[280] Fix | Delete

[281] Fix | Delete

/**

[282] Fix | Delete

* Get CSS variables data by selector.

[283] Fix | Delete

*

[284] Fix | Delete

* @since 1.8.1

[285] Fix | Delete

*

[286] Fix | Delete

* @param string $selector Selector.

[287] Fix | Delete

*

[288] Fix | Delete

* @return array

[289] Fix | Delete

*/

[290] Fix | Delete

public function get_vars( string $selector = ':root' ): array {

[291] Fix | Delete

[292] Fix | Delete

if ( empty( $this->css_vars[ $selector ] ) ) {

[293] Fix | Delete

return [];

[294] Fix | Delete

}

[295] Fix | Delete

[296] Fix | Delete

return $this->css_vars[ $selector ];

[297] Fix | Delete

}

[298] Fix | Delete

[299] Fix | Delete

/**

[300] Fix | Delete

* Output root CSS variables.

[301] Fix | Delete

*

[302] Fix | Delete

* @since 1.8.1

[303] Fix | Delete

* @since 1.8.1.2 Added $force argument.

[304] Fix | Delete

* @deprecated 1.9.3

[305] Fix | Delete

*

[306] Fix | Delete

* @param bool $force Force output root variables.

[307] Fix | Delete

*

[308] Fix | Delete

* @noinspection PhpMissingParamTypeInspection

[309] Fix | Delete

*/

[310] Fix | Delete

public function output_root( $force = false ): void {

[311] Fix | Delete

[312] Fix | Delete

_deprecated_function( __METHOD__, '1.9.3 of the WPForms plugin' );

[313] Fix | Delete

[314] Fix | Delete

if ( ! empty( $this->is_root_vars_displayed ) && empty( $force ) ) {

[315] Fix | Delete

return;

[316] Fix | Delete

}

[317] Fix | Delete

[318] Fix | Delete

$this->output_selector_vars( ':root', $this->css_vars[':root'] );

[319] Fix | Delete

[320] Fix | Delete

$this->is_root_vars_displayed = true;

[321] Fix | Delete

}

[322] Fix | Delete

[323] Fix | Delete

/**

[324] Fix | Delete

* Get root variables CSS.

[325] Fix | Delete

*

[326] Fix | Delete

* @since 1.9.3

[327] Fix | Delete

*

[328] Fix | Delete

* @return string

[329] Fix | Delete

*/

[330] Fix | Delete

public function get_root_vars_css(): string {

[331] Fix | Delete

[332] Fix | Delete

return $this->get_selector_vars_css( ':root', $this->css_vars[':root'] );

[333] Fix | Delete

}

[334] Fix | Delete

[335] Fix | Delete

/**

[336] Fix | Delete

* Output selector's CSS variables.

[337] Fix | Delete

*

[338] Fix | Delete

* @since 1.8.1

[339] Fix | Delete

*

[340] Fix | Delete

* @param string $selector Selector.

[341] Fix | Delete

* @param array $vars Variables data.

[342] Fix | Delete

* @param string $style_id Style tag ID attribute. Optional. Default is an empty string.

[343] Fix | Delete

* @param string|int $form_id Form ID. Optional. Default is an empty string.

[344] Fix | Delete

*/

[345] Fix | Delete

public function output_selector_vars( string $selector, array $vars, string $style_id = '', $form_id = '' ): void {

[346] Fix | Delete

[347] Fix | Delete

if ( empty( $this->render_engine ) ) {

[348] Fix | Delete

$this->render_engine = wpforms_get_render_engine();

[349] Fix | Delete

}

[350] Fix | Delete

[351] Fix | Delete

if ( $this->render_engine === 'classic' ) {

[352] Fix | Delete

return;

[353] Fix | Delete

}

[354] Fix | Delete

[355] Fix | Delete

// If this is not full "Base and Form Theme Styling", skip.

[356] Fix | Delete

if ( (int) wpforms_setting( 'disable-css', '1' ) !== 1 ) {

[357] Fix | Delete

return;

[358] Fix | Delete

}

[359] Fix | Delete

[360] Fix | Delete

$style_id = empty( $style_id ) ? 'wpforms-css-vars-' . $selector : $style_id;

[361] Fix | Delete

[362] Fix | Delete

printf(

[363] Fix | Delete

'<style id="%1$s">

[364] Fix | Delete

%2$s

[365] Fix | Delete

</style>',

[366] Fix | Delete

sanitize_key( $style_id ),

[367] Fix | Delete

$this->get_selector_vars_css( $selector, $vars, $form_id ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

[368] Fix | Delete

);

[369] Fix | Delete

}

[370] Fix | Delete

[371] Fix | Delete

/**

[372] Fix | Delete

* Output CSS vars for the form added as a shortcode.

[373] Fix | Delete

*

[374] Fix | Delete

* @since 1.9.7

[375] Fix | Delete

*

[376] Fix | Delete

* @param array $atts Shortcode attributes.

[377] Fix | Delete

*/

[378] Fix | Delete

public function output_css_vars_for_shortcode( array $atts ): void {

[379] Fix | Delete

[380] Fix | Delete

if ( empty( $atts['id'] ) ) {

[381] Fix | Delete

return;

[382] Fix | Delete

}

[383] Fix | Delete

[384] Fix | Delete

$form_handler = wpforms()->obj( 'form' );

[385] Fix | Delete

[386] Fix | Delete

if ( ! $form_handler ) {

[387] Fix | Delete

return;

[388] Fix | Delete

}

[389] Fix | Delete

[390] Fix | Delete

$form_id = (int) $atts['id'];

[391] Fix | Delete

$form_data = $form_handler->get( $form_id, [ 'content_only' => true ] );

[392] Fix | Delete

[393] Fix | Delete

if ( empty( $form_data ) ) {

[394] Fix | Delete

return;

[395] Fix | Delete

}

[396] Fix | Delete

[397] Fix | Delete

$attr = isset( $form_data['settings']['themes'] ) ? (array) $form_data['settings']['themes'] : [];

[398] Fix | Delete

$attr = $this->maybe_override_attributes( $attr );

[399] Fix | Delete

[400] Fix | Delete

$css_vars = $this->get_customized_css_vars( $attr );

[401] Fix | Delete

$css_vars = $this->add_css_vars_units( $css_vars );

[402] Fix | Delete

[403] Fix | Delete

$selector = "#wpforms-{$form_id}";

[404] Fix | Delete

$style_id = "wpforms-css-vars-{$form_id}";

[405] Fix | Delete

[406] Fix | Delete

$this->output_selector_vars( $selector, $css_vars, $style_id, $form_id );

[407] Fix | Delete

$this->output_custom_css( $attr, $selector, $style_id );

[408] Fix | Delete

}

[409] Fix | Delete

[410] Fix | Delete

/**

[411] Fix | Delete

* Output custom CSS.

[412] Fix | Delete

*

[413] Fix | Delete

* @since 1.9.7

[414] Fix | Delete

*

[415] Fix | Delete

* @param array $attr Attributes.

[416] Fix | Delete

* @param string $selector Selector.

[417] Fix | Delete

* @param string $style_id Style ID.

[418] Fix | Delete

*

[419] Fix | Delete

* @noinspection PhpMissingParamTypeInspection

[420] Fix | Delete

*/

[421] Fix | Delete

private function output_custom_css( array $attr, string $selector, string $style_id ): void {

[422] Fix | Delete

[423] Fix | Delete

if ( wpforms_get_render_engine() === 'classic' ) {

[424] Fix | Delete

return;

[425] Fix | Delete

}

[426] Fix | Delete

[427] Fix | Delete

$custom_css = trim( $attr['customCss'] ?? '' );

[428] Fix | Delete

[429] Fix | Delete

if ( empty( $custom_css ) ) {

[430] Fix | Delete

return;

[431] Fix | Delete

}

[432] Fix | Delete

[433] Fix | Delete

printf(

[434] Fix | Delete

'<style id="%1$s-custom-css">

[435] Fix | Delete

%2$s {

[436] Fix | Delete

%3$s

[437] Fix | Delete

}

[438] Fix | Delete

</style>',

[439] Fix | Delete

sanitize_key( $style_id ),

[440] Fix | Delete

$selector, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

[441] Fix | Delete

wp_strip_all_tags( $custom_css ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

[442] Fix | Delete

);

[443] Fix | Delete

}

[444] Fix | Delete

[445] Fix | Delete

/**

[446] Fix | Delete

* Maybe override attributes with themes.json settings.

[447] Fix | Delete

*

[448] Fix | Delete

* @since 1.9.7

[449] Fix | Delete

*

[450] Fix | Delete

* @param array $attr Attributes.

[451] Fix | Delete

*

[452] Fix | Delete

* @return array

[453] Fix | Delete

*/

[454] Fix | Delete

private function maybe_override_attributes( array $attr ): array {

[455] Fix | Delete

[456] Fix | Delete

$theme_slug = (string) ( $attr['wpformsTheme'] ?? '' );

[457] Fix | Delete

[458] Fix | Delete

if ( empty( $theme_slug ) ) {

[459] Fix | Delete

return $attr;

[460] Fix | Delete

}

[461] Fix | Delete

[462] Fix | Delete

$attr = $this->normalize_background_url( $attr );

[463] Fix | Delete

[464] Fix | Delete

$theme_data = $this->get_themes_data_object()->get_theme( $theme_slug );

[465] Fix | Delete

$settings = $theme_data['settings'] ?? [];

[466] Fix | Delete

[467] Fix | Delete

return array_merge( $attr, $settings );

[468] Fix | Delete

}

[469] Fix | Delete

[470] Fix | Delete

/**

[471] Fix | Delete

* Normalize background URL.

[472] Fix | Delete

*

[473] Fix | Delete

* Check if the background URL is not wrapped in url() and add it if needed.

[474] Fix | Delete

*

[475] Fix | Delete

* @since 1.9.7

[476] Fix | Delete

*

[477] Fix | Delete

* @param array $attr Attributes.

[478] Fix | Delete

*/

[479] Fix | Delete

private function normalize_background_url( array $attr ): array {

[480] Fix | Delete

[481] Fix | Delete

if ( ! isset( $attr['backgroundUrl'] ) ) {

[482] Fix | Delete

return $attr;

[483] Fix | Delete

}

[484] Fix | Delete

[485] Fix | Delete

if ( strpos( $attr['backgroundUrl'], 'url(' ) === 0 ) {

[486] Fix | Delete

return $attr;

[487] Fix | Delete

}

[488] Fix | Delete

[489] Fix | Delete

$attr['backgroundUrl'] = 'url(' . $attr['backgroundUrl'] . ')';

[490] Fix | Delete

[491] Fix | Delete

return $attr;

[492] Fix | Delete

}

[493] Fix | Delete

[494] Fix | Delete

/**

[495] Fix | Delete

* Get themes data object.

[496] Fix | Delete

*

[497] Fix | Delete

* @since 1.9.7

[498] Fix | Delete

*

[499] Fix | Delete