divi/includes/builder/feature/gutenberg/EditorTypography.php

<?php
/**
 * Gutenberg editor typography.
 *
 * @package Builder
 * @subpackage Gutenberg
 * @since 4.7.6
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Class use theme's chosen fonts in Gutenberg editor.
 *
 * Class ET_GB_Editor_Typography
 */
class ET_GB_Editor_Typography {

	/**
	 * `ET_GB_Editor_Typography` instance.
	 *
	 * @var ET_GB_Editor_Typography
	 */
	private static $_instance;

	/**
	 * TB's body layout post
	 *
	 * @var WP_Post
	 */
	private $_body_layout_post;

	/**
	 * The `et_pb_post_content` shortcode content extracted from the TB's body layout post content
	 *
	 * @var string
	 */
	private $_post_content_shortcode;

	/**
	 * The `et_pb_post_title shortcode` content extracted from the TB's body layout post content
	 *
	 * @var string
	 */
	private $_post_title_shortcode;

	/**
	 * Constructor.
	 *
	 * ET_GB_Editor_Typography constructor.
	 */
	public function __construct() {

		if ( ! et_core_is_gutenberg_active() ) {
			return;
		}

		$this->register_hooks();
	}

	/**
	 * Get class instance.
	 *
	 * @return object class instance.
	 */
	public static function instance() {

		if ( null === self::$_instance ) {
			self::$_instance = new self();
		}

		return self::$_instance;
	}

	/**
	 * Register hooks
	 */
	public function register_hooks() {
		add_action( 'admin_footer', array( $this, 'enqueue_block_typography_styles' ) );
		add_filter( 'block_editor_settings_all', array( $this, 'block_editor_settings_all' ), 10, 2 );
	}

	/**
	 * Filter editor styles pass to the GB editor.
	 *
	 * @param array                   $editor_settings editor settings.
	 * @param WP_Block_Editor_Context $block_editor_context The current block editor context.
	 *
	 * @return mixed
	 */
	public function block_editor_settings_all( $editor_settings, $block_editor_context ) {

		$styles  = $this->get_body_styles();
		$styles .= $this->get_title_styles();

		$post = $block_editor_context->post;
		if ( $post ) {
			$tb_layouts = et_theme_builder_get_template_layouts( ET_Theme_Builder_Request::from_post( $post->ID ) );

			if ( isset( $tb_layouts[ ET_THEME_BUILDER_BODY_LAYOUT_POST_TYPE ] ) ) {
				$body_layout             = $tb_layouts[ ET_THEME_BUILDER_BODY_LAYOUT_POST_TYPE ];
				$body_layout_id          = et_()->array_get( $body_layout, 'id' );
				$this->_body_layout_post = get_post( $body_layout_id );

				$this->_initialize_shortcode( '_post_content_shortcode', et_theme_builder_get_post_content_modules() );
				$this->_initialize_shortcode( '_post_title_shortcode', array( 'et_pb_post_title' ) );
				$styles .= $this->get_tb_styles();
			}
		}

		$editor_settings['styles'][] = array(
			'css'            => $styles,
			'__unstableType' => 'theme',
		);

		return $editor_settings;
	}

	/**
	 * Set the et_pb_post_content and et_pb_post_title shortcode from the body layout post content.
	 *
	 * @param string $prop {@see self::$_post_content_shortcode} or {@see self::$_post_title_shortcode} property.
	 * @param array  $tagnames Shortcode tagnames.
	 */
	private function _initialize_shortcode( $prop, $tagnames ) {
		$regex = get_shortcode_regex( $tagnames );

		if ( preg_match_all( "/$regex/", $this->_body_layout_post->post_content, $matches ) ) {
			$post_title_shortcodes = et_()->array_get( $matches, '0' );

			// Take the style from the first Post Title module that has the title enabled.
			foreach ( $post_title_shortcodes as $post_title_shortcode ) {
				if ( false === strpos( $post_title_shortcode, 'title="off"' ) ) {
					$this->{$prop} = $post_title_shortcode;

					return;
				}
			}
		} elseif ( preg_match_all( "/$regex/", $this->_body_layout_post->post_content, $matches, PREG_SET_ORDER ) ) {
			$this->{$prop} = et_()->array_get(
				$matches,
				'0.0'
			);
		}
	}

	/**
	 * Print GB typography style.
	 */
	public function enqueue_block_typography_styles() {

		if ( ! get_current_screen()->is_block_editor() ) {
			return;
		}

		et_builder_print_font();
	}

	/**
	 * Print the post content style.
	 */
	public function get_body_styles() {

		$body_styles = '';

		$body_font = esc_html( et_get_option( 'body_font' ) );

		if ( ! empty( $body_font ) && 'none' !== $body_font ) {
			et_builder_enqueue_font( $body_font );
			$font_family = et_builder_get_font_family( $body_font );

			$body_styles .= et_builder_generate_css_style(
				array(
					'style' => 'font-family',
					'value' => str_replace( 'font-family: ', '', $font_family ),
				)
			);
		}

		$body_font_height = esc_html( et_get_option( 'body_font_height' ) );

		if ( ! empty( $body_font_height ) ) {
			$body_styles .= et_builder_generate_css_style(
				array(
					'style' => 'line-height',
					'value' => $body_font_height,
				)
			);
		}

		$body_font_size = esc_html( et_get_option( 'body_font_size' ) );

		if ( ! empty( $body_font_size ) ) {
			$body_styles .= et_builder_generate_css_style(
				array(
					'style'  => 'font-size',
					'value'  => $body_font_size,
					'suffix' => 'px',
				)
			);
		}

		if ( ! empty( $body_styles ) ) {
			$body_styles = sprintf( 'body { %1$s }', $body_styles );
		}

		return $body_styles;
	}

	/**
	 * Print post title styles.
	 */
	public function get_title_styles() {

		$title_styles = '';

		$heading_font = esc_html( et_get_option( 'heading_font' ) );

		// Fallback to the body font.
		if ( empty( $heading_font ) || 'none' === $heading_font ) {
			$heading_font = esc_html( et_get_option( 'body_font' ) );
		}

		if ( ! empty( $heading_font ) && 'none' !== $heading_font ) {
			et_builder_enqueue_font( $heading_font );
			$font_family = et_builder_get_font_family( $heading_font );

			$title_styles .= et_builder_generate_css_style(
				array(
					'style' => 'font-family',
					'value' => str_replace( 'font-family: ', '', $font_family ),
				)
			);
		}

		$body_header_spacing = esc_html( et_get_option( 'body_header_spacing' ) );

		if ( ! empty( $body_header_spacing ) ) {
			$title_styles .= et_builder_generate_css_style(
				array(
					'style'  => 'letter-spacing',
					'value'  => $body_header_spacing,
					'suffix' => 'px',
				)
			);
		}

		$body_header_height = esc_html( et_get_option( 'body_header_height' ) );

		if ( ! empty( $body_header_height ) && '1' !== $body_header_height ) {
			$title_styles .= et_builder_generate_css_style(
				array(
					'style' => 'line-height',
					'value' => $body_header_height,
				)
			);
		}

		$body_header_style = esc_html( et_get_option( 'body_header_style' ) );

		if ( ! empty( $body_header_style ) ) {
			// Convert string into array.
			$styles_array = explode( '|', $body_header_style );

			$font_properties_value_map = array(
				'font-weight'     => 'bold',
				'font-style'      => 'italic',
				'text-transform'  => 'uppercase',
				'text-decoration' => 'underline',
			);

			foreach ( $font_properties_value_map as $css_property => $value ) {
				if ( in_array( $value, $styles_array, true ) ) {
					$title_styles .= et_builder_generate_css_style(
						array(
							'style' => $css_property,
							'value' => $value,
						)
					);
				}
			}
		}

		if ( ! empty( $title_styles ) ) {
			$title_styles = sprintf( 'h1,h2,h3,h4,h5,h6,.editor-post-title__block .editor-post-title__input { %1$s }', $title_styles );
		}

		$title_styles .= $this->get_heading_levels_font_size_style();

		return $title_styles;
	}

	/**
	 * Print TB's style.
	 */
	public function get_tb_styles() {

		if ( empty( $this->_post_content_shortcode ) && empty( $this->_post_title_shortcode ) ) {
			return;
		}

		if ( ! class_exists( 'ET_Builder_Element' ) ) {
			require_once ET_BUILDER_DIR . 'class-et-builder-value.php';
			require_once ET_BUILDER_DIR . 'class-et-builder-element.php';
			require_once ET_BUILDER_DIR . 'ab-testing.php';
			et_builder_init_global_settings();
			et_builder_add_main_elements();
			et_builder_settings_init();
			ET_Builder_Element::set_media_queries();
		}

		// To generate the styles from the shortcode, this do_shortcode will intialize et_pb_post_content and et_pb_post_title modules classes.
		ob_start();
		do_shortcode( $this->_post_title_shortcode . $this->_post_content_shortcode );
		ob_end_clean();

		// Get style generated by modules.
		$tb_style = ET_Builder_Element::get_style();

		// Remove `color` property from theme builder style.
		$tb_style = preg_replace( '/(?<=[{;\s])color:.*?;/s', '', $tb_style );

		$have_post_content_style = preg_match( '/\.et_pb_post_content_0\s*{\s*(.*?)\s*}/s', $tb_style, $matches );
		if ( $have_post_content_style && isset( $matches[1] ) ) {
			$et_pb_post_content_styles = explode( ';', $matches[1] );
			$typography_properties     = array(
				'font-family',
				'font-size',
				'font-weight',
				'font-style',
				'text-align',
				'text-shadow',
				'letter-spacing',
				'line-height',
				'text-transform',
				'text-decoration',
				'text-decoration-style',
			);

			$post_content_style = '';

			foreach ( $et_pb_post_content_styles as $et_pb_post_content_style ) {
				$style        = explode( ':', $et_pb_post_content_style ); // explode CSS property and value.
				$css_property = trim( $style[0] );
				if ( in_array( $css_property, $typography_properties, true ) ) {
					$post_content_style .= $css_property . ':' . $style[1] . ';';
				}
			}

			$tb_style = 'body {' . $post_content_style . '}' . $tb_style;
		}

		foreach ( array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ) as $heading_selector ) {
			$tb_style = str_replace( ".et_pb_post_content_0 $heading_selector ", $heading_selector, $tb_style );
		}

		foreach ( array( 'a', 'ul', 'ol', 'ul li', 'ol li', 'blockquote' ) as $selector ) {
			$search = array(
				".et_pb_post_content_0 $selector ",
				".et_pb_post_content_0.et_pb_post_content $selector",
			);

			$tb_style = str_replace( $search, $selector, $tb_style );
		}

		// Replace the post title style selectors with editor's post title selector.
		$tb_style = str_replace( array( '.et_pb_post_title_0 .entry-title', '.et_pb_post_title_0 .et_pb_title_container h1.entry-title, .et_pb_post_title_0 .et_pb_title_container h2.entry-title, .et_pb_post_title_0 .et_pb_title_container h3.entry-title, .et_pb_post_title_0 .et_pb_title_container h4.entry-title, .et_pb_post_title_0 .et_pb_title_container h5.entry-title, .et_pb_post_title_0 .et_pb_title_container h6.entry-title' ), '.wp-block.editor-post-title__block .editor-post-title__input', $tb_style );

		// Enqueue fonts.
		$fonts_regex = '/font-family:\s+[\'"]([a-zA-Z0-9\s]+)[\'"]/';
		$has_fonts   = preg_match_all( $fonts_regex, $tb_style, $matches, PREG_SET_ORDER );
		if ( false !== $has_fonts && isset( $match[1] ) ) {
			foreach ( $matches as $match ) {
				et_builder_enqueue_font( $match[1] );
			}
		}

		return $tb_style;
	}

	/**
	 * Generate the heading levels font size from the Header Size customizer setting and return style.
	 *
	 * @return string
	 */
	public function get_heading_levels_font_size_style() {

		$body_header_size = esc_html( et_get_option( 'body_header_size' ) );

		$title_styles = '';

		if ( empty( $body_header_size ) ) {
			return $title_styles;
		}

		$font_sizes = array(
			'h1,.editor-post-title__block .editor-post-title__input' => $body_header_size,
			'h2' => $body_header_size * .86,
			'h3' => $body_header_size * .73,
			'h4' => $body_header_size * .60,
			'h5' => $body_header_size * .53,
			'h6' => $body_header_size * .47,
		);

		foreach ( $font_sizes as $selector => $font_size ) {
			$title_styles .= ',' . et_builder_generate_css(
				array(
					'style'    => 'font-size',
					'value'    => intval( $font_size ),
					'suffix'   => 'px',
					'selector' => $selector,
				)
			);
		}

		return $title_styles;
	}

}

// Initialize ET_GB_Editor_Typography.
ET_GB_Editor_Typography::instance();