Community - Width & Height attribute - Pagebuilder image #767

app/code/Magento/PageBuilderImageAttribute/README.md

@@ -0,0 +1,2 @@
+# Magento_PageBuilderImageAttribute module
+

app/code/Magento/PageBuilderImageAttribute/Test/Mftf/Data/ImageData.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<entities xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:mftf:DataGenerator/etc/dataProfileSchema.xsd">
+    <!-- Image Width -->
+    <entity name="PageBuilderImageWidthProperty" type="pagebuilder_width_property">
+        <data key="name">Width</data>
+        <data key="section">general</data>
+        <data key="fieldName">image_attribute_width</data>
+        <data key="value">123</data>
+    </entity>
+    <!-- Image Height -->
+    <entity name="PageBuilderImageHeightProperty" type="pagebuilder_Height_property">
+        <data key="name">Height</data>
+        <data key="section">general</data>
+        <data key="fieldName">image_attribute_height</data>
+        <data key="value">123</data>
+    </entity>
+    <!-- Mobile Image Width -->
+    <entity name="PageBuilderMobileImageWidthProperty" type="pagebuilder_mobile_width_property">
+        <data key="name">Width</data>
+        <data key="section">general</data>
+        <data key="fieldName">mobile_image_attribute_width</data>
+        <data key="value">123</data>
+    </entity>
+    <!-- Mobile Image Height -->
+    <entity name="PageBuilderMobileImageHeightProperty" type="pagebuilder_mobile_Height_property">
+        <data key="name">Height</data>
+        <data key="section">general</data>
+        <data key="fieldName">mobile_image_attribute_height</data>
+        <data key="value">123</data>
+    </entity>
+</entities>

app/code/Magento/PageBuilderImageAttribute/composer.json

@@ -0,0 +1,20 @@
+{
+    "name": "magento/module-page-builder-image-attribute",
+    "description": "Width & Height attribute - Pagebuilder image",
+    "require": {
+        "magento/framework": "*",
+        "php": "~8.1.0||~8.2.0||~8.3.0"
+    },
+    "type": "magento2-module",
+    "license": [
+        "proprietary"
+    ],
+    "autoload": {
+        "files": [
+            "registration.php"
+        ],
+        "psr-4": {
+            "Magento\\PageBuilderImageAttribute\\": ""
+        }
+    }
+}

app/code/Magento/PageBuilderImageAttribute/etc/module.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" ?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * Changes by: Ajay Prajapati
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="Magento_PageBuilderImageAttribute" setup_version="1.0.0">
+        <sequence>
+            <module name="Magento_PageBuilder" />
+        </sequence>
+    </module>
+</config>

app/code/Magento/PageBuilderImageAttribute/registration.php

@@ -0,0 +1,11 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * Changes by: Ajay Prajapati
+ */
+
+declare(strict_types=1);
+
+use Magento\Framework\Component\ComponentRegistrar;
+
+ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Magento_PageBuilderImageAttribute', __DIR__);

app/code/Magento/PageBuilderImageAttribute/view/adminhtml/pagebuilder/content_type/image.xml

@@ -0,0 +1,56 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
+    <type name="image"
+          label="Image"
+          component="Magento_PageBuilder/js/content-type"
+          preview_component="Magento_PageBuilder/js/content-type/image/preview"
+          form="pagebuilder_image_form"
+          menu_section="media"
+          icon="icon-pagebuilder-image"
+          sortOrder="1"
+          translate="label">
+        <children default_policy="deny"/>
+        <appearances>
+            <appearance default="true"
+                        name="full-width"
+                        preview_template="Magento_PageBuilder/content-type/image/full-width/preview"
+                        master_template="Magento_PageBuilder/content-type/image/full-width/master"
+                        reader="Magento_PageBuilder/js/master-format/read/configurable">
+                <elements>
+                    <element name="desktop_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <static_style source="max-width" value="100%"/>
+                        <static_style source="height" value="auto"/>
+                        <attribute name="image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
+                        <attribute name="image_attribute_width" source="width"/>
+                        <attribute name="image_attribute_height" source="height"/>
+                    </element>
+                    <element name="mobile_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <static_style source="max-width" value="100%"/>
+                        <static_style source="height" value="auto"/>
+                        <attribute name="mobile_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                        <attribute name="alt" source="alt"/>
+                        <attribute name="title_attribute" source="title"/>
+                        <attribute name="mobile_image_attribute_width" source="width"/>
+                        <attribute name="mobile_image_attribute_height" source="height"/>
+                    </element>
+                </elements>
+            </appearance>
+        </appearances>
+    </type>
+</config>

app/code/Magento/PageBuilderImageAttribute/view/adminhtml/ui_component/pagebuilder_image_form.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form">
+    <fieldset name="general" sortOrder="20">
+        <field name="image_attribute_width" formElement="input" sortOrder="10">
+            <settings>
+                <validation>
+                    <rule name="validate-digits" xsi:type="boolean">true</rule>
+                </validation>
+                <dataType>number</dataType>
+                <label translate="true">Image Attribute Width</label>
+                <addAfter translate="true">px</addAfter>
+                <additionalClasses>
+                    <class name="admin__field-small">true</class>
+                </additionalClasses>
+                <dataScope>image_attribute_width</dataScope>
+            </settings>
+        </field>
+        <field name="image_attribute_height" formElement="input" sortOrder="11">
+            <settings>
+                <validation>
+                    <rule name="validate-digits" xsi:type="boolean">true</rule>
+                </validation>
+                <dataType>number</dataType>
+                <label translate="true">Image Attribute Height</label>
+                <addAfter translate="true">px</addAfter>
+                <additionalClasses>
+                    <class name="admin__field-small">true</class>
+                </additionalClasses>
+                <dataScope>image_attribute_height</dataScope>
+            </settings>
+        </field>
+        <field name="mobile_image_attribute_width" formElement="input" sortOrder="12">
+            <settings>
+                <validation>
+                    <rule name="validate-digits" xsi:type="boolean">true</rule>
+                </validation>
+                <dataType>number</dataType>
+                <label translate="true">Mobile Image Attribute Width</label>
+                <addAfter translate="true">px</addAfter>
+                <additionalClasses>
+                    <class name="admin__field-small">true</class>
+                </additionalClasses>
+                <dataScope>mobile_image_attribute_width</dataScope>
+            </settings>
+        </field>
+        <field name="mobile_image_attribute_height" formElement="input" sortOrder="13">
+            <settings>
+                <validation>
+                    <rule name="validate-digits" xsi:type="boolean">true</rule>
+                </validation>
+                <dataType>number</dataType>
+                <label translate="true">Mobile Image Attribute Height</label>
+                <addAfter translate="true">px</addAfter>
+                <additionalClasses>
+                    <class name="admin__field-small">true</class>
+                </additionalClasses>
+                <dataScope>mobile_image_attribute_height</dataScope>
+            </settings>
+        </field>
+    </fieldset>
+</form>

app/code/Magento/_metapackage/composer.json

@@ -7,7 +7,8 @@
         "magento/module-cms-page-builder-analytics": "*",
         "magento/module-page-builder-admin-analytics": "*",
         "magento/module-catalog-page-builder-analytics": "*",
-        "magento/module-aws-s3-page-builder": "*"
+        "magento/module-aws-s3-page-builder": "*",
+        "magento/module-page-builder-image-attribute": "*"
     },
     "type": "metapackage"
 }

dev/tests/static/testsuite/Magento/Test/Integrity/_files/blacklist/composer_root_modules_pagebuilder.txt

@@ -4,3 +4,4 @@ magento/module-page-builder-admin-analytics
 magento/module-catalog-page-builder-analytics
 magento/module-cms-page-builder-analytics
 magento/module-aws-s3-page-builder
+magento/module-page-builder-image-attribute