How to add custom field CMS block selection in CMS page Magento 2?

Question

I want to add a CMS block option on the cms page admin side. Can anyone please guide me?

Like this: https://prnt.sc/KMSLIdK9Vfoe

Answer 1

Follow these steps to complete your requirement.

Step1: app/code/Dotsquares/CmsField/registration.php

  <?php
    \Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::MODULE,
        'Dotsquares_CmsField',
        __DIR__
    );
  ?>

Step2: app/code/Dotsquares/CmsField/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Dotsquares_CmsField" />
</config>

Step3: app/code/Dotsquares/CmsField/Setup/InstallSchema.php

<?php
    namespace Dotsquares\SellerLocator\Setup;
    
    class InstallSchema implements \Magento\Framework\Setup\InstallSchemaInterface
    {
        public function install(\Magento\Framework\Setup\SchemaSetupInterface $setup, \Magento\Framework\Setup\ModuleContextInterface $context)
        {
            $installer = $setup;
     
            $installer->startSetup();
    
            $setup->getConnection()->addColumn(
            $setup->getTable('cms_page'),
                'block_id',
                    [
                        'type' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
                        'length' => 255,
                        'nullable' => true,
                        'comment' => 'CMS Block Id'
                    ]
            );
    
            $installer->endSetup();
        }
    }
 ?>

Step4: app/code/Dotsquares/CmsField/view/adminhtml/ui_component/cms_page_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="custom_design_update">
        <field name="block_id" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">page</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">CMS Block</label>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="Dotsquares\CmsField\Model\Page\Source\Options"/>
                        <caption translate="true">-- Please Select --</caption>
                    </settings>
                </select>
            </formElements>
        </field>
    </fieldset>
</form>

Step5: app/code/Dotsquares/CmsField/Model/Page/Source/Options.php

<?php
namespace Dotsquares\CmsField\Model\Page\Source;

use Magento\Framework\Data\OptionSourceInterface;

class Options implements OptionSourceInterface
{
    protected $_blockFactory;

    public function __construct(
        \Magento\Cms\Model\BlockFactory $blockFactory
    )
    {
        $this->_blockFactory = $blockFactory;
    }

    public function toOptionArray()
    {
        $blockOptions = $this->_blockFactory->create()->getCollection();
        $options = [];
        foreach ($blockOptions as $key => $value)
        {
            $options[] = [
                'label' => $value->getTitle(),
                'value' => $value->getBlockId(),
            ];
        }
        $this->options = $options;

        return $options;
    }
}