diff --git a/code/ui/blocks/src/blocks/Subtitle.stories.tsx b/code/ui/blocks/src/blocks/Subtitle.stories.tsx
index 4fe4a2ef6a19..6ee1e865baba 100644
--- a/code/ui/blocks/src/blocks/Subtitle.stories.tsx
+++ b/code/ui/blocks/src/blocks/Subtitle.stories.tsx
@@ -99,6 +99,6 @@ export const OfStringMetaAttached: Story = {
parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
};
export const Children: Story = {
- parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+ parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: false },
render: () => This subtitle is a string passed as a children,
};
diff --git a/code/ui/blocks/src/blocks/Subtitle.tsx b/code/ui/blocks/src/blocks/Subtitle.tsx
index 9b7556e9c7c6..055ed047cc12 100644
--- a/code/ui/blocks/src/blocks/Subtitle.tsx
+++ b/code/ui/blocks/src/blocks/Subtitle.tsx
@@ -25,8 +25,17 @@ export const Subtitle: FunctionComponent = (props) => {
throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
}
- const { preparedMeta } = useOf(of || 'meta', ['meta']);
- const { componentSubtitle, docs } = preparedMeta.parameters || {};
+ let preparedMeta;
+ try {
+ preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta;
+ } catch (error) {
+ if (children && !error.message.includes('did you forget to use ?')) {
+ // ignore error about unattached CSF since we can still render children
+ throw error;
+ }
+ }
+
+ const { componentSubtitle, docs } = preparedMeta?.parameters || {};
if (componentSubtitle) {
deprecate(
diff --git a/code/ui/blocks/src/blocks/Title.tsx b/code/ui/blocks/src/blocks/Title.tsx
index 55b85ebad717..28ac06136ef1 100644
--- a/code/ui/blocks/src/blocks/Title.tsx
+++ b/code/ui/blocks/src/blocks/Title.tsx
@@ -42,7 +42,7 @@ export const Title: FunctionComponent = (props) => {
}
}
- const content = children || extractTitle(preparedMeta.title);
+ const content = children || extractTitle(preparedMeta?.title);
return content ? {content} : null;
};