diff --git a/wp-admin/css/customize-widgets-rtl.css b/wp-admin/css/customize-widgets-rtl.css index cc7cf8443b..7bb4b2ec6e 100644 --- a/wp-admin/css/customize-widgets-rtl.css +++ b/wp-admin/css/customize-widgets-rtl.css @@ -213,6 +213,21 @@ display: block; } +/* Text Widget */ +.wp-customizer div.mce-inline-toolbar-grp, +.wp-customizer div.mce-tooltip { + z-index: 500100 !important; +} +.wp-customizer .ui-autocomplete.wplink-autocomplete { + z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-backdrop { + z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-wrap { + z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */ +} + /** * Styles for new widget addition panel */ diff --git a/wp-admin/css/customize-widgets-rtl.min.css b/wp-admin/css/customize-widgets-rtl.min.css index 21e798c4b7..192b59c4c3 100644 --- a/wp-admin/css/customize-widgets-rtl.min.css +++ b/wp-admin/css/customize-widgets-rtl.min.css @@ -1 +1 @@ -.control-section.control-section-sidebar .accordion-section-content.ui-sortable,.wp-full-overlay-sidebar{overflow:visible}.control-section.control-section-sidebar,.customize-control-sidebar_widgets .hide-if-js,.customize-control-sidebar_widgets label{display:none}.customize-control-widget_form .widget-top{background:#fff;-webkit-transition:opacity .5s;transition:opacity .5s}.customize-control .widget-action{color:#72777c}.customize-control .widget-action:focus,.customize-control .widget-top:hover .widget-action{color:#23282d}.customize-control-widget_form:not(.widget-rendered) .widget-top{opacity:.5}.customize-control-widget_form .widget-control-save{display:none}.customize-control-widget_form .spinner{visibility:hidden;margin-top:0}.customize-control-widget_form.previewer-loading .spinner{visibility:visible}.customize-control-widget_form.widget-form-disabled .widget-content{opacity:.7;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.customize-control-widget_form .widget{margin-bottom:0}.customize-control-widget_form.wide-widget-control .widget-inside{position:fixed;right:299px;top:25%;border:1px solid #e5e5e5;overflow:auto}.customize-control-widget_form.wide-widget-control .widget-inside>.form{padding:20px}.customize-control-widget_form.wide-widget-control .widget-top{-webkit-transition:background-color .4s;transition:background-color .4s}.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top,.customize-control-widget_form.wide-widget-control.expanding .widget-top{background-color:#e3e3e3}.widget-inside{padding:1px 10px 10px;border-top:none;line-height:16px}.customize-control-widget_form.expanded .widget-action .toggle-indicator:before{content:"\f142"}.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before{content:"\f141"}.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before{content:"\f139"}.widget-title-action{cursor:pointer}.customize-control-widget_form .widget .customize-control-title,.widget-top{cursor:move}.control-section.accordion-section.highlighted>.accordion-section-title,.customize-control-widget_form.highlighted{outline:0;-webkit-box-shadow:0 0 2px rgba(30,140,190,.8);box-shadow:0 0 2px rgba(30,140,190,.8);position:relative;z-index:1}#widget-customizer-control-templates{display:none}#customize-theme-controls .widget-reorder-nav{display:none;float:left;background-color:#fafafa}.move-widget:before{content:"\f504"}#customize-theme-controls .move-widget-area{display:none;background:#fff;border:1px solid #ddd;border-top:none;cursor:auto}#customize-theme-controls .reordering .move-widget-area.active{display:block}#customize-theme-controls .move-widget-area .description{margin:0;padding:15px 20px;font-weight:400}#customize-theme-controls .widget-area-select{margin:0;padding:0;list-style:none}#customize-theme-controls .widget-area-select li{position:relative;margin:0;padding:13px 42px 15px 15px;color:#555;border-top:1px solid #eee;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#customize-theme-controls .widget-area-select li:before{display:none;content:"\f147";position:absolute;top:12px;right:10px;font:400 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#customize-theme-controls .widget-area-select li:last-child{border-bottom:1px solid #eee}#customize-theme-controls .widget-area-select .selected{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.4);background:#00a0d2}#customize-theme-controls .widget-area-select .selected:before{display:block}#customize-theme-controls .move-widget-actions{text-align:left;padding:12px}#customize-theme-controls .reordering .widget-title-action{display:none}#customize-theme-controls .reordering .widget-reorder-nav{display:block}#widgets-left #available-widgets .widget{float:none!important;width:auto!important}.ios #available-widgets{-webkit-transition:right 0s;transition:right 0s}#available-widgets .widget-tpl.selected,#available-widgets .widget-tpl:hover{background:#f3f3f5;border-bottom-color:#ccc;color:#0073aa;border-right:4px solid #0073aa}#customize-controls .widget-title h3{font-size:1em}#available-widgets .widget-title h3{padding:0 0 5px;font-size:14px}#available-widgets .widget .widget-description{padding:0;color:#72777c}#customize-preview{-webkit-transition:all .2s;transition:all .2s}body.adding-widget #available-widgets{right:0;visibility:visible}body.adding-widget .wp-full-overlay-main{right:300px}body.adding-widget #customize-preview{opacity:.4}#available-widgets .widget-title{position:relative}#available-widgets .widget-title:before{content:"\f132";position:absolute;top:-3px;left:100%;margin-left:20px;width:20px;height:20px;color:#32373c;font:400 20px/1 dashicons;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#available-widgets [class*=easy] .widget-title:before{content:"\f328";top:-4px}#available-widgets [class*=super] .widget-title:before,#available-widgets [class*=like] .widget-title:before{content:"\f155";top:-4px}#available-widgets [class*=meta] .widget-title:before{content:"\f120"}#available-widgets [class*=archives] .widget-title:before{content:"\f480";top:-4px}#available-widgets [class*=categor] .widget-title:before{content:"\f318";top:-4px}#available-widgets [class*=comment] .widget-title:before,#available-widgets [class*=testimonial] .widget-title:before,#available-widgets [class*=chat] .widget-title:before{content:"\f101"}#available-widgets [class*=post] .widget-title:before{content:"\f109"}#available-widgets [class*=page] .widget-title:before{content:"\f105"}#available-widgets [class*=text] .widget-title:before{content:"\f478"}#available-widgets [class*=link] .widget-title:before{content:"\f103"}#available-widgets [class*=search] .widget-title:before{content:"\f179"}#available-widgets [class*=menu] .widget-title:before,#available-widgets [class*=nav] .widget-title:before{content:"\f333"}#available-widgets [class*=tag] .widget-title:before{content:"\f479"}#available-widgets [class*=rss] .widget-title:before{content:"\f303";top:-6px}#available-widgets [class*=event] .widget-title:before,#available-widgets [class*=calendar] .widget-title:before{content:"\f145";top:-4px}#available-widgets [class*=image] .widget-title:before,#available-widgets [class*=photo] .widget-title:before,#available-widgets [class*=slide] .widget-title:before,#available-widgets [class*=instagram] .widget-title:before{content:"\f128"}#available-widgets [class*=album] .widget-title:before,#available-widgets [class*=galler] .widget-title:before{content:"\f161"}#available-widgets [class*=video] .widget-title:before,#available-widgets [class*=tube] .widget-title:before{content:"\f126"}#available-widgets [class*=music] .widget-title:before,#available-widgets [class*=radio] .widget-title:before,#available-widgets [class*=audio] .widget-title:before{content:"\f127"}#available-widgets [class*=login] .widget-title:before,#available-widgets [class*=user] .widget-title:before,#available-widgets [class*=member] .widget-title:before,#available-widgets [class*=avatar] .widget-title:before,#available-widgets [class*=subscriber] .widget-title:before,#available-widgets [class*=profile] .widget-title:before,#available-widgets [class*=grofile] .widget-title:before{content:"\f110"}#available-widgets [class*=commerce] .widget-title:before,#available-widgets [class*=shop] .widget-title:before,#available-widgets [class*=cart] .widget-title:before{content:"\f174";top:-4px}#available-widgets [class*=secur] .widget-title:before,#available-widgets [class*=firewall] .widget-title:before{content:"\f332"}#available-widgets [class*=analytic] .widget-title:before,#available-widgets [class*=stat] .widget-title:before,#available-widgets [class*=poll] .widget-title:before{content:"\f185"}#available-widgets [class*=form] .widget-title:before{content:"\f175"}#available-widgets [class*=subscribe] .widget-title:before,#available-widgets [class*=news] .widget-title:before,#available-widgets [class*=contact] .widget-title:before,#available-widgets [class*=mail] .widget-title:before{content:"\f466"}#available-widgets [class*=share] .widget-title:before,#available-widgets [class*=socia] .widget-title:before{content:"\f237"}#available-widgets [class*=lang] .widget-title:before,#available-widgets [class*=translat] .widget-title:before{content:"\f326"}#available-widgets [class*=locat] .widget-title:before,#available-widgets [class*=map] .widget-title:before{content:"\f231"}#available-widgets [class*=download] .widget-title:before{content:"\f316"}#available-widgets [class*=weather] .widget-title:before{content:"\f176";top:-4px}#available-widgets [class*=facebook] .widget-title:before{content:"\f304"}#available-widgets [class*=tweet] .widget-title:before,#available-widgets [class*=twitter] .widget-title:before{content:"\f301"}@media screen and (max-height:700px) and (min-width:981px){.customize-control-widget_form{margin-bottom:0}.widget-top{-webkit-box-shadow:none;box-shadow:none;margin-top:-1px}.widget-top:hover{position:relative;z-index:1}.last-widget{margin-bottom:15px}.widget-title h3{padding:13px 15px}.widget-top .widget-action{padding:8px 10px}.widget-reorder-nav span{height:39px}.widget-reorder-nav span:before{line-height:39px}#customize-theme-controls .widget-area-select li{padding:9px 42px 11px 15px}#customize-theme-controls .widget-area-select li:before{top:8px}} \ No newline at end of file +.control-section.control-section-sidebar .accordion-section-content.ui-sortable,.wp-full-overlay-sidebar{overflow:visible}.control-section.control-section-sidebar,.customize-control-sidebar_widgets .hide-if-js,.customize-control-sidebar_widgets label{display:none}.customize-control-widget_form .widget-top{background:#fff;-webkit-transition:opacity .5s;transition:opacity .5s}.customize-control .widget-action{color:#72777c}.customize-control .widget-action:focus,.customize-control .widget-top:hover .widget-action{color:#23282d}.customize-control-widget_form:not(.widget-rendered) .widget-top{opacity:.5}.customize-control-widget_form .widget-control-save{display:none}.customize-control-widget_form .spinner{visibility:hidden;margin-top:0}.customize-control-widget_form.previewer-loading .spinner{visibility:visible}.customize-control-widget_form.widget-form-disabled .widget-content{opacity:.7;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.customize-control-widget_form .widget{margin-bottom:0}.customize-control-widget_form.wide-widget-control .widget-inside{position:fixed;right:299px;top:25%;border:1px solid #e5e5e5;overflow:auto}.customize-control-widget_form.wide-widget-control .widget-inside>.form{padding:20px}.customize-control-widget_form.wide-widget-control .widget-top{-webkit-transition:background-color .4s;transition:background-color .4s}.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top,.customize-control-widget_form.wide-widget-control.expanding .widget-top{background-color:#e3e3e3}.widget-inside{padding:1px 10px 10px;border-top:none;line-height:16px}.customize-control-widget_form.expanded .widget-action .toggle-indicator:before{content:"\f142"}.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before{content:"\f141"}.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before{content:"\f139"}.widget-title-action{cursor:pointer}.customize-control-widget_form .widget .customize-control-title,.widget-top{cursor:move}.control-section.accordion-section.highlighted>.accordion-section-title,.customize-control-widget_form.highlighted{outline:0;-webkit-box-shadow:0 0 2px rgba(30,140,190,.8);box-shadow:0 0 2px rgba(30,140,190,.8);position:relative;z-index:1}#widget-customizer-control-templates{display:none}#customize-theme-controls .widget-reorder-nav{display:none;float:left;background-color:#fafafa}.move-widget:before{content:"\f504"}#customize-theme-controls .move-widget-area{display:none;background:#fff;border:1px solid #ddd;border-top:none;cursor:auto}#customize-theme-controls .reordering .move-widget-area.active{display:block}#customize-theme-controls .move-widget-area .description{margin:0;padding:15px 20px;font-weight:400}#customize-theme-controls .widget-area-select{margin:0;padding:0;list-style:none}#customize-theme-controls .widget-area-select li{position:relative;margin:0;padding:13px 42px 15px 15px;color:#555;border-top:1px solid #eee;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#customize-theme-controls .widget-area-select li:before{display:none;content:"\f147";position:absolute;top:12px;right:10px;font:400 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#customize-theme-controls .widget-area-select li:last-child{border-bottom:1px solid #eee}#customize-theme-controls .widget-area-select .selected{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.4);background:#00a0d2}#customize-theme-controls .widget-area-select .selected:before{display:block}#customize-theme-controls .move-widget-actions{text-align:left;padding:12px}#customize-theme-controls .reordering .widget-title-action{display:none}#customize-theme-controls .reordering .widget-reorder-nav{display:block}.wp-customizer div.mce-inline-toolbar-grp,.wp-customizer div.mce-tooltip{z-index:500100!important}.wp-customizer .ui-autocomplete.wplink-autocomplete{z-index:500110}.wp-customizer #wp-link-backdrop{z-index:500100}.wp-customizer #wp-link-wrap{z-index:500105}#widgets-left #available-widgets .widget{float:none!important;width:auto!important}.ios #available-widgets{-webkit-transition:right 0s;transition:right 0s}#available-widgets .widget-tpl.selected,#available-widgets .widget-tpl:hover{background:#f3f3f5;border-bottom-color:#ccc;color:#0073aa;border-right:4px solid #0073aa}#customize-controls .widget-title h3{font-size:1em}#available-widgets .widget-title h3{padding:0 0 5px;font-size:14px}#available-widgets .widget .widget-description{padding:0;color:#72777c}#customize-preview{-webkit-transition:all .2s;transition:all .2s}body.adding-widget #available-widgets{right:0;visibility:visible}body.adding-widget .wp-full-overlay-main{right:300px}body.adding-widget #customize-preview{opacity:.4}#available-widgets .widget-title{position:relative}#available-widgets .widget-title:before{content:"\f132";position:absolute;top:-3px;left:100%;margin-left:20px;width:20px;height:20px;color:#32373c;font:400 20px/1 dashicons;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#available-widgets [class*=easy] .widget-title:before{content:"\f328";top:-4px}#available-widgets [class*=super] .widget-title:before,#available-widgets [class*=like] .widget-title:before{content:"\f155";top:-4px}#available-widgets [class*=meta] .widget-title:before{content:"\f120"}#available-widgets [class*=archives] .widget-title:before{content:"\f480";top:-4px}#available-widgets [class*=categor] .widget-title:before{content:"\f318";top:-4px}#available-widgets [class*=comment] .widget-title:before,#available-widgets [class*=testimonial] .widget-title:before,#available-widgets [class*=chat] .widget-title:before{content:"\f101"}#available-widgets [class*=post] .widget-title:before{content:"\f109"}#available-widgets [class*=page] .widget-title:before{content:"\f105"}#available-widgets [class*=text] .widget-title:before{content:"\f478"}#available-widgets [class*=link] .widget-title:before{content:"\f103"}#available-widgets [class*=search] .widget-title:before{content:"\f179"}#available-widgets [class*=menu] .widget-title:before,#available-widgets [class*=nav] .widget-title:before{content:"\f333"}#available-widgets [class*=tag] .widget-title:before{content:"\f479"}#available-widgets [class*=rss] .widget-title:before{content:"\f303";top:-6px}#available-widgets [class*=event] .widget-title:before,#available-widgets [class*=calendar] .widget-title:before{content:"\f145";top:-4px}#available-widgets [class*=image] .widget-title:before,#available-widgets [class*=photo] .widget-title:before,#available-widgets [class*=slide] .widget-title:before,#available-widgets [class*=instagram] .widget-title:before{content:"\f128"}#available-widgets [class*=album] .widget-title:before,#available-widgets [class*=galler] .widget-title:before{content:"\f161"}#available-widgets [class*=video] .widget-title:before,#available-widgets [class*=tube] .widget-title:before{content:"\f126"}#available-widgets [class*=music] .widget-title:before,#available-widgets [class*=radio] .widget-title:before,#available-widgets [class*=audio] .widget-title:before{content:"\f127"}#available-widgets [class*=login] .widget-title:before,#available-widgets [class*=user] .widget-title:before,#available-widgets [class*=member] .widget-title:before,#available-widgets [class*=avatar] .widget-title:before,#available-widgets [class*=subscriber] .widget-title:before,#available-widgets [class*=profile] .widget-title:before,#available-widgets [class*=grofile] .widget-title:before{content:"\f110"}#available-widgets [class*=commerce] .widget-title:before,#available-widgets [class*=shop] .widget-title:before,#available-widgets [class*=cart] .widget-title:before{content:"\f174";top:-4px}#available-widgets [class*=secur] .widget-title:before,#available-widgets [class*=firewall] .widget-title:before{content:"\f332"}#available-widgets [class*=analytic] .widget-title:before,#available-widgets [class*=stat] .widget-title:before,#available-widgets [class*=poll] .widget-title:before{content:"\f185"}#available-widgets [class*=form] .widget-title:before{content:"\f175"}#available-widgets [class*=subscribe] .widget-title:before,#available-widgets [class*=news] .widget-title:before,#available-widgets [class*=contact] .widget-title:before,#available-widgets [class*=mail] .widget-title:before{content:"\f466"}#available-widgets [class*=share] .widget-title:before,#available-widgets [class*=socia] .widget-title:before{content:"\f237"}#available-widgets [class*=lang] .widget-title:before,#available-widgets [class*=translat] .widget-title:before{content:"\f326"}#available-widgets [class*=locat] .widget-title:before,#available-widgets [class*=map] .widget-title:before{content:"\f231"}#available-widgets [class*=download] .widget-title:before{content:"\f316"}#available-widgets [class*=weather] .widget-title:before{content:"\f176";top:-4px}#available-widgets [class*=facebook] .widget-title:before{content:"\f304"}#available-widgets [class*=tweet] .widget-title:before,#available-widgets [class*=twitter] .widget-title:before{content:"\f301"}@media screen and (max-height:700px) and (min-width:981px){.customize-control-widget_form{margin-bottom:0}.widget-top{-webkit-box-shadow:none;box-shadow:none;margin-top:-1px}.widget-top:hover{position:relative;z-index:1}.last-widget{margin-bottom:15px}.widget-title h3{padding:13px 15px}.widget-top .widget-action{padding:8px 10px}.widget-reorder-nav span{height:39px}.widget-reorder-nav span:before{line-height:39px}#customize-theme-controls .widget-area-select li{padding:9px 42px 11px 15px}#customize-theme-controls .widget-area-select li:before{top:8px}} \ No newline at end of file diff --git a/wp-admin/css/customize-widgets.css b/wp-admin/css/customize-widgets.css index bdb58982fe..0a9fbf5869 100644 --- a/wp-admin/css/customize-widgets.css +++ b/wp-admin/css/customize-widgets.css @@ -213,6 +213,21 @@ display: block; } +/* Text Widget */ +.wp-customizer div.mce-inline-toolbar-grp, +.wp-customizer div.mce-tooltip { + z-index: 500100 !important; +} +.wp-customizer .ui-autocomplete.wplink-autocomplete { + z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-backdrop { + z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-wrap { + z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */ +} + /** * Styles for new widget addition panel */ diff --git a/wp-admin/css/customize-widgets.min.css b/wp-admin/css/customize-widgets.min.css index d531ab4a07..22c611ebb0 100644 --- a/wp-admin/css/customize-widgets.min.css +++ b/wp-admin/css/customize-widgets.min.css @@ -1 +1 @@ -.control-section.control-section-sidebar .accordion-section-content.ui-sortable,.wp-full-overlay-sidebar{overflow:visible}.control-section.control-section-sidebar,.customize-control-sidebar_widgets .hide-if-js,.customize-control-sidebar_widgets label{display:none}.customize-control-widget_form .widget-top{background:#fff;-webkit-transition:opacity .5s;transition:opacity .5s}.customize-control .widget-action{color:#72777c}.customize-control .widget-action:focus,.customize-control .widget-top:hover .widget-action{color:#23282d}.customize-control-widget_form:not(.widget-rendered) .widget-top{opacity:.5}.customize-control-widget_form .widget-control-save{display:none}.customize-control-widget_form .spinner{visibility:hidden;margin-top:0}.customize-control-widget_form.previewer-loading .spinner{visibility:visible}.customize-control-widget_form.widget-form-disabled .widget-content{opacity:.7;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.customize-control-widget_form .widget{margin-bottom:0}.customize-control-widget_form.wide-widget-control .widget-inside{position:fixed;left:299px;top:25%;border:1px solid #e5e5e5;overflow:auto}.customize-control-widget_form.wide-widget-control .widget-inside>.form{padding:20px}.customize-control-widget_form.wide-widget-control .widget-top{-webkit-transition:background-color .4s;transition:background-color .4s}.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top,.customize-control-widget_form.wide-widget-control.expanding .widget-top{background-color:#e3e3e3}.widget-inside{padding:1px 10px 10px;border-top:none;line-height:16px}.customize-control-widget_form.expanded .widget-action .toggle-indicator:before{content:"\f142"}.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before{content:"\f139"}.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before{content:"\f141"}.widget-title-action{cursor:pointer}.customize-control-widget_form .widget .customize-control-title,.widget-top{cursor:move}.control-section.accordion-section.highlighted>.accordion-section-title,.customize-control-widget_form.highlighted{outline:0;-webkit-box-shadow:0 0 2px rgba(30,140,190,.8);box-shadow:0 0 2px rgba(30,140,190,.8);position:relative;z-index:1}#widget-customizer-control-templates{display:none}#customize-theme-controls .widget-reorder-nav{display:none;float:right;background-color:#fafafa}.move-widget:before{content:"\f504"}#customize-theme-controls .move-widget-area{display:none;background:#fff;border:1px solid #ddd;border-top:none;cursor:auto}#customize-theme-controls .reordering .move-widget-area.active{display:block}#customize-theme-controls .move-widget-area .description{margin:0;padding:15px 20px;font-weight:400}#customize-theme-controls .widget-area-select{margin:0;padding:0;list-style:none}#customize-theme-controls .widget-area-select li{position:relative;margin:0;padding:13px 15px 15px 42px;color:#555;border-top:1px solid #eee;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#customize-theme-controls .widget-area-select li:before{display:none;content:"\f147";position:absolute;top:12px;left:10px;font:400 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#customize-theme-controls .widget-area-select li:last-child{border-bottom:1px solid #eee}#customize-theme-controls .widget-area-select .selected{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.4);background:#00a0d2}#customize-theme-controls .widget-area-select .selected:before{display:block}#customize-theme-controls .move-widget-actions{text-align:right;padding:12px}#customize-theme-controls .reordering .widget-title-action{display:none}#customize-theme-controls .reordering .widget-reorder-nav{display:block}#widgets-left #available-widgets .widget{float:none!important;width:auto!important}.ios #available-widgets{-webkit-transition:left 0s;transition:left 0s}#available-widgets .widget-tpl.selected,#available-widgets .widget-tpl:hover{background:#f3f3f5;border-bottom-color:#ccc;color:#0073aa;border-left:4px solid #0073aa}#customize-controls .widget-title h3{font-size:1em}#available-widgets .widget-title h3{padding:0 0 5px;font-size:14px}#available-widgets .widget .widget-description{padding:0;color:#72777c}#customize-preview{-webkit-transition:all .2s;transition:all .2s}body.adding-widget #available-widgets{left:0;visibility:visible}body.adding-widget .wp-full-overlay-main{left:300px}body.adding-widget #customize-preview{opacity:.4}#available-widgets .widget-title{position:relative}#available-widgets .widget-title:before{content:"\f132";position:absolute;top:-3px;right:100%;margin-right:20px;width:20px;height:20px;color:#32373c;font:400 20px/1 dashicons;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#available-widgets [class*=easy] .widget-title:before{content:"\f328";top:-4px}#available-widgets [class*=super] .widget-title:before,#available-widgets [class*=like] .widget-title:before{content:"\f155";top:-4px}#available-widgets [class*=meta] .widget-title:before{content:"\f120"}#available-widgets [class*=archives] .widget-title:before{content:"\f480";top:-4px}#available-widgets [class*=categor] .widget-title:before{content:"\f318";top:-4px}#available-widgets [class*=comment] .widget-title:before,#available-widgets [class*=testimonial] .widget-title:before,#available-widgets [class*=chat] .widget-title:before{content:"\f101"}#available-widgets [class*=post] .widget-title:before{content:"\f109"}#available-widgets [class*=page] .widget-title:before{content:"\f105"}#available-widgets [class*=text] .widget-title:before{content:"\f478"}#available-widgets [class*=link] .widget-title:before{content:"\f103"}#available-widgets [class*=search] .widget-title:before{content:"\f179"}#available-widgets [class*=menu] .widget-title:before,#available-widgets [class*=nav] .widget-title:before{content:"\f333"}#available-widgets [class*=tag] .widget-title:before{content:"\f479"}#available-widgets [class*=rss] .widget-title:before{content:"\f303";top:-6px}#available-widgets [class*=event] .widget-title:before,#available-widgets [class*=calendar] .widget-title:before{content:"\f145";top:-4px}#available-widgets [class*=image] .widget-title:before,#available-widgets [class*=photo] .widget-title:before,#available-widgets [class*=slide] .widget-title:before,#available-widgets [class*=instagram] .widget-title:before{content:"\f128"}#available-widgets [class*=album] .widget-title:before,#available-widgets [class*=galler] .widget-title:before{content:"\f161"}#available-widgets [class*=video] .widget-title:before,#available-widgets [class*=tube] .widget-title:before{content:"\f126"}#available-widgets [class*=music] .widget-title:before,#available-widgets [class*=radio] .widget-title:before,#available-widgets [class*=audio] .widget-title:before{content:"\f127"}#available-widgets [class*=login] .widget-title:before,#available-widgets [class*=user] .widget-title:before,#available-widgets [class*=member] .widget-title:before,#available-widgets [class*=avatar] .widget-title:before,#available-widgets [class*=subscriber] .widget-title:before,#available-widgets [class*=profile] .widget-title:before,#available-widgets [class*=grofile] .widget-title:before{content:"\f110"}#available-widgets [class*=commerce] .widget-title:before,#available-widgets [class*=shop] .widget-title:before,#available-widgets [class*=cart] .widget-title:before{content:"\f174";top:-4px}#available-widgets [class*=secur] .widget-title:before,#available-widgets [class*=firewall] .widget-title:before{content:"\f332"}#available-widgets [class*=analytic] .widget-title:before,#available-widgets [class*=stat] .widget-title:before,#available-widgets [class*=poll] .widget-title:before{content:"\f185"}#available-widgets [class*=form] .widget-title:before{content:"\f175"}#available-widgets [class*=subscribe] .widget-title:before,#available-widgets [class*=news] .widget-title:before,#available-widgets [class*=contact] .widget-title:before,#available-widgets [class*=mail] .widget-title:before{content:"\f466"}#available-widgets [class*=share] .widget-title:before,#available-widgets [class*=socia] .widget-title:before{content:"\f237"}#available-widgets [class*=lang] .widget-title:before,#available-widgets [class*=translat] .widget-title:before{content:"\f326"}#available-widgets [class*=locat] .widget-title:before,#available-widgets [class*=map] .widget-title:before{content:"\f231"}#available-widgets [class*=download] .widget-title:before{content:"\f316"}#available-widgets [class*=weather] .widget-title:before{content:"\f176";top:-4px}#available-widgets [class*=facebook] .widget-title:before{content:"\f304"}#available-widgets [class*=tweet] .widget-title:before,#available-widgets [class*=twitter] .widget-title:before{content:"\f301"}@media screen and (max-height:700px) and (min-width:981px){.customize-control-widget_form{margin-bottom:0}.widget-top{-webkit-box-shadow:none;box-shadow:none;margin-top:-1px}.widget-top:hover{position:relative;z-index:1}.last-widget{margin-bottom:15px}.widget-title h3{padding:13px 15px}.widget-top .widget-action{padding:8px 10px}.widget-reorder-nav span{height:39px}.widget-reorder-nav span:before{line-height:39px}#customize-theme-controls .widget-area-select li{padding:9px 15px 11px 42px}#customize-theme-controls .widget-area-select li:before{top:8px}} \ No newline at end of file +.control-section.control-section-sidebar .accordion-section-content.ui-sortable,.wp-full-overlay-sidebar{overflow:visible}.control-section.control-section-sidebar,.customize-control-sidebar_widgets .hide-if-js,.customize-control-sidebar_widgets label{display:none}.customize-control-widget_form .widget-top{background:#fff;-webkit-transition:opacity .5s;transition:opacity .5s}.customize-control .widget-action{color:#72777c}.customize-control .widget-action:focus,.customize-control .widget-top:hover .widget-action{color:#23282d}.customize-control-widget_form:not(.widget-rendered) .widget-top{opacity:.5}.customize-control-widget_form .widget-control-save{display:none}.customize-control-widget_form .spinner{visibility:hidden;margin-top:0}.customize-control-widget_form.previewer-loading .spinner{visibility:visible}.customize-control-widget_form.widget-form-disabled .widget-content{opacity:.7;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.customize-control-widget_form .widget{margin-bottom:0}.customize-control-widget_form.wide-widget-control .widget-inside{position:fixed;left:299px;top:25%;border:1px solid #e5e5e5;overflow:auto}.customize-control-widget_form.wide-widget-control .widget-inside>.form{padding:20px}.customize-control-widget_form.wide-widget-control .widget-top{-webkit-transition:background-color .4s;transition:background-color .4s}.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top,.customize-control-widget_form.wide-widget-control.expanding .widget-top{background-color:#e3e3e3}.widget-inside{padding:1px 10px 10px;border-top:none;line-height:16px}.customize-control-widget_form.expanded .widget-action .toggle-indicator:before{content:"\f142"}.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before{content:"\f139"}.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before{content:"\f141"}.widget-title-action{cursor:pointer}.customize-control-widget_form .widget .customize-control-title,.widget-top{cursor:move}.control-section.accordion-section.highlighted>.accordion-section-title,.customize-control-widget_form.highlighted{outline:0;-webkit-box-shadow:0 0 2px rgba(30,140,190,.8);box-shadow:0 0 2px rgba(30,140,190,.8);position:relative;z-index:1}#widget-customizer-control-templates{display:none}#customize-theme-controls .widget-reorder-nav{display:none;float:right;background-color:#fafafa}.move-widget:before{content:"\f504"}#customize-theme-controls .move-widget-area{display:none;background:#fff;border:1px solid #ddd;border-top:none;cursor:auto}#customize-theme-controls .reordering .move-widget-area.active{display:block}#customize-theme-controls .move-widget-area .description{margin:0;padding:15px 20px;font-weight:400}#customize-theme-controls .widget-area-select{margin:0;padding:0;list-style:none}#customize-theme-controls .widget-area-select li{position:relative;margin:0;padding:13px 15px 15px 42px;color:#555;border-top:1px solid #eee;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#customize-theme-controls .widget-area-select li:before{display:none;content:"\f147";position:absolute;top:12px;left:10px;font:400 20px/1 dashicons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#customize-theme-controls .widget-area-select li:last-child{border-bottom:1px solid #eee}#customize-theme-controls .widget-area-select .selected{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.4);background:#00a0d2}#customize-theme-controls .widget-area-select .selected:before{display:block}#customize-theme-controls .move-widget-actions{text-align:right;padding:12px}#customize-theme-controls .reordering .widget-title-action{display:none}#customize-theme-controls .reordering .widget-reorder-nav{display:block}.wp-customizer div.mce-inline-toolbar-grp,.wp-customizer div.mce-tooltip{z-index:500100!important}.wp-customizer .ui-autocomplete.wplink-autocomplete{z-index:500110}.wp-customizer #wp-link-backdrop{z-index:500100}.wp-customizer #wp-link-wrap{z-index:500105}#widgets-left #available-widgets .widget{float:none!important;width:auto!important}.ios #available-widgets{-webkit-transition:left 0s;transition:left 0s}#available-widgets .widget-tpl.selected,#available-widgets .widget-tpl:hover{background:#f3f3f5;border-bottom-color:#ccc;color:#0073aa;border-left:4px solid #0073aa}#customize-controls .widget-title h3{font-size:1em}#available-widgets .widget-title h3{padding:0 0 5px;font-size:14px}#available-widgets .widget .widget-description{padding:0;color:#72777c}#customize-preview{-webkit-transition:all .2s;transition:all .2s}body.adding-widget #available-widgets{left:0;visibility:visible}body.adding-widget .wp-full-overlay-main{left:300px}body.adding-widget #customize-preview{opacity:.4}#available-widgets .widget-title{position:relative}#available-widgets .widget-title:before{content:"\f132";position:absolute;top:-3px;right:100%;margin-right:20px;width:20px;height:20px;color:#32373c;font:400 20px/1 dashicons;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#available-widgets [class*=easy] .widget-title:before{content:"\f328";top:-4px}#available-widgets [class*=super] .widget-title:before,#available-widgets [class*=like] .widget-title:before{content:"\f155";top:-4px}#available-widgets [class*=meta] .widget-title:before{content:"\f120"}#available-widgets [class*=archives] .widget-title:before{content:"\f480";top:-4px}#available-widgets [class*=categor] .widget-title:before{content:"\f318";top:-4px}#available-widgets [class*=comment] .widget-title:before,#available-widgets [class*=testimonial] .widget-title:before,#available-widgets [class*=chat] .widget-title:before{content:"\f101"}#available-widgets [class*=post] .widget-title:before{content:"\f109"}#available-widgets [class*=page] .widget-title:before{content:"\f105"}#available-widgets [class*=text] .widget-title:before{content:"\f478"}#available-widgets [class*=link] .widget-title:before{content:"\f103"}#available-widgets [class*=search] .widget-title:before{content:"\f179"}#available-widgets [class*=menu] .widget-title:before,#available-widgets [class*=nav] .widget-title:before{content:"\f333"}#available-widgets [class*=tag] .widget-title:before{content:"\f479"}#available-widgets [class*=rss] .widget-title:before{content:"\f303";top:-6px}#available-widgets [class*=event] .widget-title:before,#available-widgets [class*=calendar] .widget-title:before{content:"\f145";top:-4px}#available-widgets [class*=image] .widget-title:before,#available-widgets [class*=photo] .widget-title:before,#available-widgets [class*=slide] .widget-title:before,#available-widgets [class*=instagram] .widget-title:before{content:"\f128"}#available-widgets [class*=album] .widget-title:before,#available-widgets [class*=galler] .widget-title:before{content:"\f161"}#available-widgets [class*=video] .widget-title:before,#available-widgets [class*=tube] .widget-title:before{content:"\f126"}#available-widgets [class*=music] .widget-title:before,#available-widgets [class*=radio] .widget-title:before,#available-widgets [class*=audio] .widget-title:before{content:"\f127"}#available-widgets [class*=login] .widget-title:before,#available-widgets [class*=user] .widget-title:before,#available-widgets [class*=member] .widget-title:before,#available-widgets [class*=avatar] .widget-title:before,#available-widgets [class*=subscriber] .widget-title:before,#available-widgets [class*=profile] .widget-title:before,#available-widgets [class*=grofile] .widget-title:before{content:"\f110"}#available-widgets [class*=commerce] .widget-title:before,#available-widgets [class*=shop] .widget-title:before,#available-widgets [class*=cart] .widget-title:before{content:"\f174";top:-4px}#available-widgets [class*=secur] .widget-title:before,#available-widgets [class*=firewall] .widget-title:before{content:"\f332"}#available-widgets [class*=analytic] .widget-title:before,#available-widgets [class*=stat] .widget-title:before,#available-widgets [class*=poll] .widget-title:before{content:"\f185"}#available-widgets [class*=form] .widget-title:before{content:"\f175"}#available-widgets [class*=subscribe] .widget-title:before,#available-widgets [class*=news] .widget-title:before,#available-widgets [class*=contact] .widget-title:before,#available-widgets [class*=mail] .widget-title:before{content:"\f466"}#available-widgets [class*=share] .widget-title:before,#available-widgets [class*=socia] .widget-title:before{content:"\f237"}#available-widgets [class*=lang] .widget-title:before,#available-widgets [class*=translat] .widget-title:before{content:"\f326"}#available-widgets [class*=locat] .widget-title:before,#available-widgets [class*=map] .widget-title:before{content:"\f231"}#available-widgets [class*=download] .widget-title:before{content:"\f316"}#available-widgets [class*=weather] .widget-title:before{content:"\f176";top:-4px}#available-widgets [class*=facebook] .widget-title:before{content:"\f304"}#available-widgets [class*=tweet] .widget-title:before,#available-widgets [class*=twitter] .widget-title:before{content:"\f301"}@media screen and (max-height:700px) and (min-width:981px){.customize-control-widget_form{margin-bottom:0}.widget-top{-webkit-box-shadow:none;box-shadow:none;margin-top:-1px}.widget-top:hover{position:relative;z-index:1}.last-widget{margin-bottom:15px}.widget-title h3{padding:13px 15px}.widget-top .widget-action{padding:8px 10px}.widget-reorder-nav span{height:39px}.widget-reorder-nav span:before{line-height:39px}#customize-theme-controls .widget-area-select li{padding:9px 15px 11px 42px}#customize-theme-controls .widget-area-select li:before{top:8px}} \ No newline at end of file diff --git a/wp-admin/js/widgets/text-widgets.js b/wp-admin/js/widgets/text-widgets.js new file mode 100644 index 0000000000..2d3a5b812c --- /dev/null +++ b/wp-admin/js/widgets/text-widgets.js @@ -0,0 +1,326 @@ +/* global tinymce, switchEditors */ +/* eslint consistent-this: [ "error", "control" ] */ +wp.textWidgets = ( function( $ ) { + 'use strict'; + + var component = {}; + + /** + * Text widget control. + * + * @class TextWidgetControl + * @constructor + * @abstract + */ + component.TextWidgetControl = Backbone.View.extend({ + + /** + * View events. + * + * @type {Object} + */ + events: {}, + + /** + * Initialize. + * + * @param {Object} options - Options. + * @param {Backbone.Model} options.model - Model. + * @param {jQuery} options.el - Control container element. + * @returns {void} + */ + initialize: function initialize( options ) { + var control = this; + + if ( ! options.el ) { + throw new Error( 'Missing options.el' ); + } + + Backbone.View.prototype.initialize.call( control, options ); + + /* + * Create a container element for the widget control fields. + * This is inserted into the DOM immediately before the the .widget-content + * element because the contents of this element are essentially "managed" + * by PHP, where each widget update cause the entire element to be emptied + * and replaced with the rendered output of WP_Widget::form() which is + * sent back in Ajax request made to save/update the widget instance. + * To prevent a "flash of replaced DOM elements and re-initialized JS + * components", the JS template is rendered outside of the normal form + * container. + */ + control.fieldContainer = $( '
' ); + control.fieldContainer.html( wp.template( 'widget-text-control-fields' ) ); + control.widgetContentContainer = control.$el.find( '.widget-content:first' ); + control.widgetContentContainer.before( control.fieldContainer ); + + control.fields = { + title: control.fieldContainer.find( '.title' ), + text: control.fieldContainer.find( '.text' ) + }; + + // Sync input fields to hidden sync fields which actually get sent to the server. + _.each( control.fields, function( fieldInput, fieldName ) { + fieldInput.on( 'input change', function updateSyncField() { + var syncInput = control.widgetContentContainer.find( 'input[type=hidden].' + fieldName ); + if ( syncInput.val() !== $( this ).val() ) { + syncInput.val( $( this ).val() ); + syncInput.trigger( 'change' ); + } + }); + + // Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event. + fieldInput.val( control.widgetContentContainer.find( 'input[type=hidden].' + fieldName ).val() ); + }); + }, + + /** + * Update input fields from the sync fields. + * + * This function is called at the widget-updated and widget-synced events. + * A field will only be updated if it is not currently focused, to avoid + * overwriting content that the user is entering. + * + * @returns {void} + */ + updateFields: function updateFields() { + var control = this, syncInput; + + if ( ! control.fields.title.is( document.activeElement ) ) { + syncInput = control.widgetContentContainer.find( 'input[type=hidden].title' ); + control.fields.title.val( syncInput.val() ); + } + + syncInput = control.widgetContentContainer.find( 'input[type=hidden].text' ); + if ( control.fields.text.is( ':visible' ) ) { + if ( ! control.fields.text.is( document.activeElement ) ) { + control.fields.text.val( syncInput.val() ); + } + } else if ( control.editor && ! control.editorFocused && syncInput.val() !== control.fields.text.val() ) { + control.editor.setContent( wp.editor.autop( syncInput.val() ) ); + } + }, + + /** + * Initialize editor. + * + * @returns {void} + */ + initializeEditor: function initializeEditor() { + var control = this, changeDebounceDelay = 1000, id, textarea, restoreTextMode = false; + textarea = control.fields.text; + id = textarea.attr( 'id' ); + + /** + * Build (or re-build) the visual editor. + * + * @returns {void} + */ + function buildEditor() { + var editor, triggerChangeIfDirty, onInit; + + // Abort building if the textarea is gone, likely due to the widget having been deleted entirely. + if ( ! document.getElementById( id ) ) { + return; + } + + // Destroy any existing editor so that it can be re-initialized after a widget-updated event. + if ( tinymce.get( id ) ) { + restoreTextMode = tinymce.get( id ).isHidden(); + wp.editor.remove( id ); + } + + wp.editor.initialize( id, { + tinymce: { + wpautop: true + }, + quicktags: true + } ); + + editor = window.tinymce.get( id ); + if ( ! editor ) { + throw new Error( 'Failed to initialize editor' ); + } + onInit = function() { + + // When a widget is moved in the DOM the dynamically-created TinyMCE iframe will be destroyed and has to be re-built. + $( editor.getWin() ).on( 'unload', function() { + _.defer( buildEditor ); + }); + + // If a prior mce instance was replaced, and it was in text mode, toggle to text mode. + if ( restoreTextMode ) { + switchEditors.go( id, 'toggle' ); + } + }; + + if ( editor.initialized ) { + onInit(); + } else { + editor.on( 'init', onInit ); + } + + control.editorFocused = false; + triggerChangeIfDirty = function() { + var updateWidgetBuffer = 300; // See wp.customize.Widgets.WidgetControl._setupUpdateUI() which uses 250ms for updateWidgetDebounced. + if ( editor.isDirty() ) { + + /* + * Account for race condition in customizer where user clicks Save & Publish while + * focus was just previously given to to the editor. Since updates to the editor + * are debounced at 1 second and since widget input changes are only synced to + * settings after 250ms, the customizer needs to be put into the processing + * state during the time between the change event is triggered and updateWidget + * logic starts. Note that the debounced update-widget request should be able + * to be removed with the removal of the update-widget request entirely once + * widgets are able to mutate their own instance props directly in JS without + * having to make server round-trips to call the respective WP_Widget::update() + * callbacks. See-
+ + + - - -/>
+ /** + * Render form template scripts. + * + * @since 4.8.0 + * @access public + */ + public function render_control_template_scripts() { + ?> +