first()['value'] ?? null; }), Setting::classAttribute(), Setting::description(), ]; } public function sanitizeValue($value, array $field) { if (!Collection::make($field['table_list'])->pluck('value')->contains($value)) { return; } return $value; } public function usesAssets(): bool { return true; } public function enqueue(array $field): void { // wp-components: a WordPress core stylesheet (not something this plugin ships), the same one the block // editor uses. render() below reuses its real .components-button(-group) classes and colors, not a // look-alike, so this field genuinely looks like Gutenberg instead of an older wp-admin button. wp_enqueue_style('wp-components'); } /** * The stored value, when it is one of the choices. */ public function displayValue($value, array $field, array $args): string { return Display::choice($value, $field); } public function render(array $field, $value): void { $rows = Collection::make($field['table_list']); // Scopes the style below to this field: several button-group fields can be on the same options page. $groupId = $field['field_name'] . '_group'; print('
'); printf('%s', esc_html($this->text($field, 'field_label'))); // The chosen button ("is-primary": background var(--wp-admin-theme-color)) is normally toggled by React // state; here it follows the native :checked state of its (visually hidden) radio input instead, so no // script has to run first. :has() is what lets a *label* react to its own child being checked. The // !important on margin-left repeats .components-button-group's own rule (see // wp-includes/css/dist/components/style.css) because WordPress' own settings-table label reset // (.form-table td fieldset label, in wp-admin/css/forms.css) sets its margin with !important too -- this // options page prints every field inside a
in a .form-table cell, a place the component's // stylesheet was never written to be used from, and only !important beats !important. printf( '', esc_attr($groupId) ); printf('
', esc_attr($groupId)); $rows->map(function ($row) use ($field, $value, $rows) { $checked = $row['value'] === $value || ($value === false && $row['value'] === $rows->first()['value']); printf( '', esc_attr($field['field_name']), esc_attr($row['value']), checked($checked, true, false), esc_html(Display::choiceLabel($row)) ); }); print('
'); print(wp_kses_post($this->descriptionHtml($field['description'] ?? ''))); print('
'); } }