30ea8e1bac
### What? This PR applies `mergeFieldStyles` to the `BlocksField` component, ensuring that custom admin styles such as `width` are correctly respected when Blocks fields are placed inside row layouts. ### Why? Previously, Blocks fields did not inherit or apply their `admin.width` (or other merged field styles). For example, when placing two Blocks fields side by side inside a row with `width: '50%'`, the widths were ignored, causing layout issues. ### How? - Imported and used `mergeFieldStyles` within `BlocksField`. - Applied the merged styles to the root `<div>` via the `style` prop, consistent with how other field components (like `TextField`) handle styles. Fixes #13498
185 lines
3.8 KiB
TypeScript
185 lines
3.8 KiB
TypeScript
import type { CollectionConfig } from 'payload'
|
|
|
|
import { rowFieldsSlug } from '../../slugs.js'
|
|
|
|
const RowFields: CollectionConfig = {
|
|
slug: rowFieldsSlug,
|
|
versions: true,
|
|
admin: {
|
|
defaultColumns: ['title', 'id'],
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'id',
|
|
label: 'Custom ID',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
label: 'Title within a row',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'field_with_width_a',
|
|
label: 'Field with 50% width',
|
|
type: 'text',
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
},
|
|
{
|
|
name: 'field_with_width_b',
|
|
label: 'Field with 50% width',
|
|
type: 'text',
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'field_with_width_30_percent',
|
|
label: 'Field with 30% width',
|
|
type: 'text',
|
|
admin: {
|
|
width: '30%',
|
|
},
|
|
},
|
|
{
|
|
name: 'field_with_width_60_percent',
|
|
label: 'Field with 60% width',
|
|
type: 'text',
|
|
admin: {
|
|
width: '60%',
|
|
},
|
|
},
|
|
{
|
|
name: 'field_with_width_20_percent',
|
|
label: 'Field with 20% width',
|
|
type: 'text',
|
|
admin: {
|
|
width: '20%',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
label: 'Collapsible 30% width within a row',
|
|
type: 'collapsible',
|
|
fields: [
|
|
{
|
|
name: 'field_within_collapsible_a',
|
|
label: 'Field within collapsible',
|
|
type: 'text',
|
|
},
|
|
],
|
|
admin: {
|
|
width: '30%',
|
|
},
|
|
},
|
|
{
|
|
label: 'Collapsible within a row',
|
|
type: 'collapsible',
|
|
fields: [
|
|
{
|
|
name: 'field_within_collapsible_b',
|
|
label: 'Field within collapsible',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
label: 'Explicit 20% width within a row (A)',
|
|
type: 'text',
|
|
name: 'field_20_percent_width_within_row_a',
|
|
admin: {
|
|
width: '20%',
|
|
},
|
|
},
|
|
{
|
|
label: 'No set width within a row (B)',
|
|
type: 'text',
|
|
name: 'no_set_width_within_row_b',
|
|
},
|
|
{
|
|
label: 'No set width within a row (C)',
|
|
type: 'text',
|
|
name: 'no_set_width_within_row_c',
|
|
},
|
|
{
|
|
label: 'Explicit 20% width within a row (D)',
|
|
type: 'text',
|
|
name: 'field_20_percent_width_within_row_d',
|
|
admin: {
|
|
width: '20%',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'leftColumn',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'leftTextBlock',
|
|
fields: [
|
|
{
|
|
name: 'leftText',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
},
|
|
{
|
|
name: 'rightColumn',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'rightTextBlock',
|
|
fields: [
|
|
{
|
|
name: 'rightText',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
|
|
export default RowFields
|