Skip to content

Commit

Permalink
Components: replace TabPanel with Tabs in inline color picker (#5…
Browse files Browse the repository at this point in the history
…7292)

* add support for private apis

* implement Tabs

* update styles

* clean up styles
chad1008 authored Jan 8, 2024
1 parent f0fe982 commit e27b306
Showing 6 changed files with 53 additions and 43 deletions.
2 changes: 2 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/format-library/package.json
Original file line number Diff line number Diff line change
@@ -35,6 +35,7 @@
"@wordpress/html-entities": "file:../html-entities",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
"@wordpress/private-apis": "file:../private-apis",
"@wordpress/rich-text": "file:../rich-text",
"@wordpress/url": "file:../url"
},
10 changes: 10 additions & 0 deletions packages/format-library/src/lock-unlock.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* WordPress dependencies
*/
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';

export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/format-library'
);
59 changes: 36 additions & 23 deletions packages/format-library/src/text-color/inline.js
Original file line number Diff line number Diff line change
@@ -17,13 +17,24 @@ import {
store as blockEditorStore,
useCachedTruthy,
} from '@wordpress/block-editor';
import { Popover, TabPanel } from '@wordpress/components';
import {
Popover,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { textColor as settings, transparentValue } from './index';
import { unlock } from '../lock-unlock';

const { Tabs } = unlock( componentsPrivateApis );

const TABS = [
{ name: 'color', title: __( 'Text' ) },
{ name: 'backgroundColor', title: __( 'Background' ) },
];

function parseCSS( css = '' ) {
return css.split( ';' ).reduce( ( accumulator, rule ) => {
@@ -155,30 +166,32 @@ export default function InlineColorUI( {
return (
<Popover
onClose={ onClose }
className="components-inline-color-popover"
className="format-library__inline-color-popover"
anchor={ popoverAnchor }
>
<TabPanel
tabs={ [
{
name: 'color',
title: __( 'Text' ),
},
{
name: 'backgroundColor',
title: __( 'Background' ),
},
] }
>
{ ( tab ) => (
<ColorPicker
name={ name }
property={ tab.name }
value={ value }
onChange={ onChange }
/>
) }
</TabPanel>
<Tabs>
<Tabs.TabList>
{ TABS.map( ( tab ) => (
<Tabs.Tab tabId={ tab.name } key={ tab.name }>
{ tab.title }
</Tabs.Tab>
) ) }
</Tabs.TabList>
{ TABS.map( ( tab ) => (
<Tabs.TabPanel
tabId={ tab.name }
focusable={ false }
key={ tab.name }
>
<ColorPicker
name={ name }
property={ tab.name }
value={ value }
onChange={ onChange }
/>
</Tabs.TabPanel>
) ) }
</Tabs>
</Popover>
);
}
23 changes: 3 additions & 20 deletions packages/format-library/src/text-color/style.scss
Original file line number Diff line number Diff line change
@@ -1,23 +1,6 @@
.components-inline-color-popover {
.format-library__inline-color-popover {

.components-popover__content {
.components-tab-panel__tab-content {
padding: 16px;
}

.components-color-palette {
margin-top: 0.6rem;
}

.components-base-control__title {
display: block;
margin-bottom: 16px;
font-weight: 600;
color: #191e23;
}

.component-color-indicator {
vertical-align: text-bottom;
}
[role="tabpanel"] {
padding: 16px;
}
}
1 change: 1 addition & 0 deletions packages/private-apis/src/implementation.js
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
'@wordpress/edit-site',
'@wordpress/edit-widgets',
'@wordpress/editor',
'@wordpress/format-library',
'@wordpress/patterns',
'@wordpress/reusable-blocks',
'@wordpress/router',

0 comments on commit e27b306

Please sign in to comment.