Skip to content

Commit

Permalink
Copy over relevant work from #34178
Browse files Browse the repository at this point in the history
  • Loading branch information
tellthemachines committed Jan 5, 2023
1 parent d9f13a8 commit 5ec1a92
Show file tree
Hide file tree
Showing 9 changed files with 442 additions and 3 deletions.
3 changes: 2 additions & 1 deletion lib/compat/wordpress-6.2/block-editor-settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@
function gutenberg_get_block_editor_settings_6_2( $settings ) {
if ( wp_theme_has_theme_json() ) {
// Add the custom CSS as separate style sheet so any invalid CSS entered by users does not break other global styles.
$settings['styles'][] = array(
$settings['styles'][] = array(
'css' => gutenberg_get_global_stylesheet( array( 'custom-css' ) ),
'__unstableType' => 'user',
'isGlobalStyles' => true,
);
$settings['__experimentalStyles'] = wp_get_global_styles();
}

return $settings;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ public function get_item_schema() {
'__experimentalStyles' => array(
'description' => __( 'Styles consolidated from core, theme, and user origins.', 'gutenberg' ),
'type' => 'object',
'context' => array( 'mobile' ),
'context' => array( 'post-editor', 'widgets-editor', 'mobile' ),
),

'__experimentalEnableQuoteBlockV2' => array(
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -164,3 +164,4 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop

export { default as BlockEditorProvider } from './provider';
export { default as useSetting } from './use-setting';
export { default as __experimentalUseStyle } from './use-style';
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const LineHeightControl = ( {
/** Start opting into the new margin-free styles that will become the default in a future version. */
__nextHasNoMarginBottom = false,
__unstableInputWidth = '60px',
placeholder = BASE_DEFAULT_VALUE,
...otherProps
} ) => {
const isDefined = isLineHeightDefined( lineHeight );
Expand Down Expand Up @@ -95,7 +96,7 @@ const LineHeightControl = ( {
__unstableStateReducer={ stateReducer }
onChange={ onChange }
label={ __( 'Line height' ) }
placeholder={ BASE_DEFAULT_VALUE }
placeholder={ placeholder }
step={ STEP }
value={ value }
min={ 0 }
Expand Down
51 changes: 51 additions & 0 deletions packages/block-editor/src/components/use-style/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* External dependencies
*/
import { get } from 'lodash';

/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { useMemo } from '@wordpress/element';

/**
* Internal dependencies
*/
import { useBlockEditContext } from '../block-edit';
import { store as blockEditorStore } from '../../store';
import { getValueFromVariable } from '../../utils/style-variable-resolution';

/**
* Hook that retrieves the global styles of a block.
* It works with nested objects using by finding the value at path.
*
* @param {string|Array} path The path to the setting.
*
* @return {any} Returns the style value defined for the path.
*
* @example
* ```js
* const backgroundColor = useStyle( 'color.background' );
* ```
*/
export default function useStyle( path ) {
const { name: blockName } = useBlockEditContext();

const settings = useSelect( ( select ) => {
return select( blockEditorStore ).getSettings();
}, [] );
const stylesForBlock = get( settings, [
'__experimentalStyles',
'blocks',
blockName,
] );
const value = get( stylesForBlock, path );
return useMemo( () => {
return getValueFromVariable(
settings.__experimentalFeatures,
blockName,
value
);
}, [ settings.__experimentalFeatures, blockName, value ] );
}
3 changes: 3 additions & 0 deletions packages/block-editor/src/hooks/line-height.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { hasBlockSupport } from '@wordpress/blocks';
import LineHeightControl from '../components/line-height-control';
import { cleanEmptyObject } from './utils';
import useSetting from '../components/use-setting';
import useStyle from '../components/use-style';

export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';

Expand All @@ -24,6 +25,7 @@ export function LineHeightEdit( props ) {
attributes: { style },
setAttributes,
} = props;
const defaultLineHeight = useStyle( [ 'typography', 'lineHeight' ] );

const onChange = ( newLineHeightValue ) => {
const newStyle = {
Expand All @@ -43,6 +45,7 @@ export function LineHeightEdit( props ) {
value={ style?.typography?.lineHeight }
onChange={ onChange }
size="__unstable-large"
placeholder={ defaultLineHeight }
/>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/utils/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export { default as transformStyles } from './transform-styles';
export * from './block-variation-transforms';
export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
export { getValueFromVariable as __experimentalGetValueFromVariable } from './style-variable-resolution';
Loading

0 comments on commit 5ec1a92

Please sign in to comment.