Skip to content

Commit e56edfd

Browse files
omiroshnichenkoomiroshnichenko
authored
Merge pull request #1 from magento-obsessive-owls/imported-magento-magento2-page-builder-631
[Imported] MC-35402: [Page Builder] New top-level Full-Width and Full-Bleed comp�
2 parents 981eebb + 7cdfba5 commit e56edfd

File tree

7 files changed

+253
-33
lines changed

7 files changed

+253
-33
lines changed

‎README.md

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,25 @@ Welcome to the Magento 2 Page Builder project!
66

77
Page Builder introduces an intuitive, drag-and-drop interface for creating digital content, powered by content types like images, videos, banners, etc. with instant preview capabilities that enable non-technical users to take control of their content. It allows to create new pages, enrich products and categories, and launch content updates quickly and easily without the help of a front-end web developer.
88

9+
## Wiki
10+
11+
Public access to the Page Builder wiki is found here:
12+
13+
https://github.com/magento/magento2-page-builder-docs/wiki.
14+
15+
The wiki provides more information on the Page Builder project, such as:
16+
17+
- [Links to User Guide tutorials](https://github.com/magento/magento2-page-builder-docs/wiki#page-builder-tutorials)
18+
- [Page Builder roadmaps](https://github.com/magento/magento2-page-builder-docs/wiki#roadmap)
19+
- [MFTF best practices](https://github.com/magento/magento2-page-builder-docs/wiki/%5BRough-Draft%5D-MFTF-Best-Practices)
20+
- [Partners Acceleration Program](https://github.com/magento/magento2-page-builder-docs/wiki/Partners-Acceleration-Program-Team)
21+
922
## Documentation
10-
Complete documentation located on the [Magento DevDocs](https://devdocs.magento.com/page-builder/docs/):
11-
- Project [roadmap](https://github.com/magento/magento2-page-builder/wiki#roadmap) contains information about project phases
12-
- How to start local development described in the [installation guide](https://devdocs.magento.com/page-builder/docs/getting-started/install-pagebuilder.html)
23+
Complete documentation located on the [Magento DevDocs](https://devdocs.magento.com/page-builder/docs/), including what you need to know to start local development as described in the [installation guide](https://devdocs.magento.com/page-builder/docs/getting-started/install-pagebuilder.html).
1324

1425
## Community Engineering Slack
1526

16-
To connect with Magento team and the Community, join us on the [Magento Community Engineering Slack](https://magentocommeng.slack.com).
27+
To connect with Magento team and the Community, join us on the [Magento Community Engineering Slack](https://magentocommeng.slack.com).
1728
If you are interested in joining Slack, or a specific channel, use our [self signup](https://opensource.magento.com/slack) link.
1829

1930
Magento 2 Page Builder project slack channel: [#pagebuilder](https://magentocommeng.slack.com/archives/CHB455HPF)

‎app/code/Magento/PageBuilder/Model/Stage/Preview.php

Lines changed: 52 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,47 @@
77

88
namespace Magento\PageBuilder\Model\Stage;
99

10+
use Magento\Framework\App\Area;
11+
use Magento\Framework\App\Config\ScopeConfigInterface;
12+
use Magento\Framework\App\State;
13+
use Magento\Framework\View\Design\Theme\ThemeProviderInterface;
14+
use Magento\Framework\View\DesignInterface;
15+
use Magento\Store\Model\App\Emulation;
16+
use Magento\Store\Model\ScopeInterface;
17+
use Magento\Store\Model\StoreManagerInterface;
18+
1019
/**
1120
* Handle placing Magento into Page Builder Preview mode and emulating the store front
1221
*/
1322
class Preview
1423
{
1524
/**
16-
* @var \Magento\Store\Model\App\Emulation
25+
* @var Emulation
1726
*/
1827
private $emulation;
1928

2029
/**
21-
* @var \Magento\Framework\App\State
30+
* @var State
2231
*/
2332
private $appState;
2433

2534
/**
26-
* @var \Magento\Framework\View\DesignInterface
35+
* @var DesignInterface
2736
*/
2837
private $design;
2938

3039
/**
31-
* @var \Magento\Framework\View\Design\Theme\ThemeProviderInterface
40+
* @var ThemeProviderInterface
3241
*/
3342
private $themeProvider;
3443

3544
/**
36-
* @var \Magento\Store\Model\StoreManagerInterface
45+
* @var StoreManagerInterface
3746
*/
3847
private $storeManager;
3948

4049
/**
41-
* @var \Magento\Framework\App\Config\ScopeConfigInterface
50+
* @var ScopeConfigInterface
4251
*/
4352
private $scopeConfig;
4453

@@ -49,20 +58,20 @@ class Preview
4958

5059
/**
5160
* Preview constructor.
52-
* @param \Magento\Store\Model\App\Emulation $emulation
53-
* @param \Magento\Framework\App\State $appState
54-
* @param \Magento\Framework\View\DesignInterface $design
55-
* @param \Magento\Framework\View\Design\Theme\ThemeProviderInterface $themeProvider
56-
* @param \Magento\Store\Model\StoreManagerInterface $storeManager
57-
* @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
61+
* @param Emulation $emulation
62+
* @param State $appState
63+
* @param DesignInterface $design
64+
* @param ThemeProviderInterface $themeProvider
65+
* @param StoreManagerInterface $storeManager
66+
* @param ScopeConfigInterface $scopeConfig
5867
*/
5968
public function __construct(
60-
\Magento\Store\Model\App\Emulation $emulation,
61-
\Magento\Framework\App\State $appState,
62-
\Magento\Framework\View\DesignInterface $design,
63-
\Magento\Framework\View\Design\Theme\ThemeProviderInterface $themeProvider,
64-
\Magento\Store\Model\StoreManagerInterface $storeManager,
65-
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
69+
Emulation $emulation,
70+
State $appState,
71+
DesignInterface $design,
72+
ThemeProviderInterface $themeProvider,
73+
StoreManagerInterface $storeManager,
74+
ScopeConfigInterface $scopeConfig
6675
) {
6776
$this->emulation = $emulation;
6877
$this->appState = $appState;
@@ -79,7 +88,7 @@ public function __construct(
7988
*/
8089
public function getPreviewArea() : string
8190
{
82-
return \Magento\Framework\App\Area::AREA_FRONTEND;
91+
return Area::AREA_FRONTEND;
8392
}
8493

8594
/**
@@ -95,7 +104,7 @@ public function startPreviewMode($callback, $storeId = null)
95104
$this->isPreview = true;
96105

97106
if (!$storeId) {
98-
$storeId = $this->storeManager->getDefaultStoreView()->getId();
107+
$storeId = $this->getStoreId();
99108
}
100109
$this->emulation->startEnvironmentEmulation($storeId);
101110

@@ -104,7 +113,7 @@ public function startPreviewMode($callback, $storeId = null)
104113
function () use ($callback) {
105114
$themeId = $this->scopeConfig->getValue(
106115
'design/theme/theme_id',
107-
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
116+
ScopeInterface::SCOPE_STORE
108117
);
109118
$theme = $this->themeProvider->getThemeById($themeId);
110119
$this->design->setDesignTheme($theme, $this->getPreviewArea());
@@ -131,4 +140,26 @@ public function isPreviewMode() : bool
131140
{
132141
return $this->isPreview;
133142
}
143+
144+
/**
145+
* Returns store id by default store view or store id from the available store if default store view is null
146+
*
147+
* @return int|null
148+
*/
149+
private function getStoreId(): ?int
150+
{
151+
$storeId = null;
152+
$store = $this->storeManager->getDefaultStoreView();
153+
if ($store) {
154+
$storeId = (int) $store->getId();
155+
} else {
156+
$stores = $this->storeManager->getStores();
157+
if (count($stores)) {
158+
$store = array_shift($stores);
159+
$storeId = (int) $store->getId();
160+
}
161+
}
162+
163+
return $storeId;
164+
}
134165
}

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StorefrontActionGroup/StorefrontValidateCategoryDescriptionAppearanceActionGroup.xml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
10+
<actionGroup name="StorefrontValidateCategoryDescriptionAppearanceActionGroup">
11+
<annotations>
12+
<description>Validates the data-appearance attribute value for the category-description first direct child row.</description>
13+
</annotations>
14+
<arguments>
15+
<argument name="dataAppearance" defaultValue="contained" type="string"/>
16+
</arguments>
17+
<waitForElementVisible time="30" selector="{{StorefrontCategoryMainSection.DataAppearanceRow(dataAppearance)}}" stepKey="waitForDataAppearanceRow"/>
18+
</actionGroup>
19+
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderCatalogSection/StorefrontCategoryMainSection.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@
1010
<section name="StorefrontCategoryMainSection">
1111
<!-- This goes in CE repo -->
1212
<element name="CatalogDescription" type="text" selector="//div[@class='category-description']"/>
13+
<element name="DataAppearanceRow" type="text" selector="div.category-description > [data-appearance='{{appearance}}']" parameterized="true"/>
1314
</section>
1415
</sections>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminCatalogCategoryPageBuilderTest/PageBuilderCatalogCategoryCreateCategoryWithPageBuilderDescriptionAppearanceTest.xml

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
10+
<test name="PageBuilderCatalogCategoryCreateCategoryWithPageBuilderDescriptionAppearanceTest">
11+
<annotations>
12+
<features value="PageBuilder"/>
13+
<stories value="Catalog Category"/>
14+
<title value="Validate Category Description Row Appearance"/>
15+
<description value="Validates the proper value of Category description top-level row's data-appearance on storefront"/>
16+
<severity value="CRITICAL"/>
17+
<useCaseId value="MC-35402"/>
18+
<testCaseId value="MC-37710"/>
19+
<group value="pagebuilder"/>
20+
<group value="pagebuilder-layout"/>
21+
<group value="pagebuilder-fullwidth"/>
22+
<group value="pagebuilder-catalog-category"/>
23+
</annotations>
24+
<before>
25+
<createData entity="_defaultCategory" stepKey="createPreReqCategory"/>
26+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
27+
<actionGroup ref="NavigateToCreatedCategoryActionGroup" stepKey="navigateToCreatedProductEditPage">
28+
<argument name="Category" value="$$createPreReqCategory$$"/>
29+
</actionGroup>
30+
<actionGroup ref="expandAdminCategorySection" stepKey="expandAdminCategorySection"/>
31+
</before>
32+
<after>
33+
<deleteData createDataKey="createPreReqCategory" stepKey="deletePreReqCategory"/>
34+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
35+
</after>
36+
<!-- Set Category Description Row to Full-Width -->
37+
<actionGroup ref="openPageBuilderForAttribute" stepKey="enablePageBuilderOnCatalog"/>
38+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
39+
<argument name="contentType" value="PageBuilderRowContentType"/>
40+
</actionGroup>
41+
<actionGroup ref="chooseVisualSelectOption" stepKey="setAppearance">
42+
<argument name="property" value="PageBuilderRowAppearance_FullWidth"/>
43+
</actionGroup>
44+
<actionGroup ref="saveEditPanelSettingsFullScreen" stepKey="saveEditPanelSettings"/>
45+
<!-- Add Heading to Row -->
46+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
47+
<argument name="contentType" value="PageBuilderHeadingContentType"/>
48+
</actionGroup>
49+
<actionGroup ref="dragContentTypeToStage" stepKey="dragHeadingOntoStage">
50+
<argument name="contentType" value="PageBuilderHeadingContentType"/>
51+
</actionGroup>
52+
<actionGroup ref="enterHeadingOnStage" stepKey="enterHeadingOnStage">
53+
<argument name="headingText" value="PageBuilderHeadingTextProperty"/>
54+
</actionGroup>
55+
<actionGroup ref="exitPageBuilderFullScreen" stepKey="exitPageBuilderFullScreen"/>
56+
<!-- Set Category Layout and Save -->
57+
<actionGroup ref="SetLayoutActionGroup" stepKey="setFullWidthLayout">
58+
<argument name="designSection" value="CategoryDesignSection"/>
59+
<argument name="layoutOption" value="PageBuilderFullWidthLayout.category"/>
60+
</actionGroup>
61+
<actionGroup ref="saveCatalogCategory" stepKey="saveCatalogCategory"/>
62+
<!-- Validate Storefront Category Description Row Appearance -->
63+
<actionGroup ref="NavigateToStorefrontForCreatedPageActionGroup" stepKey="navigateToStorefront">
64+
<argument name="page" value="$createPreReqCategory.name$.html"/>
65+
</actionGroup>
66+
<actionGroup ref="StorefrontValidateCategoryDescriptionAppearanceActionGroup" stepKey="validateDataAppearance">
67+
<argument name="dataAppearance" value="full-width"/>
68+
</actionGroup>
69+
</test>
70+
</tests>

‎app/code/Magento/PageBuilder/Test/Unit/Model/PreviewTest.php

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
declare(strict_types=1);
7+
8+
namespace Magento\PageBuilder\Test\Unit\Model;
9+
10+
use Magento\Framework\App\Config\ScopeConfigInterface;
11+
use Magento\Framework\App\State;
12+
use Magento\Framework\View\Design\Theme\ThemeProviderInterface;
13+
use Magento\Framework\View\DesignInterface;
14+
use Magento\PageBuilder\Model\Stage\Preview;
15+
use Magento\Store\Model\App\Emulation;
16+
use Magento\Store\Model\Store;
17+
use Magento\Store\Model\StoreManagerInterface;
18+
use PHPUnit\Framework\MockObject\MockObject;
19+
use PHPUnit\Framework\TestCase;
20+
21+
/**
22+
* Test for Page Builder Stage Preview Model.
23+
*/
24+
class PreviewTest extends TestCase
25+
{
26+
/**
27+
* @var Preview
28+
*/
29+
private $model;
30+
31+
/**
32+
* @var Emulation|MockObject
33+
*/
34+
private $emulation;
35+
36+
/**
37+
* @var StoreManagerInterface|MockObject
38+
*/
39+
private $storeManagerInterface;
40+
41+
/**
42+
* @inheritdoc
43+
*/
44+
protected function setUp(): void
45+
{
46+
parent::setUp();
47+
48+
$this->storeManagerInterface = $this->createMock(StoreManagerInterface::class);
49+
$this->emulation = $this->createMock(Emulation::class);
50+
$this->model = new Preview(
51+
$this->emulation,
52+
$this->createMock(State::class),
53+
$this->createMock(DesignInterface::class),
54+
$this->createMock(ThemeProviderInterface::class),
55+
$this->storeManagerInterface,
56+
$this->createMock(ScopeConfigInterface::class)
57+
);
58+
}
59+
60+
/**
61+
* Checks that method works properly even if the getDefaultStoreView returns null
62+
*
63+
* @return void
64+
* @throws \Exception
65+
*/
66+
public function testStartPreviewModeWithEmptyDefaultStoreView(): void
67+
{
68+
$callback = function () {
69+
};
70+
$storeId = 2;
71+
$store = $this->createMock(Store::class);
72+
$store->method('getId')
73+
->willReturn($storeId);
74+
$this->storeManagerInterface->method('getDefaultStoreView')
75+
->willReturn(null);
76+
$this->storeManagerInterface->expects($this->once())
77+
->method('getStores')
78+
->willReturn([$store]);
79+
$this->emulation->expects($this->once())
80+
->method('startEnvironmentEmulation')
81+
->with($storeId);
82+
$this->model->startPreviewMode($callback);
83+
}
84+
}

‎app/code/Magento/PageBuilder/view/frontend/templates/catalog/category/view/description.phtml

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,36 @@
55
*/
66
?>
77
<?php
8-
// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis
8+
// phpcs:disable Magento2.Templates.ThisInTemplate.FoundHelper
99

1010
/**
1111
* Category view template
1212
*
1313
* @var $block \Magento\Catalog\Block\Category\View
1414
*/
1515
?>
16-
<?php if ($description = $block->getCurrentCategory()->getDescription()) :?>
16+
<?php if ($description = $block->getCurrentCategory()->getDescription()):?>
1717
<div class="category-description">
1818
<?php $descriptionHtml = $this->helper(Magento\Catalog\Helper\Output::class)->categoryAttribute(
1919
$block->getCurrentCategory(),
2020
$description,
2121
'description'
2222
);?>
23-
<?php if (stripos($description, 'data-appearance="contained"') === false) :?>
23+
<?php if (stripos($description, 'data-appearance') === false):?>
2424
<div data-content-type="row" data-appearance="contained" data-element="main">
25-
<div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-element="inner" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px 0px 10px; padding: 10px;">
26-
<div data-content-type="html" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
25+
<div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-element="inner"
26+
style="justify-content: flex-start; display: flex; flex-direction: column;
27+
background-position: left top; background-size: cover; background-repeat: no-repeat;
28+
background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px;
29+
margin: 0px 0px 10px; padding: 10px;">
30+
<div data-content-type="html" data-appearance="default" data-element="main"
31+
style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
2732
<?= /* @noEscape */$descriptionHtml; ?>
2833
</div>
2934
</div>
3035
</div>
31-
<?php else : ?>
36+
<?php else: ?>
3237
<?= /* @noEscape */$descriptionHtml; ?>
33-
<?php endif; ?>
38+
<?php endif; ?>
3439
</div>
3540
<?php endif; ?>
36-

0 commit comments

Comments
 (0)