Merge pull request #27147 from storybookjs/jeppe/27139-bug-unable-to-use-subtitle-doc-block-in-mdx-without-a-story

Docs: Fix Subtitle block when no `of` prop passed
(cherry picked from commit 1ba1a7e)

Author: shilman

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: () => <Subtitle>This subtitle is a string passed as a children</Subtitle>,
 };

code/ui/blocks/src/blocks/Subtitle.tsx

@@ -25,8 +25,17 @@ export const Subtitle: FunctionComponent<SubtitleProps> = (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 <Meta of={} />?')) {
+      // ignore error about unattached CSF since we can still render children
+      throw error;
+    }
+  }
+
+  const { componentSubtitle, docs } = preparedMeta?.parameters || {};
 
   if (componentSubtitle) {
     deprecate(

code/ui/blocks/src/blocks/Title.tsx

@@ -42,7 +42,7 @@ export const Title: FunctionComponent<TitleProps> = (props) => {
     }
   }
 
-  const content = children || extractTitle(preparedMeta.title);
+  const content = children || extractTitle(preparedMeta?.title);
 
   return content ? <PureTitle className="sbdocs-title sb-unstyled">{content}</PureTitle> : null;
 };