Block

Общее описание

Редактируемый элемент Block — это итеративный компонент, который обладает большой мощностью. По сути, блок представляет собой цикл, но вы можете использовать другие редактируемые элементы внутри этого цикла, что позволяет повторять набор редактируемых элементов для создания структурированного контента (например, списка ссылок или галереи изображений). Элементы в цикле и их порядок могут быть определены редактором с помощью управляющих элементов блока, предоставленных в режиме редактирования.

Конфигурация

Название	Тип	Описание
limit	integer	Максимальное количество итераций.
reload	bool	Перезагрузить режим редактирования при добавлении, перемещении или удалении (по умолчанию = false).
default	integer	Если блок пустой, это указывает количество итераций при запуске.
manual	bool	Принудительно устанавливает ручной режим, что позволяет реализовать полностью настраиваемую HTML-разметку для блоков, например, с использованием элементов <table> (устарело, будет удалено в Pimcore 12, вместо этого используйте pimcoremanualblock).
class	string	CSS-класс, который добавляется к окружающему контейнеру этого элемента в режиме редактирования.

Методы

Название	Возвращает	Описание
isEmpty()	bool	Указывает, пуст редактируемый элемент или нет.
getCount()	int	Возвращает общее количество итераций.
getCurrent()	int	Возвращает текущий индекс в процессе итерации.
getElements()	array	Возвращает массив для каждой итерации для доступа к определенным дочерним элементам.

Управляющие элементы блока

Элемент	Операция
+	Добавление нового блока в текущую позицию.
-	Удаление текущего блока.
вверх и вниз	Перемещение блока вверх и вниз.

Основное использование

{% pimcoreblock "contentblock" %}  
    <h2>{{ pimcore_input("subline") }}</h2>  
    {{ pimcore_wysiwyg("content") }}  
{% endpimcoreblock %}  

<!-- Устарело! будет удалено в Pimcore 12 -->  
{% for i in pimcore_block("contentblock").iterator %}  
    <h2>{{ pimcore_input("subline") }}</h2>  
    {{ pimcore_wysiwyg("content") }}  
{% endfor %}  

Результат в режиме редактирования должен выглядеть следующим образом:

И во frontend:

Расширенное использование

Пример для getCurrent()

{% pimcoreblock "contentblock" reload(true) %}  
    {% if _block.current > 0 %}  
        Вставить эту строку только после первой итерации<br />  
        <br />  
    {% endif %}  
  
    <h2>{{ pimcore_input("subline") }}</h2>  
{% endpimcoreblock %}  

<!-- Устарело! будет удалено в Pimcore 12 -->  
{% set myBlock = pimcore_block("contentblock", {"reload": true}) %}  
{% for i in myBlock.iterator %}  
    {% if myBlock.current > 0 %}  
        Вставить эту строку только после первой итерации<br />  
        <br />  
    {% endif %}  
  
    <h2>{{ pimcore_input("subline") }}</h2>  
{% endfor %}  

Внимание Если вам нужен индекс блока, пожалуйста, используйте _block.getCurrentIndex(), вместо _block.current, который является автоинкрементальным индексом (ключом) итератора массива.

Важно Если вы хотите динамически изменить структуру контента для каждого индекса в режиме редактирования, необходимо использовать конфигурацию reload=true.

Использование ручного режима

Ручной блок предлагает вам возможность взаимодействовать с Block так, как вам нравится, что полезно, например, при работе с таблицами:

{% pimcoremanualblock "contentblock" limit(6) %}  
    <table>  
     <tr>  
     {% blockiterate %}  
         <td customAttribute="{{ pimcore_input("myInput").getData() }}">  
            {% do _block.blockStart() %}  
                <div style="width:200px; height:200px;border:1px solid black;">  
                    {{ pimcore_input("myInput") }}  
                </div>  
            {% do _block.blockEnd() %}  
        </td>  
     {% endblockiterate %}  
     </tr>  
</table>  
{% endpimcoremanualblock %}  

<!-- Устарело! будет удалено в Pimcore 12 -->  
{% set block = pimcore_block("gridblock", {"manual": true, "limit": 6}).start() %}  
<table>  
    <tr>  
        {% for b in block.iterator %}  
            {% do block.blockConstruct() %}  
              <td customAttribute="{{ pimcore_input("myInput").getData() }}">  
                    {% do block.blockStart() %}  
                        <div style="width:200px; height:200px;border:1px solid black;">  
                            {{ pimcore_input("myInput") }}  
                        </div>  
                    {% do block.blockEnd() %}  
                </td>  
            {% do block.blockDestruct() %}  
        {% endfor %}  
    </tr>  
</table>  
{% do block.end() %}  

Использование ручного режима с кастомным расположением кнопок

Если вы хотите обернуть кнопки в div или изменить расположение:

{% pimcoremanualblock "gridblock" %}  
    <table>  
        <tr>  
        {% blockiterate %}  
            <td customAttribute="{{ pimcore_input("myInput").data }}">  
                {% do _block.blockStart(false) %}  
                <div style="background-color: #fc0; margin-bottom: 10px; padding: 5px; border: 1px solid black;">  
                    {% do _block.blockControls() %}  
                </div>  
                <div style="width:200px; height:200px;border:1px solid black;">  
                    {{ pimcore_input("myInput") }}  
                </div>  
                {% do _block.blockEnd() %}  
            </td>  
        {% endblockiterate %}  
        </tr>  
    </table>  
{% endpimcoremanualblock %}  

<!-- Устарело! будет удалено в Pimcore 12 -->  
{% set block = pimcore_block("gridblock", {"manual": true}).start() %}  
<table>  
    <tr>  
        {% for b in block.iterator %}  
            {% do block.blockConstruct() %}  
                <td customAttribute="{{ pimcore_input("myInput").data }}">  
                    {% do block.blockStart(false) %}  
                        <div style="background-color: #fc0; margin-bottom: 10px; padding: 5px; border: 1px solid black;">  
                            {% do block.blockControls() %}  
                        </div>  
                        <div style="width:200px; height:200px;border:1px solid black;">  
                            {{ pimcore_input("myInput") }}  
                        </div>  
                    {% do block.blockEnd() %}  
                </td>  
            {% do block.blockDestruct() %}  
        {% endfor %}  
    </tr>  
</table>  
{% do block.end() %}  

Использование ручного режима с дополнительным CSS классом для элемента в режиме редактирования

{% pimcoremanualblock "gridblock" %}  
<div>  
    {% blockiterate %}  
        {% do _block.blockStart(true, false, "my-additional-class") %}  
            Добавляет дополнительный класс 'my-additional-class' к div в режиме редактирования  
        {% do _block.blockEnd() %}  
    {% endblockiterate %}  
</div>  
{% endpimcoremanualblock %}  

<!-- Устарело! будет удалено в Pimcore 12 -->  
{% set block = pimcore_block("gridblock", {"manual": true}).start() %}  
<div>  
    {% for b in block.iterator %}  
        {% do block.blockConstruct() %}  
            {% do block.blockStart(true, false, "my-additional-class") %}  
                Добавляет дополнительный класс 'my-additional-class' к div в режиме редактирования  
            {% do block.blockEnd() %}  
        {% do block.blockDestruct() %}  
    {% endfor %}  
</div>  
{% do block.end() %}  

Доступ к данным внутри элемента Block

Элементы и структура приведены в демонстрационной версии CMS (контент/шаблон по умолчанию).

{# загрузка документа #}  
{% set document = pimcore_document_by_path('/en/More-Stuff/Developers-Corner/Galleries') %}  
  
{# получить первое изображение из первого "gallery-carousel" элемента Brick #}  
{% set image = document.getEditable('content').getElement('gallery-single-images')[5].getBlock('gallery').getElements()[0].getImage('image') %}  
  
{{ dump(document.getEditable('content').getElement('gallery-single-images')) }}  
{{ dump(image.getSrc()) }}