Перестроение таблицы цен на маховик в виде пользовательского блока (примерно за 10 мин.)

Редактор блоков (Gutenberg), несомненно, является центром современного WordPress. С полным редактированием сайта на пути к WordPress Core блоки и все, что они обещают, останутся.

Однако блоки не всегда делают то, что мы хотим, или выглядят так, как нам нравится. Если вы зарабатываете на жизнь дизайном и созданием сайтов, вы знаете, что в Интернете не так уж много готовых шаблонов. В какой-то момент нам нужно, чтобы этот «блок» на странице выглядел или вел себя определенным образом.

Пользовательские блоки — это решение! Но пользовательские блоки требуют от многих людей, которые какое-то время работали с WordPress, совсем другого подхода к разработке.

Другой? Да!

Трудный? Нет!

Я собираюсь показать вам, как вы можете легко создать полностью настраиваемый блок. И это займет около 10 минут. Для любого фрилансера или команды агентства, желающих улучшить навыки работы с редактором блоков, я думаю, вам это понравится!

Блок

Давайте представим, что мы работаем над проектом, и дизайнер вручает нам красивый дизайн для веб-сайта электронной коммерции. Он использует лучшее из WordPress + WooCommerce, но есть несколько элементов, которые просто не работают в готовом виде. Один из них вот этот:

Холуп ! Это выглядит знакомо!

Да, мы собираемся перестроить таблицу цен на маховик как пользовательский блок. ? Существуют готовые блоки таблиц ценообразования, но наша здесь довольно уникальна, поэтому мы собираемся создать свою собственную.

Настройка

Герой этой истории — плагин под названием Genesis Custom Blocks. Это бесплатно на wordpress.org, и есть версия Pro, которая предлагает некоторые интересные дополнительные функции, в том числе:

• Свежая установка WordPress — комплименты Local
• Genesis Custom Blocks (бесплатный) установлен и активен
• Дочерняя тема для темы Genesis Block Theme

Важное примечание: Genesis Custom Blocks не зависит от Genesis Framework, вышеуказанной темы Genesis Block Theme или каких-либо других плагинов или тем.

Регистрация и настройка блока

Прелесть этого плагина в том, что мы можем так много сделать в админке WordPress.

В панели администратора WordPress в левом меню выберите « Пользовательские блоки» > «Добавить новый» .

Теперь мы видим экран Block Builder, в котором мы собираемся настроить множество вещей для нашего блока, включая добавление полей.

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

Детали блока, которые мы добавляем:

• Название: Таблица цен
• Slug: таблица цен
• Значок: Планета Бытия

Поля, которые мы добавляем:

Добавление полей в наш пользовательский блок выглядит так:

После того, как мы добавили все наши поля, это выглядит так:

Когда мы нажимаем «Опубликовать», мы получаем подсказку , что делать дальше.

Это приводит нас к следующему шагу:

Шаблон блока

Блок фактически зарегистрирован и теперь доступен в редакторе блоков. Вы можете перейти к новому посту/странице и добавить блок, как и любой другой. Однако он (пока) ничего не отображал. Здесь в дело вступает шаблонизация.

Пользовательские блоки Genesis позволяют разработчикам WordPress использовать множество методов создания шаблонов, которые мы оттачивали за последнее десятилетие или около того. Это очень просто и покажется вам очень знакомым.

В нашей дочерней теме мы добавляем пару новых папок и файлов, например:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

На что здесь следует обратить внимание:

• Добавляем папку blocks в нашу тему (дочерняя тема).
• Мы добавляем папку, относящуюся к блоку, над которым мы сейчас работаем, и назовем ее так, как называется слаг блока, в данном случае это pricing-table .
• Мы добавляем файл PHP и файл CSS. Здесь мы будем добавлять наш код шаблона.

Начнем с нашего файла PHP, давайте начнем с нашей базовой HTML-разметки и классов CSS.

Это будет выглядеть так:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

На что следует обратить внимание:

• У нас есть куча готовых классов CSS. Примечание: вы можете заняться CSS, но это имеет для вас смысл.
• Мы собираемся использовать HTML-тег <progress> для обработки наших панелей ресурсов.

Теперь мы собираемся работать с простой PHP-функцией, которую плагин предоставляет нам. Есть куча доступных, но вы, вероятно, потратите большую часть своего времени, используя эти 2 ниже. Мы используем исключительно первый в этом блоке.

Итак, с этими функциями наш файл шаблона PHP теперь выглядит так:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

Вы можете видеть, где мы использовали эту block_field() для получения и вывода данных. Мы просто используем слаг поля в качестве аргумента в функции. Например block_field( 'icon' ) . Это, будучи типом поля изображения, возвращает URL-адрес для этого изображения.

Для нашего CSS мы помещаем это в файл шаблона block.css. Опять же, CSS можно использовать как угодно, и код, который я написал, не имеет особого отношения к этому руководству, но я оставлю его здесь, чтобы вы могли его проверить.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

Наиболее интересной частью CSS здесь является стиль <progress> . Немного сумбурно, но это то, что есть. Вы можете переключиться на вложенную настройку div для них и рассчитать ширину набора, если хотите избежать <progress> .

И это все! ?

Резюме:

1. Добавили и настроили блок в админке WP
2. Мы создали файл шаблона PHP с жалкими 29 строками базового HTML и одной функцией PHP.
3. Мы добавили немного CSS в block.css для нашего стиля.

Использование нашего пользовательского блока

Итак, теперь мы можем перепрыгнуть и создать новый пост или страницу и добавить блок. Чтобы сохранить этот стиль с четырьмя столбцами для параметров ценообразования, мы сначала добавляем блок столбцов, а затем помещаем в каждый столбец наш пользовательский блок таблицы цен.

Нажав кнопку «Добавить блок» , вы увидите, что наш блок «Таблица цен» готов к работе.

Ниже показано, как я получил четыре столбца и четыре раза добавил пользовательский блок. Когда я выбираю отдельный блок, вы можете видеть, как он переключается на пользовательский интерфейс формы, который дает нам наши поля для добавления контента. Щелчок вне формы дает нам предварительный просмотр.

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

С нашими проектами, сделанными для нас, чтобы мы могли работать и иметь возможность опираться на блок адаптивных столбцов Гутенберга, общее время сборки этого блока для меня составило менее 10 минут.

Есть несколько вещей, которые вы могли бы сделать, чтобы улучшить блок еще больше:

• Есть несколько строк, которые нужно поставить во множественное число. Т.е. «Сайт WordPress» должен быть «Сайты WordPress» для планов с более чем 1 ограничением сайта. Некоторая базовая логика в файле шаблона PHP может решить эту проблему.
• Вы можете пропустить блок столбцов и вместо этого использовать поле Repeater (функция Pro) и содержать все планы в одном блоке.
• Добавляйте запятые к большим числам.
• Индикаторы выполнения показывают точное значение для максимальных отношений. Это выглядит немного странно. Вы можете переключиться на что-то более концептуальное в отношении значений.

Подведение итогов

Если вы хотите скачать и установить этот блок, вы можете скачать файлы здесь. Документацию по импорту пользовательских блоков можно найти здесь.

Другие важные ссылки:

• Плагин
• Сайт документов
• Сообщество Genesis Slack

Если вы хотите увидеть больше пользовательских блоков Genesis в действии, на недавней сессии в DE{CODE} я построил и продемонстрировал четыре отдельных пользовательских блока (по возрастающей сложности) примерно за 15 минут. Посмотрите запись по запросу прямо здесь.

Я надеюсь, что вы нашли это полезным и поняли, насколько легко использовать возможности редактора блоков для создания нестандартных проектов и сборок.

Ваше здоровье!

Получите бесплатный доступ к темам StudioPress от Genesis с помощью Flywheel!

Важно, чтобы ваш хостинг-провайдер делал для вас все возможное, и это выходит за рамки производительности и безопасности! Благодаря бесплатному доступу к более чем 35 темам StudioPress, созданным Genesis, Flywheel предоставляет вам прекрасную библиотеку тем, чтобы вы могли создавать или перенастраивать свои сайты в соответствии с целями вашего веб-сайта! Узнайте больше о маховике здесь.