icon block fixes

includes/blocks/paragraph.php

@@ -48,6 +48,10 @@ function render_paragraph_block( string $html, array $block ): string {
 		$html = render_curved_text( $html, $block, $svg_string );
 	}
 
+	if ( str_contains( $html, 'http://http' ) ) {
+		$html = str_replace( 'http://http', 'http', $html );
+	}
+
 	return $html;
 }
 

includes/extensions/icon.php

@@ -127,9 +127,6 @@ function get_icon_html( string $content, array $block ): string {
 		$figure_classes[] = "has-{$text_color}-color";
 	}
 
-	$figure->setAttribute( 'class', implode( ' ', $figure_classes ) );
-	$span->setAttribute( 'class', implode( ' ', $span_classes ) );
-
 	$aria_label = $img->getAttribute( 'alt' ) ? $img->getAttribute( 'alt' ) : str_replace( '-', ' ', $icon_name ) . __( ' icon', 'blockify' );
 
 	$span->setAttribute( 'title', $attrs['title'] ?? $aria_label );
@@ -189,10 +186,28 @@ function get_icon_html( string $content, array $block ): string {
 		$figure_styles['--wp--custom--icon--color'] = $custom_text_color;
 	}
 
+	$background_color = $attrs['backgroundColor'] ?? null;
+
+	if ( $background_color ) {
+		$figure_styles['--wp--custom--icon--background'] = "var(--wp--preset--color--{$background_color})";
+	}
+
 	if ( $gradient ) {
 		$figure_styles['--wp--custom--icon--color'] = "var(--wp--preset--gradient--{$gradient})";
 	}
 
+	$border_radius = $attrs['style']['border']['radius'] ?? null;
+
+	if ( $border_radius ) {
+		$span_styles['border-radius'] = $border_radius;
+	}
+
+	$padding = $attrs['style']['spacing']['padding'] ?? null;
+
+	if ( $padding ) {
+		$span_styles = add_shorthand_property( $span_styles, 'padding', $padding );
+	}
+
 	$transform       = $attrs['style']['transform'] ?? [];
 	$transform_units = [
 		'rotate'    => 'deg',
@@ -214,6 +229,8 @@ function get_icon_html( string $content, array $block ): string {
 		}
 	}
 
+	$figure->setAttribute( 'class', implode( ' ', $figure_classes ) );
+	$span->setAttribute( 'class', implode( ' ', $span_classes ) );
 	$figure->setAttribute( 'style', css_array_to_string( $figure_styles ) );
 	$span->setAttribute( 'style', css_array_to_string( $span_styles ) );
 
@@ -236,7 +253,11 @@ function get_icon_html( string $content, array $block ): string {
 		}
 	}
 
-	return $dom->saveHTML();
+	$html = $dom->saveHTML();
+	$html = add_position_classes( $html, $block );
+	$html = add_position_styles( $html, $block );
+
+	return $html;
 }
 
 /**

includes/extensions/template-tags.php

@@ -28,6 +28,7 @@
 use function shortcode_exists;
 use function str_contains;
 use function str_replace;
+use function strtolower;
 
 add_filter( 'render_block', NS . 'render_template_tags', 8, 3 );
 /**
@@ -82,6 +83,7 @@ function render_template_tags( string $html, array $block, WP_Block $object ): s
 	$replacements = [];
 
 	foreach ( $without_brackets as $tag ) {
+		$tag         = strtolower( $tag );
 		$replacement = '';
 
 		if ( shortcode_exists( $tag ) ) {

includes/utility/css.php

@@ -108,8 +108,11 @@ function format_custom_property( string $custom_property ): string {
 			(array) ( $global_settings['color']['palette']['theme'] ?? [] ),
 			(array) $theme_json->settings->color->palette
 		);
-
-		$color_slugs = wp_list_pluck( $colors, 'slug' );
+
+		$color_slugs = array_diff(
+			wp_list_pluck( $colors, 'slug' ),
+			get_system_colors()
+		);
 
 		if ( in_array( $custom_property, $color_slugs, true ) ) {
 			return "var(--wp--preset--color--{$custom_property})";

src/scss/blocks/button.scss

@@ -20,5 +20,12 @@
 			justify-content: flex-start;
 		}
 	}
+
+	&[style*="font-weight:"] {
+
+		.wp-element-button {
+			font-weight: inherit;
+		}
+	}
 }
 

src/scss/blocks/template-part.scss

@@ -9,7 +9,7 @@ header.wp-block-template-part {
 	}
 
 	&:not([class*="has-display-"]) {
-		display: initial; // Required for nested sticky elements to work.
+		// display: initial; // Required for nested sticky elements to work.
 	}
 
 	&:not([class*="has-position-"]) {

src/scss/components/site-blocks.scss

@@ -98,6 +98,10 @@
 	align-self: stretch;
 }
 
+.vertical-align-top {
+	vertical-align: top;
+}
+
 .object-fit {
 	object-fit: cover;
 	object-position: center;

src/scss/editor.scss

@@ -303,7 +303,7 @@ div:has(> .blockify-icon-settings) {
 	min-height: 0;
 }
 
-.editor-styles-wrapper div .is-style-icon {
+.editor-styles-wrapper div [style*="--wp--custom--icon--url:"] {
 	background: transparent !important;
 	float: none !important;
 	padding: 0 !important;

src/utility/types.tsx

@@ -1,10 +1,11 @@
 import { CustomSelectControl } from '@wordpress/components';
 import { CSSProperties } from 'react';
-import { BlockAttributes } from '@wordpress/blocks';
+import { BlockAttributes, TemplateArray } from '@wordpress/blocks';
 import {
 	AlignmentToolbar,
 	BlockAlignmentToolbar,
 	BlockControls,
+	EditorTemplateLock,
 } from '@wordpress/block-editor';
 import { Value } from '@wordpress/rich-text';
 import Option = CustomSelectControl.Option;
@@ -59,6 +60,8 @@ declare global {
 		post_types?: string[];
 		uses_context?: string[];
 		enabled?: boolean;
+		template?: TemplateArray | undefined;
+		template_lock?: EditorTemplateLock | undefined;
 	}
 
 	interface CustomField {
@@ -70,6 +73,9 @@ declare global {
 		default?: string | number | boolean | object | null | undefined;
 		subfields?: CustomField[];
 		placeholder?: string;
+		columns?: number;
+		control?: string; // Used by blocks.
+		onChange?: ( newValue: string | number | boolean | object | null | undefined ) => void; // Used by blocks.
 	}
 
 	interface blockify {