Skip to content

Allow hidden blocks #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LZylstra merged 2 commits into from
Nov 11, 2025
Merged

Allow hidden blocks #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da7c7a6
Allow hidden blocks and fix mobile styling media
LZylstra Nov 10, 2025
463081c
Change to container queries
LZylstra Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions components/Block/Columns.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,13 @@ const { data: block, refresh } = useAsyncData(props.uuid, () =>

const fillBlocks = ['block_quote', 'block_code'];

const hasMedia = (blocks: Array<{ collection: string }>) => {
return blocks?.some((block) => block.collection === 'block_media') ?? false;
};

const colAHasMedia = computed(() => hasMedia(block.value?.col_a ?? []));
const colBHasMedia = computed(() => hasMedia(block.value?.col_b ?? []));

autoApply(`[data-block-id="${props.uuid}"]`, refresh);
</script>

Expand All @@ -44,7 +51,7 @@ autoApply(`[data-block-id="${props.uuid}"]`, refresh);
: undefined
"
>
<div class="column">
<div class="column" :class="{ 'has-media': colAHasMedia }">
<BaseBlock
v-for="row in block.col_a"
:key="row.id"
Expand All @@ -54,7 +61,7 @@ autoApply(`[data-block-id="${props.uuid}"]`, refresh);
/>
</div>

<div class="column">
<div class="column" :class="{ 'has-media': colBHasMedia }">
<BaseBlock
v-for="row in block.col_b"
:key="row.id"
Expand Down Expand Up @@ -94,7 +101,6 @@ autoApply(`[data-block-id="${props.uuid}"]`, refresh);
grid-column: auto / span 2;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-4);

.fill {
Expand All @@ -105,8 +111,18 @@ autoApply(`[data-block-id="${props.uuid}"]`, refresh);
gap: var(--space-8);
}

// On mobile, reorder so text appears above media
@container (width <= 50rem) {
order: 1;

&.has-media {
order: 2;
}
}

@container (width > 50rem) {
grid-column: auto / span 1;
order: unset;
Comment on lines +114 to +125
Copy link

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The styling changes mix @container queries (lines 95, 110) with @media queries (lines 115, 123) in the same component. This inconsistency could lead to unexpected behavior since container queries are scoped to the container size while media queries are based on viewport size. Consider using @container queries consistently for both breakpoints to ensure the columns respond to their container's size rather than the viewport size.

Copilot uses AI. Check for mistakes.
Copy link
Member

@bryantgillespie bryantgillespie Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@LZylstra Can we update to container queries to stay consistent here?

Copy link
Member

@bryantgillespie bryantgillespie Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aside from that GTG


&:first-child {
--column-inset-inline-end: var(--space-10);
Expand Down
1 change: 1 addition & 0 deletions components/PageBuilder.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface PageSectionBlock {
spacing: 'none' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
width: 'full' | 'standard' | 'narrow';
key: string | null;
hidden?: boolean | null;
experiment?: Experiment | string | null;
experiment_variant?: ExperimentVariant | string | null;
}
Expand Down
6 changes: 6 additions & 0 deletions pages/[...permalink].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const { data: page } = await useAsyncData(
'sort',
'width',
'key',
'hidden',
{
experiment: ['id', 'feature_flag'],
experiment_variant: ['id', 'key', 'experiment'],
Expand Down Expand Up @@ -80,6 +81,11 @@ const sections = computed(() => {
return unref(page)?.blocks?.reduce((acc, block) => {
const section = acc.at(-1);

// Skip hidden blocks
if (block.hidden === true) {
return acc;
}

// Determine if the block should be added based on experiment variant
let addBlock = true;

Expand Down
1 change: 1 addition & 0 deletions types/schema/routes/page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export interface PageBlock {
negative_offset: boolean;
width: 'full' | 'standard' | 'narrow';
key: string | null;
hidden: boolean | null;
experiment: string | Experiment | null;
experiment_variant: string | ExperimentVariant | null;
}