MD Composer extras

Тег вроде [center] всё ещё потребует плагина, но вы правы, @Steven :+1:

На момент создания этого компонента приходилось использовать HTML-теги <div>. Однако теперь в темах и компонентах можно использовать конструкцию [wrap="foo"][/wrap].

Подробнее об этом можно прочитать здесь:

Вот простой пример:

[wrap="center"] 
Некоторый текст по центру 
[/wrap]

После обработки поста это превратится в следующую разметку:

<div class="d-wrap" data-wrap="center">
  <p>Некоторый текст по центру</p>
</div>

Затем вы можете обратиться к этому элементу с помощью CSS-селектора атрибутов следующим образом:

[data-wrap="center"] {
  text-align: center;
}

И это отобразится примерно так как в предпросмотре редактора, так и в готовом посте:

Или:

[wrap="right"] 
Некоторый текст по правому краю 
[/wrap]

Это приведёт к следующей обработанной разметке:

<div class="d-wrap" data-wrap="right">
  <p>Некоторый текст по правому краю</p>
</div>

Затем вы можете добавить следующий CSS:

[data-wrap="right"] {
  text-align: right;
}

Для получения такого результата:

Поскольку компонент в настоящее время использует HTML-атрибут align, это изменение должно быть на 100% обратно совместимым.

Попробуйте, когда у вас будет время, и не стесняйтесь написать мне в личные сообщения, если у вас возникнут вопросы.

12 лайков