diff --git a/app/code/Magento/Widget/Block/Adminhtml/Widget/Instance/Edit/Tab/Main/Layout.php b/app/code/Magento/Widget/Block/Adminhtml/Widget/Instance/Edit/Tab/Main/Layout.php
index 83efbfa550e4d..0e79127cd1418 100644
--- a/app/code/Magento/Widget/Block/Adminhtml/Widget/Instance/Edit/Tab/Main/Layout.php
+++ b/app/code/Magento/Widget/Block/Adminhtml/Widget/Instance/Edit/Tab/Main/Layout.php
@@ -32,17 +32,25 @@ class Layout extends \Magento\Backend\Block\Template implements \Magento\Framewo
      */
     protected $_productType;
 
+    /**
+     * @var \Magento\Framework\Serialize\Serializer\Json
+     */
+    private $serializer;
+
     /**
      * @param \Magento\Backend\Block\Template\Context $context
      * @param \Magento\Catalog\Model\Product\Type $productType
      * @param array $data
+     * @param \Magento\Framework\Serialize\Serializer\Json|null $serializer
      */
     public function __construct(
         \Magento\Backend\Block\Template\Context $context,
         \Magento\Catalog\Model\Product\Type $productType,
-        array $data = []
+        array $data = [],
+        \Magento\Framework\Serialize\Serializer\Json $serializer = null
     ) {
         $this->_productType = $productType;
+        $this->serializer = $serializer;
         parent::__construct($context, $data);
     }
 
@@ -335,17 +343,26 @@ public function getPageGroups()
         $pageGroups = [];
         if ($widgetInstance->getPageGroups()) {
             foreach ($widgetInstance->getPageGroups() as $pageGroup) {
-                $pageGroups[] = [
-                    'page_id' => $pageGroup['page_id'],
-                    'group' => $pageGroup['page_group'],
-                    'block' => $pageGroup['block_reference'],
-                    'for_value' => $pageGroup['page_for'],
-                    'layout_handle' => $pageGroup['layout_handle'],
-                    $pageGroup['page_group'] . '_entities' => $pageGroup['entities'],
-                    'template' => $pageGroup['page_template'],
-                ];
+                $pageGroups[] = $this->serializer->serialize($this->getPageGroup($pageGroup));
             }
         }
         return $pageGroups;
     }
+
+    /**
+     * @param array $pageGroup
+     * @return array
+     */
+    private function getPageGroup(array $pageGroup)
+    {
+        return [
+            'page_id' => $pageGroup['page_id'],
+            'group' => $pageGroup['page_group'],
+            'block' => $pageGroup['block_reference'],
+            'for_value' => $pageGroup['page_for'],
+            'layout_handle' => $pageGroup['layout_handle'],
+            $pageGroup['page_group'] . '_entities' => $pageGroup['entities'],
+            'template' => $pageGroup['page_template'],
+        ];
+    }
 }
diff --git a/app/code/Magento/Widget/view/adminhtml/templates/instance/edit/layout.phtml b/app/code/Magento/Widget/view/adminhtml/templates/instance/edit/layout.phtml
index 8482e948a7580..c2c6600129421 100644
--- a/app/code/Magento/Widget/view/adminhtml/templates/instance/edit/layout.phtml
+++ b/app/code/Magento/Widget/view/adminhtml/templates/instance/edit/layout.phtml
@@ -487,7 +487,7 @@ window.WidgetInstance = WidgetInstance;
 
 jQuery(function(){
     <?php foreach ($block->getPageGroups() as $pageGroup): ?>
-        WidgetInstance.addPageGroup(<?php /* @noEscape */ echo Zend_Json::encode($pageGroup) ?>);
+        WidgetInstance.addPageGroup(<?php /* @noEscape */ echo $pageGroup ?>);
     <?php endforeach; ?>
     Event.observe(document, 'product:changed', function(event){
         WidgetInstance.checkProduct(event);