Merge branch 'release/1.2.0'

maithemewp · Dec 5, 2024 · 25f8724 · 25f8724
2 parents e491a5c + cc2a639
commit 25f8724
Show file tree

Hide file tree

Showing 73 changed files with 1,355 additions and 1,015 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,7 +1,14 @@
 # Changelog
 
+## 1.2.0 (12/5/24)
+* Changed: Updated the updater.
+* Changed: Move block registration to a class for easier maintainability.
+* Changed: [Performance] Only run ACF filters in the back end.
+* Changed: Remove on-demand CSS and load in head on any page that has the block.
+* Fixed: Core lists inside Mai Lists margin was getting removed unexpectedly.
+
 ## 1.1.4 (11/27/23)
-Changed: Updated updater.
+* Changed: Updated the updater.
 
 ## 1.1.3 (5/15/23)
 * Fixed: Mai List Item block wasn't correctly requiring Mai List as the parent block.

diff --git a/assets/mai-lists-editor.css b/assets/mai-lists-editor.css
@@ -0,0 +1,85 @@
+/* This is all identical to mai-lists.css except !important on .mai-list stuff to override what we have in editor.scss in Mai Engine. */
+.mai-list {
+	--paragraph-margin-bottom: var(--spacing-xs);
+	list-style-type: none !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	line-height: 1.5 !important;
+}
+
+.mai-list-item {
+	list-style-type: none;
+	display: grid;
+	grid-template-columns: var(--grid-template-columns);
+	gap: var(--icon-gap, var(--spacing-md));
+	place-content: start;
+	margin: 0;
+}
+
+/* define grid-template-columns independently for nested lists */
+.mai-list-start {
+	--grid-template-columns: auto 1fr;
+}
+
+.mai-list-top {
+	--grid-template-columns: 1fr;
+}
+
+.mai-list-icon-wrap,
+.mai-list-icon {
+	line-height: 1;
+}
+
+.mai-list-icon-wrap {
+	display: block;
+	/* height: 100%; */
+	/* min-height: 0; */
+	margin-top: var(--icon-margin-top, 0px);
+	text-align: var(--icon-align, center);
+}
+
+.mai-list-icon {
+	display: inline-block;
+	padding: var(--icon-padding, unset);
+	background: var(--icon-background, unset);
+	border-radius: var(--icon-border-radius, unset);
+}
+
+.mai-list-icon::before {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mai-list-content {
+	margin-top: var(--content-margin-top, 0px);
+}
+
+.mai-list-icons .mai-list-icon::before {
+	-webkit-mask-image: var(--icon, unset);
+	mask-image: var(--icon, unset);
+	-webkit-mask-position: center;
+	mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	width: var(--icon-size, 20px);
+	height: var(--icon-size, 20px);
+	background: var(--icon-color, currentColor);
+	content: "";
+}
+
+.mai-list-numbers .mai-list-item {
+	counter-increment: mai-list;
+}
+
+.mai-list-numbers .mai-list-icon::before {
+	width: var(--icon-size, 20px);
+	height: var(--icon-size, 20px);
+	color: var(--icon-color, currentColor);
+	font-weight: var(--mai-list-number-font-weight, var(--heading-font-weight));
+	font-size: var(--icon-size, 36px);
+	font-family: var(--mai-list-number-font-family, var(--heading-font-family));
+	content: counter(mai-list);
+}
diff --git a/assets/mai-lists.css b/assets/mai-lists.css
@@ -1,17 +1,21 @@
+.editor-styles-wrapper .mai-list,
 .mai-list {
-	line-height: 1.5;
-	--list-margin: 0;
-	--list-padding: 0;
-	--list-item-margin: 0;
-	--sub-list-margin: 0;
+	/* This --sub-list-margin should match what's in Mai Engine _list.scss. */
+	/* --sub-list-margin: var(--list-margin, var(--list-margin-top, 0) var(--list-margin-right, 0) var(--list-margin-bottom, var(--spacing-sm)) var(--list-margin-left, 1.75em)); */
 	--paragraph-margin-bottom: var(--spacing-xs);
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	line-height: 1.5;
 }
 
 .mai-list-item {
+	list-style-type: none;
 	display: grid;
 	grid-template-columns: var(--grid-template-columns);
 	gap: var(--icon-gap, var(--spacing-md));
 	place-content: start;
+	margin: 0;
 }
 
 /* define grid-template-columns independently for nested lists */
@@ -30,6 +34,8 @@
 
 .mai-list-icon-wrap {
 	display: block;
+	/* height: 100%; */
+	/* min-height: 0; */
 	margin-top: var(--icon-margin-top, 0px);
 	text-align: var(--icon-align, center);
 }

diff --git a/assets/mai-lists.min.css b/assets/mai-lists.min.css
diff --git a/blocks/mai-list-item/block.json b/blocks/mai-list-item/block.json
@@ -6,8 +6,7 @@
   "textdomain": "mai-lists",
   "parent": [ "acf/mai-list" ],
   "acf": {
-    "mode": "preview",
-    "renderCallback": "mai_do_list_item_block"
+    "mode": "preview"
   },
   "supports": {
     "align": false,

diff --git a/blocks/mai-list-item/block.php b/blocks/mai-list-item/block.php
@@ -3,89 +3,155 @@
 // Prevent direct file access.
 defined( 'ABSPATH' ) || die;
 
-add_action( 'acf/init', 'mai_register_list_item_block' );
-/**
- * Registers the list blocks.
- *
- * @since 1.0.0
- * @since TBD Converted to block.json via `register_block_type()`.
- *
- * @return void
- */
-function mai_register_list_item_block() {
-	if ( ! class_exists( 'acf_pro' ) ) {
-		return;
+class Mai_List_Item_Block {
+	/**
+	 * Construct the class.
+	 */
+	function __construct() {
+		$this->hooks();
 	}
 
-	$icon    = '<svg role="img" aria-hidden="true" focusable="false" style="display:block;" width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path d="M22,17.5c-0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l-0,-1Z" style="fill:#231f20;"/><path d="M16,17.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M10.5,17.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M4,17.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-1,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l1,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/></g><g><path d="M4,5.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-1,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l1,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M22,5.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-15,0c-0.276,0 -0.5,0.224 -0.5,0.5l-0,1c-0,0.276 0.224,0.5 0.5,0.5l15,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/></g><g><path d="M22,11.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M16,11.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M10.5,11.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M4,11.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-1,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l1,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/></g></svg>';
-	$version = acf_get_setting( 'version' );
+	/**
+	 * Add hooks.
+	 *
+	 * @since TBD
+	 *
+	 * @return void
+	 */
+	function hooks() {
+		add_action( 'acf/init', [ $this, 'register_block' ] );
+		add_action( 'acf/init', [ $this, 'register_field_group' ], 12 ); // 12 to make sure clone fields are registered.
+	}
+
+	/**
+	 * Registers block.
+	 *
+	 * @since TBD
+	 *
+	 * @return void
+	 */
+	function register_block() {
+		if ( ! class_exists( 'Mai_Engine' ) ) {
+			return;
+		}
 
-	// If at least ACF 6.0.0, register via block.json.
-	if ( $version && version_compare( $version, '6.0.0', '>=' ) ) {
-		// Mai List Item.
 		register_block_type( __DIR__ . '/block.json',
 			[
-				'icon' => $icon,
-			]
-		);
-	}
-	// ACF Pro less than 6.0.0, register the old ACF way.
-	elseif ( function_exists( 'acf_register_block_type' ) ) {
-		// Mai List Item.
-		acf_register_block_type(
-			[
-				'name'              => 'mai-list-item',
-				'title'             => __( 'Mai List Item', 'mai-lists' ),
-				'description'       => __( 'A list item in for Mai List block.', 'mai-lists' ),
-				'render_callback'   => 'mai_do_list_item_block',
-				'category'          => 'widget',
-				'icon'              => $icon,
-				'parent'            => [ 'acf/mai-list' ],
-				'api_version'       => 2,
-				'acf_block_version' => 2,
-				'supports'          => [
-					'align' => false,
-					'mode'  => false,
-					'jsx'   => true,
-				],
+				'icon'            => '<svg role="img" aria-hidden="true" focusable="false" style="display:block;" width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path d="M22,17.5c-0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l-0,-1Z" style="fill:#231f20;"/><path d="M16,17.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M10.5,17.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M4,17.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-1,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l1,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/></g><g><path d="M4,5.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-1,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l1,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M22,5.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-15,0c-0.276,0 -0.5,0.224 -0.5,0.5l-0,1c-0,0.276 0.224,0.5 0.5,0.5l15,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/></g><g><path d="M22,11.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M16,11.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M10.5,11.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-3.5,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l3.5,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/><path d="M4,11.5c0,-0.276 -0.224,-0.5 -0.5,-0.5l-1,0c-0.276,0 -0.5,0.224 -0.5,0.5l0,1c0,0.276 0.224,0.5 0.5,0.5l1,0c0.276,0 0.5,-0.224 0.5,-0.5l0,-1Z" style="fill:#231f20;"/></g></svg>',
+				'render_callback' => [ $this, 'render_block' ],
 			]
 		);
 	}
-}
 
-/**
- * Renders each list item.
- *
- * @since 0.1.0
- *
- * @return void
- */
-function mai_do_list_item_block( $block, $content = '', $is_preview = false ) {
-	$template = [ [ 'core/paragraph', [], [] ] ];
-	$inner    = sprintf( '<InnerBlocks template="%s" />', esc_attr( wp_json_encode( $template ) ) );
-	$args     = [
-		'preview'          => $is_preview,
-		'content'          => $inner,
-		'style'            => get_field( 'style' ),
-		'icon'             => get_field( 'icon' ),
-		'icon_brand'       => get_field( 'icon_brand' ),
-		'color_icon'       => get_field( 'color_icon' ),
-		'color_background' => get_field( 'color_background' ),
-	];
+	/**
+	 * Callback function to render the block.
+	 *
+	 * @since TBD
+	 *
+	 * @param array    $attributes The block attributes.
+	 * @param string   $content    The block content.
+	 * @param bool     $is_preview Whether or not the block is being rendered for editing preview.
+	 * @param int      $post_id    The current post being edited or viewed.
+	 * @param WP_Block $block      The block instance (since WP 5.5).
+	 *
+	 * @return void
+	 */
+	function render_block( $attributes, $content, $is_preview, $post_id, $block ) {
+		$template = [ [ 'core/paragraph', [], [] ] ];
+		$inner    = sprintf( '<InnerBlocks template="%s" />', esc_attr( wp_json_encode( $template ) ) );
+		$args     = [
+			'preview'          => $is_preview,
+			'content'          => $inner,
+			'style'            => get_field( 'style' ),
+			'icon'             => get_field( 'icon' ),
+			'icon_brand'       => get_field( 'icon_brand' ),
+			'color_icon'       => get_field( 'color_icon' ),
+			'color_background' => get_field( 'color_background' ),
+		];
 
-	// Swap for brand.
-	if ( 'brands' === $args['style'] ) {
-		$args['icon'] = $args['icon_brand'];
-	}
+		// Swap for brand.
+		if ( 'brands' === $args['style'] ) {
+			$args['icon'] = $args['icon_brand'];
+		}
+
+		// Remove brand.
+		unset( $args['icon_brand'] );
+
+		// Add class.
+		if ( isset( $attributes['className'] ) && ! empty( $attributes['className'] ) ) {
+			$args['class'] = $attributes['className'];
+		}
 
-	// Remove brand.
-	unset( $args['icon_brand'] );
+		// Set the list item.
+		$item = new Mai_List_Item( $args );
 
-	if ( isset( $block['className'] ) && ! empty( $block['className'] ) ) {
-		$args['class'] = $block['className'];
+		// Render.
+		echo $item->get();
 	}
 
-	$item = new Mai_List_Item( $args );
+	/**
+	 * Registers field group.
+	 *
+	 * @since TBD
+	 *
+	 * @return void
+	 */
+	function register_field_group() {
+		if ( ! class_exists( 'Mai_Engine' ) ) {
+			return;
+		}
 
-	echo $item->get();
+		if ( ! function_exists( 'acf_add_local_field_group' ) ) {
+			return;
+		}
+
+		if ( ! class_exists( 'Mai_Icons_Plugin' ) ) {
+			$link   = sprintf( '<a href="%s">%s</a>', admin_url( 'admin.php?page=mai-theme' ), __( 'Mai Icons', 'mai-engine' ) );
+			/* translators: %s is replaced with the linked plugin name. */
+			$text   = sprintf( __( '%s plugin required.', 'mai-engine' ), $link );
+			$fields = [
+				[
+					'key'       => 'mai_icon_missing',
+					'label'     => '',
+					'type'      => 'message',
+					'message'   => $text,
+					'new_lines' => 'wpautop',
+				],
+			];
+		} else {
+			acf_add_local_field_group(
+				[
+					'key'       => 'mai_list_item_field_group',
+					'title'     => __( 'Mai List Item', 'mai-lists' ),
+					'fields'    => [
+						[
+							'key'     => 'mai_list_item_icon_clone',
+							'label'   => __( 'Icon', 'mai-lists' ),
+							'name'    => 'icon_clone',
+							'type'    => 'clone',
+							'display' => 'group', // 'group' or 'seamless'. 'group' allows direct return of actual field names via get_field( 'style' ).
+							'clone'   => [ 'mai_icon_style', 'mai_icon_choices', 'mai_icon_brand_choices' ],
+						],
+						[
+							'key'     => 'mai_list_item_icon_color_clone',
+							'label'   => __( 'Icon Color', 'mai-engine' ),
+							'name'    => 'icon_color_clone',
+							'type'    => 'clone',
+							'display' => 'group', // 'group' or 'seamless'. 'group' allows direct return of actual field names via get_field( 'style' ).
+							'clone'   => [ 'mai_icon_color', 'mai_icon_color_custom', 'mai_icon_background', 'mai_icon_background_custom' ],
+						],
+					],
+					'location' => [
+						[
+							[
+								'param'    => 'block',
+								'operator' => '==',
+								'value'    => 'acf/mai-list-item',
+							],
+						],
+					],
+				]
+			);
+		}
+	}
 }
diff --git a/blocks/mai-list/block.json b/blocks/mai-list/block.json
@@ -7,10 +7,9 @@
   "textdomain": "mai-lists",
   "style": "",
   "script": "",
-  "editorStyle": "file:./../../assets/mai-lists.min.css",
+  "editorStyle": "mai-lists",
   "acf": {
-    "mode": "preview",
-    "renderCallback": "mai_do_list_block"
+    "mode": "preview"
   },
   "supports": {
     "align": [ "wide", "full" ],