Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Global Styles: Make a shared component for typography and color previ…
Browse files Browse the repository at this point in the history
…ew (WordPress#62829)

* Global Styles: Make a shared component for typography and color preview

* remove null check that has already happened

Co-authored-by: scruffian <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
Co-authored-by: jeryj <[email protected]>
4 people authored and carstingaxion committed Jul 18, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent a81b4ef commit b74235d
Showing 2 changed files with 48 additions and 30 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* WordPress dependencies
*/
import { __experimentalHStack as HStack } from '@wordpress/components';

/**
* Internal dependencies
*/
import TypographyExample from './typography-example';
import PreviewIframe from './preview-iframe';

const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
return (
<PreviewIframe
label={ variation.title }
isFocused={ isFocused }
withHoverView={ withHoverView }
>
{ ( { ratio, key } ) => (
<HStack
key={ key }
spacing={ 10 * ratio }
justify="center"
style={ {
height: '100%',
overflow: 'hidden',
} }
>
<TypographyExample
variation={ variation }
fontSize={ 85 * ratio }
/>
</HStack>
) }
</PreviewIframe>
);
};

export default StylesPreviewTypography;
Original file line number Diff line number Diff line change
@@ -3,22 +3,19 @@
*/
import {
__experimentalGrid as Grid,
__experimentalVStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import StylesPreviewTypography from '../preview-typography';
import { useTypographyVariations } from '../hooks';
import TypographyExample from '../typography-example';
import PreviewIframe from '../preview-iframe';
import Variation from './variation';
import Subtitle from '../subtitle';

export default function TypographyVariations( { title, gap = 2 } ) {
const typographyVariations = useTypographyVariations();

// Return null if there is only one variation (the default).
if ( typographyVariations?.length <= 1 ) {
return null;
@@ -32,40 +29,22 @@ export default function TypographyVariations( { title, gap = 2 } ) {
gap={ gap }
className="edit-site-global-styles-style-variations-container"
>
{ typographyVariations &&
typographyVariations.length &&
typographyVariations.map( ( variation, index ) => (
{ typographyVariations.map( ( variation, index ) => {
return (
<Variation
key={ index }
variation={ variation }
property="typography"
showTooltip
>
{ ( isFocused ) => (
<PreviewIframe
label={ variation?.title }
isFocused={ isFocused }
>
{ ( { ratio, key } ) => (
<HStack
key={ key }
spacing={ 10 * ratio }
justify="center"
style={ {
height: '100%',
overflow: 'hidden',
} }
>
<TypographyExample
variation={ variation }
fontSize={ 85 * ratio }
/>
</HStack>
) }
</PreviewIframe>
{ () => (
<StylesPreviewTypography
variation={ variation }
/>
) }
</Variation>
) ) }
);
} ) }
</Grid>
</VStack>
);

0 comments on commit b74235d

Please sign in to comment.