Skip to content

Commit 327f9c5

Browse files
kieuphan2406kieuphan2406
committed
Merge remote-tracking branch 'trigger/develop' into MAGETWO-87898-Stabilize-PageBuilder-EE
2 parents e0babb3 + c944739 commit 327f9c5

File tree

78 files changed

+622
-186
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+622
-186
lines changed

‎app/code/Magento/PageBuilder/Model/Source/VisualSelect.php

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\PageBuilder\Model\Source;
10+
11+
/**
12+
* Prepares options for Visual Select
13+
*/
14+
class VisualSelect extends \Magento\Eav\Model\Adminhtml\System\Config\Source\Inputtype
15+
{
16+
/**
17+
* @var \Magento\Framework\View\Asset\Repository
18+
*/
19+
private $assetRepo;
20+
21+
/**
22+
* @var array
23+
*/
24+
private $optionsData;
25+
26+
/**
27+
* @var string|null
28+
*/
29+
private $optionsSize;
30+
31+
/**
32+
* Visual Select constructor.
33+
*
34+
* @param \Magento\Framework\View\Asset\Repository $assetRepo
35+
* @param array $optionsData
36+
* @param string|null $optionsSize
37+
*/
38+
public function __construct(
39+
\Magento\Framework\View\Asset\Repository $assetRepo,
40+
array $optionsData,
41+
$optionsSize
42+
) {
43+
$this->assetRepo = $assetRepo;
44+
$this->optionsData = $optionsData;
45+
$this->optionsSize = $optionsSize;
46+
}
47+
48+
/**
49+
* Returns options for Visual Select based on di configuration
50+
*
51+
* @return array
52+
*/
53+
public function toOptionArray(): array
54+
{
55+
if ($this->optionsData) {
56+
foreach ($this->optionsData as $optionKey => $optionValue) {
57+
if (isset($optionValue['icon'])) {
58+
$optionValue['icon'] = $this->assetRepo->getUrl($optionValue['icon']);
59+
}
60+
$optionValue['size'] = $this->optionsSize ?? 'small';
61+
$this->optionsData[$optionKey] = $optionValue;
62+
}
63+
} else {
64+
return [];
65+
}
66+
67+
return $this->optionsData;
68+
}
69+
}

‎app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/Driver.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ public function render(array $itemData, array $additionalData = [])
8585

8686
$imageAttributes = [
8787
'style' => 'background-image: url('
88-
. "'{{media url=gene-cms"
88+
. "'{{media url=wysiwyg"
8989
. $eavData['image']
9090
. "}}'); "
9191
. 'min-height: 300px; background-size: auto; background-repeat: no-repeat; '
@@ -96,7 +96,7 @@ public function render(array $itemData, array $additionalData = [])
9696

9797
$mobileImageAttributes = [
9898
'style' => 'background-image: url('
99-
. "'{{media url=gene-cms"
99+
. "'{{media url=wysiwyg"
100100
. (isset($eavData['image']) ? $eavData['image'] : $eavData['mobile_image'])
101101
. "}}'); "
102102
. 'min-height: 300px; background-size: auto; background-repeat: no-repeat; '

‎app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/Image.php

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,12 @@ public function render(array $itemData, array $additionalData = [])
6161
$rootElementHtml = '<figure' . $this->printAttributes($rootElementAttributes);
6262

6363
$linkAttributes = [
64-
'href' => '{{media url=gene-cms' . $eavData['image'] . '}}',
64+
'href' => '{{media url=wysiwyg' . $eavData['image'] . '}}',
6565
'title' => $eavData['title_tag'] ?? ''
6666
];
6767

6868
$imageAttributes = [
69-
'src' => '{{media url=gene-cms' . $eavData['image'] . '}}',
69+
'src' => '{{media url=wysiwyg' . $eavData['image'] . '}}',
7070
'alt' => $eavData['alt_tag'] ?? '',
7171
'title' => $eavData['title_tag'] ?? '',
7272
'style' => 'max-width: 100%; height: auto;'
@@ -75,7 +75,7 @@ public function render(array $itemData, array $additionalData = [])
7575
$mobileImageHtml = '';
7676
if (isset($eavData['mobile_image'])) {
7777
$mobileImageAttributes = [
78-
'src' => '{{media url=gene-cms' . $eavData['mobile_image'] . '}}',
78+
'src' => '{{media url=wysiwyg' . $eavData['mobile_image'] . '}}',
7979
'alt' => $eavData['alt_tag'] ?? '',
8080
'title' => $eavData['title_tag'] ?? '',
8181
'style' => 'max-width: 100%; height: auto;'

‎app/code/Magento/PageBuilder/Setup/DataConverter/StyleExtractor.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ public function extractStyle(array $formData, array $stylesToExtract = [])
4545
'background-color' => isset($formData['background_color'])
4646
? $this->colorConverter->convert($formData['background_color']) : '',
4747
'background-image' => !empty($formData['background_image'])
48-
? ('url(\'{{media url=gene-cms' . $formData['background_image'] . '}}\')') : '',
48+
? ('url(\'{{media url=wysiwyg' . $formData['background_image'] . '}}\')') : '',
4949
'border-color' => isset($formData['border_color'])
5050
? $this->colorConverter->convert($formData['border_color']) : '',
5151
'border-width' => $formData['border_width'] ?? '',

‎app/code/Magento/PageBuilder/Setup/MoveImages.php

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\PageBuilder\Setup;
10+
11+
use Magento\Framework\App\Filesystem\DirectoryList;
12+
13+
/**
14+
* Moves images from old BlueFoot directory to new PageBuilder directory
15+
*/
16+
class MoveImages
17+
{
18+
/**
19+
* @var \Magento\Framework\Filesystem
20+
*/
21+
private $filesystem;
22+
23+
/**
24+
* @var \Magento\Framework\Filesystem\Driver\File
25+
*/
26+
private $fileDriver;
27+
28+
/**
29+
* @var DirectoryList
30+
*/
31+
private $directoryList;
32+
33+
/**
34+
* @var \Psr\Log\LoggerInterface
35+
*/
36+
private $logger;
37+
38+
/**
39+
* @param \Magento\Framework\Filesystem $filesystem
40+
*/
41+
public function __construct(
42+
\Magento\Framework\Filesystem $filesystem,
43+
\Magento\Framework\Filesystem\Driver\File $fileDriver,
44+
\Magento\Framework\App\Filesystem\DirectoryList $directoryList,
45+
\Psr\Log\LoggerInterface $logger
46+
) {
47+
$this->filesystem = $filesystem;
48+
$this->fileDriver = $fileDriver;
49+
$this->directoryList = $directoryList;
50+
$this->logger = $logger;
51+
}
52+
53+
/**
54+
* Move images from BlueFoot folder to PageBuilder folder
55+
*
56+
* @return void
57+
*/
58+
public function move(): void
59+
{
60+
// check if /pub/media/gene-cms is readable
61+
$blueFootImagesPath = $this->directoryList->getPath('media') . DIRECTORY_SEPARATOR . 'gene-cms';
62+
$blueFootDir = $this->filesystem->getDirectoryReadByPath($blueFootImagesPath);
63+
if (!$blueFootDir->isReadable()) {
64+
$this->logger->error(sprintf('The path "%s" is not readable.', $blueFootDir->getAbsolutePath()));
65+
return;
66+
}
67+
68+
// check if /pub/media/wysiwyg is writable
69+
$pageBuilderImagesPath = $this->directoryList->getPath('media') . DIRECTORY_SEPARATOR . 'wysiwyg';
70+
$pageBuilderDir = $this->filesystem->getDirectoryWrite(DirectoryList::MEDIA);
71+
if (!$pageBuilderDir->isWritable()) {
72+
$this->logger->error(sprintf('The path "%s" is not writable.', $pageBuilderDir->getAbsolutePath()));
73+
return;
74+
}
75+
76+
$allFiles = $blueFootDir->readRecursively();
77+
try {
78+
// move images
79+
foreach ($allFiles as $file) {
80+
if ($blueFootDir->isFile($file)) {
81+
$newImagePath = $pageBuilderImagesPath . DIRECTORY_SEPARATOR . $file;
82+
if (!$this->fileDriver->isExists(dirname($newImagePath))) {
83+
$this->fileDriver->createDirectory(dirname($newImagePath));
84+
}
85+
$this->fileDriver->rename($blueFootImagesPath . DIRECTORY_SEPARATOR . $file, $newImagePath);
86+
}
87+
}
88+
89+
// remove gene-cms folder
90+
$this->fileDriver->deleteDirectory($blueFootImagesPath);
91+
} catch (\Magento\Framework\Exception\LocalizedException $e) {
92+
$this->logger->error($e->getMessage());
93+
} catch (\Exception $e) {
94+
$message = 'An error has occurred moving images for PageBuilder. The error message was: ' .
95+
$e->getMessage();
96+
$this->logger->critical($message);
97+
}
98+
}
99+
}

‎app/code/Magento/PageBuilder/Setup/Patch/Data/MigrateToPageBuilder.php

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
use Magento\Framework\Setup\Patch\DataPatchInterface;
1212
use Magento\Framework\Setup\ModuleDataSetupInterface;
13+
use Magento\PageBuilder\Setup\MoveImages;
1314

1415
class MigrateToPageBuilder implements DataPatchInterface
1516
{
@@ -23,18 +24,26 @@ class MigrateToPageBuilder implements DataPatchInterface
2324
*/
2425
private $moduleDataSetup;
2526

27+
/**
28+
* @var MoveImages $moveImages
29+
*/
30+
private $moveImages;
31+
2632
/**
2733
* Constructor
2834
*
2935
* @param \Magento\PageBuilder\Setup\ConvertBlueFootToPageBuilderFactory $convertBlueFootToPageBuilderFactory
3036
* @param ModuleDataSetupInterface $moduleDataSetup
37+
* @param MoveImages $moveImages
3138
*/
3239
public function __construct(
3340
\Magento\PageBuilder\Setup\ConvertBlueFootToPageBuilderFactory $convertBlueFootToPageBuilderFactory,
34-
ModuleDataSetupInterface $moduleDataSetup
41+
ModuleDataSetupInterface $moduleDataSetup,
42+
MoveImages $moveImages
3543
) {
3644
$this->convertBlueFootToPageBuilderFactory = $convertBlueFootToPageBuilderFactory;
3745
$this->moduleDataSetup = $moduleDataSetup;
46+
$this->moveImages = $moveImages;
3847
}
3948

4049
/**
@@ -47,6 +56,7 @@ public function apply()
4756
if ($this->moduleDataSetup->tableExists('gene_bluefoot_entity')) {
4857
$this->updateEavConfiguration();
4958
$this->convertBlueFootToPageBuilderFactory->create(['setup' => $this->moduleDataSetup])->convert();
59+
$this->moveImages->move();
5060
}
5161
}
5262

‎app/code/Magento/PageBuilder/docs/visual-select.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# Visual Select
2+
3+
## What's in this topic
4+
This topic describes how to extend some Page Builder fields to accommodate a custom look and feel for the text alignment option.
5+
6+
The text alignment field for each content block, in the Advanced section, now shows an icon and title. You can customize the text alignment field to show this new look and feel for all content blocks.
7+
8+
All image formats are supported for icons, though we suggest using an SVG format.
9+
10+
## Overview
11+
12+
To add Visual Select customization to a Page Builder content block:
13+
1. [Override the select component with an element template](#element-template)
14+
2. [Add Visual Select to the XML config](#xml-config)
15+
16+
## Override the select component with an element template {#element-template}
17+
18+
We use the default select component in the `/app/code/Magento/PageBuilder/view/adminhtml/ui-component/pagebuilder_base_form.xml` file. You can override the default template, specifying an element template for this functionality, to implement the Visual Select option.
19+
20+
In the provided template, specify `<elementTmpl>`:
21+
22+
``` xml
23+
<field name="text_align" sortOrder="10" formElement="select">
24+
<settings>
25+
<dataType>text</dataType>
26+
<label translate="true">Alignment</label>
27+
<elementTmpl>Magento_PageBuilder/form/element/align</elementTmpl>
28+
</settings>
29+
```
30+
31+
## Add Visual Select to the XML config {#xml-config}
32+
33+
The available options for select, `value`, `title`, and `icon`, can be provided by the PHP class that implements the `\Magento\Framework\Option\ArrayInterface` method.
34+
35+
Options should return an array with the following format:
36+
37+
``` php
38+
[
39+
value => "value", //key used in the component dataSource
40+
title => "Title",
41+
icon => "path/to/picture/on/server"
42+
]
43+
```
44+
45+
These new configuration values are used in the `align.html` template file stored in Page Builder's `app/code/Magento/Pagebuilder/view/adminhtml/web/template/form/element` directory.
46+
47+
Use a virtual type of `Magento\PageBuilder\Model\Source\VisualSelect` in your module's `di.xml` configuration file to define the options in a visual select field.
48+
49+
``` xml
50+
<virtualType name="AlignmentSource" type="Magento\PageBuilder\Model\Source\VisualSelect">
51+
<arguments>
52+
<argument name="optionsSize" xsi:type="string">small</argument>
53+
<argument name="optionsData" xsi:type="array">
54+
<item name="0" xsi:type="array">
55+
<item name="value" xsi:type="string">default</item>
56+
<item name="title" xsi:type="string" translate="true">Default</item>
57+
</item>
58+
<item name="1" xsi:type="array">
59+
<item name="value" xsi:type="string">left</item>
60+
<item name="title" xsi:type="string" translate="true">Left</item>
61+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/left.svg</item>
62+
</item>
63+
<item name="2" xsi:type="array">
64+
<item name="value" xsi:type="string">center</item>
65+
<item name="title" xsi:type="string" translate="true">Center</item>
66+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/center.svg</item>
67+
</item>
68+
<item name="3" xsi:type="array">
69+
<item name="value" xsi:type="string">right</item>
70+
<item name="title" xsi:type="string" translate="true">Right</item>
71+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/right.svg</item>
72+
</item>
73+
</argument>
74+
</arguments>
75+
</virtualType>
76+
```

‎app/code/Magento/PageBuilder/etc/adminhtml/di.xml

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,4 +102,30 @@
102102
</argument>
103103
</arguments>
104104
</type>
105+
<virtualType name="AlignmentSource" type="Magento\PageBuilder\Model\Source\VisualSelect">
106+
<arguments>
107+
<argument name="optionsSize" xsi:type="string">small</argument>
108+
<argument name="optionsData" xsi:type="array">
109+
<item name="0" xsi:type="array">
110+
<item name="value" xsi:type="string">default</item>
111+
<item name="title" xsi:type="string" translate="true">Default</item>
112+
</item>
113+
<item name="1" xsi:type="array">
114+
<item name="value" xsi:type="string">left</item>
115+
<item name="title" xsi:type="string" translate="true">Left</item>
116+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/left.svg</item>
117+
</item>
118+
<item name="2" xsi:type="array">
119+
<item name="value" xsi:type="string">center</item>
120+
<item name="title" xsi:type="string" translate="true">Center</item>
121+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/center.svg</item>
122+
</item>
123+
<item name="3" xsi:type="array">
124+
<item name="value" xsi:type="string">right</item>
125+
<item name="title" xsi:type="string" translate="true">Right</item>
126+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/right.svg</item>
127+
</item>
128+
</argument>
129+
</arguments>
130+
</virtualType>
105131
</config>

0 commit comments

Comments
 (0)