Skip to content
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.

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

[pull] trunk from WordPress:trunk #108

Merged
merged 2 commits into from
Dec 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions packages/block-library/src/navigation/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -539,8 +539,8 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
$inner_blocks_html,
$toggle_aria_label_open,
$toggle_aria_label_close,
esc_attr( implode( ' ', $responsive_container_classes ) ),
esc_attr( implode( ' ', $open_button_classes ) ),
esc_attr( trim( implode( ' ', $responsive_container_classes ) ) ),
esc_attr( trim( implode( ' ', $open_button_classes ) ) ),
( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '',
$toggle_button_content,
$toggle_close_button_content,
Expand Down
49 changes: 49 additions & 0 deletions packages/edit-site/src/components/style-book/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,55 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
},
];

// Style book preview subcategories for all blocks section.
export const STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [
...STYLE_BOOK_THEME_SUBCATEGORIES,
{
slug: 'media',
title: __( 'Media' ),
blocks: [ 'core/post-featured-image' ],
},
{
slug: 'widgets',
title: __( 'Widgets' ),
blocks: [],
},
{
slug: 'embed',
title: __( 'Embeds' ),
include: [],
},
];

// Style book preview categories are organised slightly differently to the editor ones.
export const STYLE_BOOK_PREVIEW_CATEGORIES: StyleBookCategory[] = [
{
slug: 'overview',
title: __( 'Overview' ),
blocks: [],
},
{
slug: 'text',
title: __( 'Text' ),
blocks: [
'core/post-content',
'core/home-link',
'core/navigation-link',
],
},
{
slug: 'colors',
title: __( 'Colors' ),
blocks: [],
},
{
slug: 'blocks',
title: __( 'All Blocks' ),
blocks: [],
subcategories: STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES,
},
];

// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
const ROOT_CONTAINER = `
Expand Down
151 changes: 88 additions & 63 deletions packages/edit-site/src/components/style-book/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,11 @@ import {
import { getExamples } from './examples';
import { store as siteEditorStore } from '../../store';
import { useSection } from '../sidebar-global-styles-wrapper';
import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
import { GlobalStylesRenderer } from '../global-styles-renderer';
import {
STYLE_BOOK_COLOR_GROUPS,
STYLE_BOOK_PREVIEW_CATEGORIES,
} from '../style-book/constants';

const {
ExperimentalBlockEditorProvider,
Expand Down Expand Up @@ -91,35 +94,24 @@ const scrollToSection = ( anchorId, iframe ) => {
};

/**
* Parses a Block Editor navigation path to extract the block name and
* build a style book navigation path. The object can be extended to include a category,
* representing a style book tab/section.
* Parses a Block Editor navigation path to build a style book navigation path.
* The object can be extended to include a category, representing a style book tab/section.
*
* @param {string} path An internal Block Editor navigation path.
* @return {null|{block: string}} An object containing the example to navigate to.
*/
const getStyleBookNavigationFromPath = ( path ) => {
if ( path && typeof path === 'string' ) {
if ( path === '/' ) {
if (
path === '/' ||
path.startsWith( '/typography' ) ||
path.startsWith( '/colors' ) ||
path.startsWith( '/blocks' )
) {
return {
top: true,
};
}

if ( path.startsWith( '/typography' ) ) {
return {
block: 'typography',
};
}
let block = path.includes( '/blocks/' )
? decodeURIComponent( path.split( '/blocks/' )[ 1 ] )
: null;
// Default to theme-colors if the path ends with /colors.
block = path.endsWith( '/colors' ) ? 'theme-colors' : block;

return {
block,
};
}
return null;
};
Expand Down Expand Up @@ -313,29 +305,43 @@ function StyleBook( {
) ) }
</Tabs.TabList>
</div>
{ tabs.map( ( tab ) => (
<Tabs.TabPanel
key={ tab.slug }
tabId={ tab.slug }
focusable={ false }
className="edit-site-style-book__tabpanel"
>
<StyleBookBody
category={ tab.slug }
examples={ examples }
isSelected={ isSelected }
onSelect={ onSelect }
settings={ settings }
sizes={ sizes }
title={ tab.title }
goTo={ goTo }
/>
</Tabs.TabPanel>
) ) }
{ tabs.map( ( tab ) => {
const categoryDefinition = tab.slug
? getTopLevelStyleBookCategories().find(
( _category ) =>
_category.slug === tab.slug
)
: null;
const filteredExamples = categoryDefinition
? getExamplesByCategory(
categoryDefinition,
examples
)
: { examples };
return (
<Tabs.TabPanel
key={ tab.slug }
tabId={ tab.slug }
focusable={ false }
className="edit-site-style-book__tabpanel"
>
<StyleBookBody
category={ tab.slug }
examples={ filteredExamples }
isSelected={ isSelected }
onSelect={ onSelect }
settings={ settings }
sizes={ sizes }
title={ tab.title }
goTo={ goTo }
/>
</Tabs.TabPanel>
);
} ) }
</Tabs>
) : (
<StyleBookBody
examples={ examplesForSinglePageUse }
examples={ { examples: examplesForSinglePageUse } }
isSelected={ isSelected }
onClick={ onClick }
onSelect={ onSelect }
Expand Down Expand Up @@ -419,6 +425,44 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
const examples = getExamples( colors );
const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );

let previewCategory = null;
if ( section.includes( '/colors' ) ) {
previewCategory = 'colors';
} else if ( section.includes( '/typography' ) ) {
previewCategory = 'text';
} else if ( section.includes( '/blocks' ) ) {
previewCategory = 'blocks';
const blockName =
decodeURIComponent( section ).split( '/blocks/' )[ 1 ];
if (
blockName &&
examples.find( ( example ) => example.name === blockName )
) {
previewCategory = blockName;
}
} else if ( ! isStatic ) {
previewCategory = 'overview';
}
const categoryDefinition = STYLE_BOOK_PREVIEW_CATEGORIES.find(
( category ) => category.slug === previewCategory
);

// If there's no category definition there may be a single block.
const filteredExamples = categoryDefinition
? getExamplesByCategory( categoryDefinition, examples )
: {
examples: [
examples.find(
( example ) => example.name === previewCategory
),
],
};

// If there's no preview category, show all examples.
const displayedExamples = previewCategory
? filteredExamples
: { examples: examplesForSinglePageUse };

const { base: baseConfig } = useContext( GlobalStylesContext );
const goTo = getStyleBookNavigationFromPath( section );

Expand Down Expand Up @@ -449,7 +493,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
<BlockEditorProvider settings={ settings }>
<GlobalStylesRenderer disableRootPadding />
<StyleBookBody
examples={ examplesForSinglePageUse }
examples={ displayedExamples }
settings={ settings }
goTo={ goTo }
sizes={ sizes }
Expand All @@ -462,7 +506,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
};

export const StyleBookBody = ( {
category,
examples,
isSelected,
onClick,
Expand Down Expand Up @@ -508,13 +551,6 @@ export const StyleBookBody = ( {
if ( hasIframeLoaded && iframeRef?.current ) {
if ( goTo?.top ) {
scrollToSection( 'top', iframeRef?.current );
return;
}
if ( goTo?.block ) {
scrollToSection(
`example-${ goTo?.block }`,
iframeRef?.current
);
}
}
}, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] );
Expand All @@ -541,8 +577,7 @@ export const StyleBookBody = ( {
className={ clsx( 'edit-site-style-book__examples', {
'is-wide': sizes.width > 600,
} ) }
examples={ examples }
category={ category }
filteredExamples={ examples }
label={
title
? sprintf(
Expand All @@ -554,24 +589,14 @@ export const StyleBookBody = ( {
}
isSelected={ isSelected }
onSelect={ onSelect }
key={ category }
key={ title }
/>
</Iframe>
);
};

const Examples = memo(
( { className, examples, category, label, isSelected, onSelect } ) => {
const categoryDefinition = category
? getTopLevelStyleBookCategories().find(
( _category ) => _category.slug === category
)
: null;

const filteredExamples = categoryDefinition
? getExamplesByCategory( categoryDefinition, examples )
: { examples };

( { className, filteredExamples, label, isSelected, onSelect } ) => {
return (
<Composite
orientation="vertical"
Expand Down
Loading